Vigyata.AI
Is this your channel?

Build and Deploy a Full Stack Social Media App using React js | MERN Stack Project 2025

116.1K views· 2,465 likes· 719:01· Jul 31, 2025

🛍️ Products Mentioned (10)

Learn How to make a full stack Social Media App using MERN Stack, Build and deploy a complete Social Media App in React JS 👉 Clerk: https://go.clerk.com/JL2SDmL 👉 Inngest: https://innge.st/yt-gs-3 👉 ImageKit: https://tinyurl.com/5hbj4ceh 👉 Live Preview: https://pingup-gs.vercel.app/ 👉 Source code & assets: https://greatstack.dev/p/pingup SUBSCRIBE: @GreatStackDev ------------------- 👉 ImageKit docs: https://tinyurl.com/tnybufw3 👉 Inngest YT Channel: https://www.youtube.com/@inngest In this step-by-step tutorial, we will walk you through the development and deployment of a fully functional Social Media Web Application using the MERN Stack (MongoDB, Express.js, React.js and Node.js) Key Features: User Authentication: Seamless and secure sign-in, sign-up and profile management powered by Clerk. Background Jobs: Efficient handling of background tasks and scheduled jobs using inngest. Media Storage & Optimization: Images will be stored and optimized using ImageKit, ensuring fast load times and high-quality delivery. Core Social Features: - Real-time chat and messaging - Post and feed system to share text or image-based content - Follow / Unfollow capabilities - Friend requests management - Story or status uploads - Search and discovery of new users This project is ideal for anyone looking to strengthen their full stack development skills with hands-on experience in real-world application architecture. #fullstack #mernstack #webdevelopment #socialmediaapp #fullstackproject #codingprojects #collegeprojects #greatstack #placement ------------------ Timestamps: 00:00 Project Overview 08:00 Create Basic React Project 19:00 Create Home page and Components 38:10 Clerk Auth Setup 48:50 Create Sidebar Page 01:15:20 Create feed Page 02:32:36 Create List Post 02:54:50 Create Recent Message Page 03:06:00 Create Message Page 03:16:50 Create Connection Page 03:38:14 Create Discover Page 03:59:18 Create Profile page 04:29:30 Create Post Page 04:47:00 Create Chat Page 05:05:00 Create Edit Profile Page 05:30:55 Create Backend Server 05:39:54 Connect MongoDB Database 05:53:34 INNGEST Webhook Setup 06:39:20 Connect ImageKit for image storage 09:34:10 Connect Backend and Fronted 11:40:10 Add Message Notification on Website 11:54:33 Deploy Project Online ------------------- Watch MERN Stack Grocery Delivery App tutorial: 👉 https://youtu.be/PaQX0pktLnw Watch MERN Stack Food Order Website tutorial: 👉 https://youtu.be/DBMPXJJfQEA Watch Full Stack Chat App tutorial: 👉 https://youtu.be/gbocZlm71nE Watch Full Stack Music Streaming Website 👉 https://youtu.be/KdGfhSpT6pc Watch Full Stack Blog Website Tutorial 👉 https://youtu.be/HdWCh_4XE1Q ------------------------------------- Build more React JS projects: Complete Portfolio Website In React: 👉 https://youtu.be/4ag1LsgIUc0 Build ChatGPT Clone In React: 👉 https://youtu.be/EzkWAviyYgg Build AI Image Generator with OpenAI In React 👉 https://youtu.be/PZG2MvOjud0 Create Weather App In React 👉 https://youtu.be/7JqdjWB88Kk ------------------------------------- Images Credit: https://www.pexels.com/ https://unsplash.com/ https://www.freepik.com/ ------------------------------------- Connect with me: 👉 https://linktr.ee/iamavinashkr Connect with GreatStack: Instagram: https://instagram.com/GreatStackDev Twitter: https://twitter.com/GreatStackDev Facebook: https://facebook.com/GreatStack

About This Video

In this video, I build and deploy a complete full stack social media website using the MERN stack (MongoDB, Express, React, Node.js). I start with a clean React project (Vite), set up Tailwind CSS, create the full page structure (Login, Feed, Messages, Chatbox, Connections, Discover, Profile, Create Post), and wire everything with React Router so the app feels like a real product. I also show you the exact UI flow: sign in/sign up, feed with stories and posts, profile editing, discover/search users, follow + send connection requests, and then real-time style chat once the request is accepted. For authentication and user management, I use Clerk because it gives me ready-to-use sign in/sign up components and supports multiple options like email, Google, and even multi-session (so you can add another account and switch without logging out). For background jobs and scheduling, I use Inngest to handle tasks like reminder emails for pending requests or unread messages. And for media uploads (profile pics, cover images, posts, stories, chat images), I use ImageKit because it stores and optimizes images/videos automatically for fast delivery. Finally, after building everything, I deploy the project online for free using Vercel so you can add it to your resume or even submit it as a college project.

Frequently Asked Questions

🎬 More from GreatStack