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.
➡ 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
- 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.
- 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
⮕ 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.
- Google Fonts (Poppins and Roboto fonts provider)
Distributed under the MIT License.