Build a Social Media App With React, Nextjs, Tailwind, TypeScript, Redux, Firebase (Premium Course)
Learn how to work with me to get into your first coding job: https://asapfrontend.com
CHAPTERS:
00:00 Introduction to the Project
01:22 Features Overview
03:54 Tech Stack and Tailwind CSS Introduction
09:02 Setting Up the Project
10:59 Building the Sidebar
44:47 Creating the Post Feed
59:31 Setting Up Profile Picture
59:47 Creating Post Header
01:00:24 Styling Post Header
01:00:50 Adding Post Content
01:03:55 Implementing Responsiveness
01:08:19 Adding Post Icons
01:13:58 Building Widgets Tab
01:14:23 Creating Search Bar
01:16:58 Styling Trending Topics
01:22:13 Who to Follow Section
01:28:20 Finalizing Widgets Tab
01:32:30 Adding Signup Prompt
01:43:36 Building Modals with Material UI
01:52:09 Setting Up Redux Store
01:58:13 Creating the Modal Slice
01:58:41 Defining Modal States
01:59:26 Implementing Reducers for Modal Actions
02:00:28 Integrating Modal Slice with Redux Store
02:01:44 Using Redux State in Signup Modal Component
02:06:06 Styling the Signup Modal
02:20:19 Creating the Login Modal
02:23:39 Setting Up Firebase Authentication
02:24:45 Using Environment Variables for Firebase
02:30:58 Handling User Sign Up with Firebase
02:36:16 Syncing User State with Redux
02:51:23 Displaying User Info in Sidebar
02:58:25 Implementing User Sign Out
02:59:32 Resetting User Slice in Redux
03:00:07 Handling Client and Server Components
03:01:15 Implementing Sign Out Functionality
03:04:04 Updating User Profile with Firebase
03:11:45 Login Functionality
03:15:12 Guest Login Implementation
03:18:32 Styling User Info Component
03:20:51 Setting Up Firestore Database
03:22:24 Creating and Posting Data
03:29:28 Fetching and Displaying Posts
03:42:04 Building Comment Modal
04:03:32 Setting Up Comment Details
04:05:25 Displaying Comment Details in Modal
04:06:59 Sending a Reply
04:11:44 Creating Dynamic Routes
04:13:49 Styling the Dynamic Route Page
04:26:54 Fetching Post Data from Firebase
04:38:05 Implementing Like and Comment Functionality
04:46:53 Adding a Loading Screen
05:00:15 Deploying the App to Vercel
05:02:05 Final Touches and Conclusion
05:02:42 Outro Ends
Want to build a real-world full-stack social media app in 2025? In this free 5-hour coding project, you’ll learn how to create a complete Twitter-style app using React, Tailwind CSS, Firebase, Redux, and Material UI — all from scratch. Perfect for anyone serious about becoming a frontend developer or landing a six-figure web development job.
Follow along step-by-step as we build modern UI components, implement authentication, manage global state with Redux, use Firebase Firestore for real-time data, and deploy the project to Vercel. By the end of this video, you'll have a job-ready project to showcase in your portfolio.
OTHER SOCIALS
Instagram: https://www.instagram.com/imanwmusa/
TikTok: https://www.tiktok.com/@imanwmusa