A lightweight Next.js Twitter clone with text-only tweets, follows, and profile customization.
π₯ Watch Walkthrough (Show tweet posting, comments, and profile updates)
- Text-Only Tweets: Post and delete your tweets (no media).
- Interactions: Like tweets, comment, and delete comments.
- Follow System: Follow/unfollow other users.
- Profile Customization:
- Update profile picture, cover photo, bio, and DOB.
- Future Improvements:
- Search functionality.
- User suggestions based on bio/keyword matching.
- Notifications:
- Simple notification is implemented for like/follow functionality.
- Frontend: Next.js, TailwindCSS
- Backend: Next.js API Routes
- Database: MongoDB (Prisma orm)
- Auth: NextAuth.js (JWT)
- State Management: Zustand
git clone https://github.com/hamxaShaukat/twitter-clone.git
cd twitter-clone
npm install
Create a .env
file in the root and add:
NEXTAUTH_JWT_SECRET="your_jwt_secret"
NEXTAUTH_SECRET="your_nextauth_secret"
DATABASE_URL="mongodb_connection_uri"
- NextAuth Secrets:
Generate via terminal:openssl rand -base64 32 # For NEXTAUTH_JWT_SECRET and NEXTAUTH_SECRET
- MongoDB URI:
Create a free cluster on MongoDB Atlas.
npm run dev
Open http://localhost:3000
in your browser.
- Search: Find users/tweets by keywords.
- Suggestions: Recommend users based on bio/activity.
- Notifications: Real-time like/comment alerts.
- Challenge: Real-time comment updates.
Solution: Used MongoDB change streams to refresh the UI. - Challenge: Follow system scalability.
Solution: Optimized DB queries with indexing.
MIT
Email: hamzashaukat714@gmail.com