Clucker is a text-based social media app where people can share short messages, called clucks, with the world. User's can create a custom profile, follow their friends, share their ideas and like other clucks.
- Next.js and TypeScript: The frontend is built using Next.js, a popular React framework, with TypeScript for strong typing and a better dev experience.
- Tailwind CSS and shadcn/ui: I used TailwindCSS for custom styling built ontop of components designed at shadcn
- Django Rest Framework: The backend uses the Django Rest Framework for handling CRUD operations with the SQLite database.
- NextAuth.js: To ensure secure sign-in authentication, I integrated NextAuth.js, enabling Google sign-in and JWT (JSON Web Token) handling.
- AWS Elastic Beanstalk: The backend is hosted on AWS Elastic Beanstalk
- Vercel (Free Tier): For the frontend, I used Vercel's free tier hosting
-
Clone the repository:
git clone https://github.com/Owen-Allen/clucker.git cd clucker -
Create and activate a virtual environment for Django:
python3 -m venv venv source venv/bin/activate -
Install required Python packages:
pip install -r requirements.txt
-
Create an empty database:
python manage.py migrate
-
Start the backend server:
python manage.py runserver
Access it at http://127.0.0.1:8000/
-
To access the admin portal, create a superuser:
python manage.py createsuperuser
Access the admin portal at http://127.0.0.1:8000/admin.
-
Navigate to the frontend directory:
cd frontend -
Ensure you have Node.js version 16.14.0 or above. If not, I recommend using nvm.
-
Install required Node.js modules:
npm install
-
Run the frontend in development mode:
npm run dev
Access it at http://localhost:3000/
-
Create an OAuth 2.0 Client in the Google Cloud Console. I recommend following this video for a simple walkthrough.
-
Create a
.envfile in the~/clucker/frontenddirectory with the following variables:GOOGLE_CLIENT_ID=YOUR_CLIENT_ID GOOGLE_CLIENT_SECRET=YOUR_CLIENT_SECRET NEXTAUTH_SECRET=CREATE_A_NEXT_AUTH_SECRET NEXTAUTH_URL=http://localhost:3000 DB_HOST=http://127.0.0.1:8000
-
Run the application again using:
npm run dev
You can now create an account and start Clucking!
- Backend refactor for streamlined syntax
- Cluck delete feature
- Reply feature implementation on frontend
- Backend migration to planetscale.com for free backend hosting
- I'm Owen. I'm a Software Developer and a Carleton Computer Science graduate. You reach me by email me at [email protected]
- Special thank you to Nina Tostevin for coming up with the name of the app and encouraging me to pursue this project.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent