Build & Deploy a Fullstack Twitter/X Clone | React, Next.js 15, Tailwind v4, TypeScript & Supabase

🚀 In this tutorial, you’ll learn how to build and deploy a fullstack Twitter/X clone from scratch using React, Next.js 15, Tailwind CSS v4, TypeScript, Supabase, and React Query.

We’ll cover everything step by step:
✅ Setting up authentication with Supabase
✅ Creating and fetching tweets (with text & images)
✅ User profiles and avatar uploads
✅ Comments, likes, and delete functionality
✅ Data fetching & caching with React Query
✅ Responsive UI with Tailwind v4
✅ Deploying your fullstack app live on Vercel

By the end of this video, you’ll have a fully functional social media clone and the skills to create modern fullstack applications. Perfect for anyone looking to level up in Next.js, Supabase, React Query, and TypeScript.


💻 Source Code: https://github.com/egbontech/twitter-...
📁 Assets: [https://drive.google.com/file/d/1v8ZT...]

Chapters
00:00 - Intro
00:35 - Project Overview
05:20 - Setup Breakdown
08:32 - Creating Custom Colors for TailwindCSS
08:55 - Creating the Signin Page UI
20:05 - Creating the Home Directory Layout
26:00 - Creating the Leftsidebar UI
37:40 - Creating the Rightsidebar UI
47:00 - Creating the Homepage UI
1:25:50 - Creating the Postview Page
1:40:00 - Setting up Supabase
1:45:17 - Implementing Authetication and User Profiles
3:14:45 - Implementing Create Tweets and Delete Tweets Functionality
4:42:10 - Implementing Create Comments and Delete Comments Functionality
5:31:21 - Implementing Tweet Likes Functionality
6:11:35 - Implementing a Custom Loading Spinner
6:18:10 - Running Lint Checks
6:20:30 - Pushing Repo to Github
6:21:52 - Quick Update before Deployment
6:23:29 - Deploying on Vercel
6:29:00 - Outro

💡 Don’t forget to like 👍, subscribe 🔔, and drop a comment if you found this helpful!