Build & Deploy a Full-Stack Social Media App with MERN & Next.js 15
HTML-код
- Опубликовано: 9 фев 2025
- In this tutorial, you'll learn how to build and deploy a modern social media web app using the MERN stack (MongoDB, Express, React, Node.js) with Next.js 15. We'll cover authentication, CRUD operations, Redux for state management, and full deployment. Whether you're a beginner or an experienced developer, this step-by-step guide will help you master full-stack development.
💻 Tech Stack: MERN (MongoDB, Express, React, Node.js), Next.js 15, TypeScript, Redux, Tailwind CSS.
----------------------------------------------------------------------------------------------------------------------
❤️Get Full Source Code :
buymeacoffee.c...
-----------------------------------------------------------------------------------------------------------------------
🚀 Features of the Full-Stack Social Media App 🎯
✅ JWT Authentication 🔐 - Secure login & registration
✅ OTP Verification 📩 - Email-based security
✅ Password Reset 🔄 - Easy recovery system
✅ Beautiful Emails 💌 - Custom email templates
✅ Profile Update 📝 - Edit avatar & bio
✅ Posts 📝❌ - Create, delete, like & comment
✅ Follow/Unfollow 🔄 - Manage connections
✅ Save/Unsave Posts 📌 - Bookmark favorite posts
✅ Image Upload 🖼️ - Full media support
✅ Fully Responsive 📱💻 - Works on all devices
✅ Full Deployment 🚀 - Production-ready
🔥 This project delivers a complete social media experience with modern web technologies! 🚀
-------------------------------------------------------------------------------------------------------------
Timestamp :
00:00 Demo
16:35 Backend Setup
32:56 Database Connection
40:30 Error Handling
53:38 User Model
01:06:02 Auth Controller
01:25:05 Cookie Setup
01:32:48 Email Sending Functionality
01:56:50 IsAuthenticated Middleware
02:03:12 Auth Controller (Continued)
02:56:21 User Controller
03:04:33 Cloudinary Setup
03:15:25 User Controller (Continued)
03:38:42 Post Functionality
04:37:22 Frontend Setup + Basic Next.js
05:03:05 Signup Page
05:58:09 Redux Setup
06:19:30 Login Page
06:28:12 Verification Page
07:09:17 Forgot/Reset Page
07:41:44 Home Page (Left & Right Sidebar)
08:22:45 Profile Page
09:03:15 Edit Profile Page
09:41:37 Post Slice (Redux)
09:55:20 Create Post
10:33:52 Feed
11:38:40 Like Functionality
11:43:30 Save/Unsave Functionality
11:58:12 Comment Functionality
12:05:07 Follow/Unfollow
12:13:53 Delete Functionality
12:20:33 Deployment
------------------------------------------------------------------------------------------------------------------
✅ Learn Web Development with Skillshare ( 30 days free ): skillshare.eqc...
✅Learn Web Development with Coursera: imp.i384100.ne...
✅Namecheap's domain and hosting:namecheap.pxf....
-----------------------------------------------------------------------------------------------------------------------
🤝 For Paid Projects message us :
Sajal Talukder : / sajal-talukder
Rakibul Anas : / rakibulanas777
Facebook Page: / webdevwarriors
Instagram: / webdevwarriors
-----------------------------------------------------------------------------------------------------------------------
❤️ Support The Channel:
www.buymeacoff...
----------------------------------------------------------------------------------------------------------------------
Don't forget to check out our Popular Playlist :
✅MERN Stack WebApp Project : • MERN Stack WebApp
✅React Project: • React Website
✅Next JS Project: • Next JS Project
✅JavaScript Project: • JavaScript Project
-----------------------------------------------------------------------------------------------------------------------
#mernstack #nextjs15 #fullstack #typescript
![I.N "HALLUCINATION" | [Stray Kids : SKZ-PLAYER]](http://i.ytimg.com/vi/n5B5q1Hwt_U/mqdefault.jpg)
Great video as always thank for teaching ys
Glad you enjoyed it
This type of project ar helpful please make more projects
Thanks
keep supporting.. 💚
great working, bro
Thanks 🔥
Brother I don't have knowledge of next.js, will you create the project frontend to backend from scratch? I have good understanding of MERN
If you have good understanding of mern then you can understand the project here i discuss everything from start to finished step by step
Ok, thank you for your early reply
Are you using mvc model or services object model sir ?
Mvc
Brw can you make a marketplace project it would help a lot of us thanks for your video again
Thanks for the idea!
For some reason it is giving me a reference error saying signup is not defined when i debug, it says userRoutes.js:4, the line of code there is router.post('/signup', signup) just like you had placed it.. any fixes or advice from your end?
make sure you import signup controller in userRoutes
Nice bro.
but, can we reply comment and like?
No but after watching this video you will have the knowledge to implement more functionality on your own
For email providing which service you use
gmail
@WebDevWarriors for sending email eg nodemailer in backend part
yes in this project nodemailer is used and the service is GMail