A Twitter clone built from scratch with Next.js + TypeScript.
Deployed on flocker.top
- Authentication: Users can sign up, log in, and log out securely using credentials (username/password) or Google sign-in. Forgot password and email verification flows are also implemented for enhanced security. Emails are sent using Resend. 🛡️📧
- Tweeting and Replying with Images: Users can create new tweets and replies, including the option to upload an image. Images are uploaded through Cloudinary for seamless integration. 🖼️
- Interactions: Users can also retweet, like, and bookmark tweets. Likes can also be applied to replies. Additionally, users can follow other users to stay updated with their tweets. ❤️🔁🔖
- Hashtags: Tweets can contain hashtags, which allow users to categorize and discover content easily by adding relevant keywords or phrases to their posts. Users can click on a hashtag to view all tweets containing it. 🔖
- Personalized Profile Page: Every user has a personalized profile page with the option to add an avatar, cover image, and a bio section. ✅
- Real-time Updates: Real-time updates are achieved through Server-Sent Events (SSE) and Redis Publish/Subscribe, providing instant notifications for interactions such as tweeting, retweeting, liking, and following. 🔄⚡
- Form Validation: Zod is used for validating form input both client-side and server-side, providing robust validation for improved user experience and security. ✅
- Rate Limiting: Interactions are rate-limited, ensuring that users cannot excessively perform actions like tweeting, retweeting, or liking within a short period of time. 🕒
- Infinite Scroll: All feeds feature infinite scrolling, implemented with cursor-based pagination, providing a seamless browsing experience for users as they explore tweets, replies, or users. 🔄📜
- Responsive design: Built with Tailwind CSS, the application is responsive and works well on various screen sizes.
- Light and Dark Theme: Users can switch between light and dark themes according to their preferences for a personalized user experience. 🌞🌚
- Dockerized Development + Hot Reload: The project is "dockerized" for local development, with Redis and Postgres instances included, ensuring consistency across different environments. Migrations and seeds are applied on startup. 🐳
- Configured for Unit Testing: Bun test runner and React Testing Library are used for writing unit tests (example tests included).
- Sensible Linting and Formatting: The project comes pre-configured with sensible ESLint and Prettier defaults out of the box, ensuring code quality and consistency. ✨🧹
- TypeScript: A statically typed superset of JavaScript.
- Next.js + App Router: A React framework for server-side rendering, static site generation, and more.
- Auth.js: A library for user authentication.
- Tailwind CSS: A utility-first CSS framework for quickly building custom designs.
- Kysely: A TypeScript-first SQL query builder.
- Resend: A lightweight HTTP client for making API requests and sending emails.
- Redis: An in-memory data structure store used for caching real-time updates.
- Postgres: A powerful, open-source relational database system.
- Docker: A platform for developing, shipping, and running applications using containerization.
- Cloudinary: A cloud-based image and video management service for uploading, storing, and manipulating media assets.
- SSE (Server-Sent Events): A standard allowing servers to push updates to web clients over HTTP.
- Zod: A TypeScript-first schema declaration and validation library.
- Bun: A fast all-in-one JavaScript runtime. Bun is used for installing dependencies, running unit tests, and production builds.
- React Testing Library: A light-weight solution for testing React components and hooks.
- GitHub Actions: GitHub's CI/CD solution.
- Render: Production build is deployed to Render.com via a manually triggered GitHub Workflow.
Prerequisites: Docker
To get started with this project, follow these steps:
- Clone the repository:
git clone https://github.com/chulev/flocker.git
- Navigate to the project directory:
cd flocker
-
Create a
.env.localfile based on the.env.examplefile. -
Start the local development environment:
docker-compose up -d
-
Open your browser and navigate to
http://localhost:3000to view the application. -
Use your favorite editor to make changes and see them apply instantly!
This project is licensed under the MIT License. 📝🎉