Twitter Clone (Full-stack Next.js 13+)

Introducing a comprehensive clone of Twitter, with a familiar interface and a range of essential features.

Created with Next.js 13+, Supabase and PostgreSQL. Deployed on Vercel.

⮕ Live preview

➡ FYI: Supabase updated their DB settings recently (January 2024), so environment variables from examples may look different when you try it out.

Secret key for Twitter Blue: thanksforcaring

Features

Profiles: Users can create their own profiles, add a profile picture, and customize their bio to express their personality and interests.
Tweets and Replies: Just like Twitter, users can compose and share tweets of up to a certain character limit, allowing them to share their thoughts, ideas, or any other content with their followers.
Following/Followers: Users can follow other users to see their tweets on their timeline and gain followers who are interested in their content.
Likes/Retweets: Users can engage with tweets by liking them to show appreciation or retweeting them to share them with their own followers. Also undo retweets and unlike support.
Notifications: Users receive notifications when someone likes or retweets their tweets, when they gain new followers, or when they are mentioned in a post by another user.
Search: Users can search for specific tweets or accounts to find relevant content or connect with specific users.
Direct Messaging: Users can send private messages to other users, allowing for one-on-one conversations and interactions.
Twitter Blue: Users can get premium status by entering a secret code, getting an icon with their name.
Emoji Support: Users can easily add emojis to their tweets and replies, enhancing expression and engagement.
User Authentication and Security: Custom user authentication with hooks, bcrypt, JWT. Access control, ensuring secure login and protected user data.
Real-time Data Fetching: Implement real-time updates with react-query, allowing users to see new tweets, likes, and retweets without manually refreshing the page.
Image Support: Users can upload images with their tweets, replies, profile and header pictures and direct messages, enhancing visual content sharing.
Infinite Scroll: Infinite scrolling, providing a seamless browsing experience for users as they explore their timeline.
Date and Time Formatting: Formatting timestamps and display them in a user-friendly manner, such as relative time (e.g., "5 minutes ago").
Deleting: Users can delete their own tweets, replies and retweets. Also unlike tweets.
Dark and Light mode.
Optimistic updates on likes, retweets, followings and so on.
Full-Stack Next.js (13+) App directory advantages.
Responsive design.

Helper Dependencies

Prisma for database access and manipulation.
Supabase JS Client for interacting with the storage.
Material UI production ready components UI library.
TypeScript for types.
React Query hooks and utilities for data fetching and state management.
Emoji Mart for Emoji picker and rendering components in React.
Bcrypt password hashing and encryption functionality.
Date-fns utility functions for date manipulation and formatting.
Framer Motion animation components and utilities.
Formik form management utilities.
Yup for form validation schemas.
React Dropzone drag-and-drop file upload component for React.
react-icons collection of customizable icons.
react-infinite-scroll-component for infinite scrolling.
Jose for handling JWTs.
Eslint for linting.
Prettier for formatting.
Sass for SCSS

Roadmap

⮕ You can access the complete progression of development from changelog.md file.

Only verified blue tick user should show in the who to follow section.
Add block/unblock feature.
Add hidden/locked profile.
Find out how to infinite load for every page / extract usememo to the different component? because can't conditionaly render.
Find a better way of optimistic messages other than faking it, refactor whole messaging system.
Add Turkish language support.
Multiple test accounts when onclick test login, test account goes to random.
Email / sms verification just for the fun.