Twitter Clone

The Twitter Clone is a full-stack social media application that replicates the core features of Twitter, including user authentication, tweet creation, timelines, and likes.

Live Site

Overview

The Twitter Clone is a full-stack social media application that replicates the core features of Twitter, including user authentication, tweet creation, timelines, and likes. Designed with modern frontend and backend technologies, the project focuses on delivering real-time interactions, secure user sessions, and a responsive UI that mimics the feel of an actual microblogging platform. Built with Next.js (App Router), Tailwind CSS, and Supabase as the backend, this clone provides a scalable, performant, and developer-friendly alternative for learning and showcasing real-world web development skills.

Project Goals

The primary goal of this project was to replicate the fundamental functionality of a Twitter-like platform while incorporating modern web development tools and practices. I wanted to explore user authentication and session management, relational database design for storing tweets and likes, and real-time updates using serverless functions. Additionally, the project was a platform to test out Supabase’s capabilities as a backend-as-a-service and to better understand Next.js 15's App Router architecture for building scalable and modular UIs.

Tech Stack

Next.js 15 (App Router) – For routing, SSR, dynamic metadata, and modular UI architecture.
Tailwind CSS – Used for building a clean, responsive, and accessible interface rapidly.
Supabase – Serves as the backend for authentication, PostgreSQL database, and real-time capabilities.
Supabase Auth – Handles email/password and OAuth-based authentication securely.
Framer Motion – Adds smooth animations to components like tweet cards, modals, and menu transitions.
Lucide React – Icon library used for clean and scalable vector icons.
Vercel – For hosting the frontend with fast global edge deployment and preview environments.

Features

User authentication with Supabase – Allows users to sign up, log in, and maintain session states securely using JWT tokens stored via Supabase Auth.
Tweet creation and timeline – Users can write tweets up to 280 characters which instantly show up on the global timeline. Tweets are stored in a relational Supabase database with real-time reactivity.
Like system – Users can like/unlike tweets, and each tweet displays its total like count with live feedback using atomic Supabase updates.
Responsive feed UI – The feed updates in real time as users post or interact, ensuring a dynamic and interactive experience.
Profile pages – Each user has a public profile page showing their tweets, bio (optional), and metadata.
Server-side rendered metadata – Tweet pages include SSR metadata for better SEO and sharing on platforms like Discord or Twitter.
Protected routes – Pages like tweet creation or profiles are guarded and only accessible if a user is authenticated.
Dark mode – A toggleable dark mode is implemented using Tailwind’s dark variant and persisted across sessions.

Challenges

One of the main challenges was implementing real-time updates using Supabase's subscription system, especially ensuring data consistency and performance across client sessions. Handling authentication flows across the new App Router architecture in Next.js 15 also required custom logic, particularly for client/server state sync. Building scalable and normalized database tables for tweets, users, and likes in Supabase while ensuring atomic updates was another learning curve. Moreover, optimizing the UI for both mobile and desktop users—while maintaining accessibility—required thoughtful Tailwind layout management. Lastly, integrating SSR with dynamic metadata for tweet detail pages (similar to Twitter cards) taught me more about server components and Next.js route segments.

Learnings and Takeaways

Through this Twitter Clone project, I gained deeper experience with full-stack development using Next.js and Supabase. I learned how to architect a relational database schema that supports scalable microblogging, and how to securely manage user sessions with Supabase Auth. The App Router in Next.js 15 enabled better modularization and understanding of layouts, nested routes, and dynamic metadata. Implementing real-time updates using Supabase’s real-time features gave me a clearer picture of building reactive applications without managing websockets manually. I also improved my frontend skills by designing responsive, accessible UIs with Tailwind, and adding polish through Framer Motion animations. This project provided a well-rounded challenge that mimics real-world SaaS development practices, and it stands as one of my most complete portfolio builds to date.