#3. Image Picker & Profile API's | Building a full stack Wedding Planner App using MERN Stack
In this video, we build and deploy a Full-Stack Wedding Planner using the MERN Stack 🚀. We leverage Next.js for a modern frontend, Nest.js for a scalable backend, and MongoDB for data management. This project includes role-based authentication, blogging features, and vendor services, making it a complete platform for planning and managing weddings efficiently. Whether you're a beginner or an experienced developer, this tutorial will guide you through building a production-ready application step by step. 🔥
✋ Stay connected:
Instagram: / codewithkrishna___
🧑💻 Source Code :
https://github.com/Krishna-sm/wedding...
👉 Key Features Covered:
✅ Full-Stack MERN Wedding Planner App Development
✅ React.js for Frontend UI
✅ Role Based Authentication
✅ Nest.js for Backend API
✅ MongoDB as a Database
✅ JWT Authentication (Login, Signup, Protected Routes)
✅ React Markdown Editor for Writing & Formatting Blogs
✅ Cloudinary For Image Uploading
✅ Context API for Global State Management
✅ Deployment on a Free Server (Render & Vercel)
📖 TABLE OF CONTENT
00:00 Intro
00:10 Fix Sidebar Collapse Error
03:45 Protected Routes
06:00 Profile Page UI
12:00 Image Picker
13:58 Profile Form Validation (Formik Yup)
16:00 Build Basic Profile Form
21:20 React Select (ShadCN Select)
25:00 ShadCN TextArea
28:00 React Drop zone
32:25 Integrate Cloudinary in Nest JS
33:10 Create Update Profile Avatar API
38:20 Upload Files using Multer & Cloudinary
40:00 Integrate Update Profile Avatar API
50:00 Outro
Other Popular Videos:
► MongoDB : • How to Create and Connect MongoDB Atl...
► Next JS : • Next Js 14 Complete Full Stack Authe...
► Redux : • Next.js 14 Tutorial: Learn Redux With...
► Inventory Management System : • React Inventory Management System | M...
► Installation of Rust : • How to install Rust in Windows | Rus...
► MERN stack : • MERN Tutorial: Complete MERN Stack | ...
► NEST JS : • Nest JS Complete Tutorial With Projects
► MEVN Stack : • #1 Setup of MEVN Stack | #vue js Proj...
#Nextjs #ReactJS #NestJS #NodeJS #MongoDB #FullStackDevelopment #MERNStack #WebDevelopment #WeddingPlannerApp #BloggingPlatform #VendorServices #RoleBasedAuthentication #JWTAuthentication #SEO #APIDevelopment #FrontendDevelopment #BackendDevelopment #WebApp #TechTutorial #FullStackProject #CodeWithMe
check my Website (https://https://codewithkrishna.vercel.app)
i am creating with next js 14 with node js, express js
subscribe my channel
