Build MERN Stack Projects: Beginner to Advanced Tutorials - Full Stack Travel Story App Using MERN Stack | MongoDB, Express, React, Node.js | MERN Project

In this video, we will build a Full Stack Travel Story App using the MERN stack (MongoDB, Express, React, Node.js). This app allows users to sign up, log in, and create personal travel stories with features like image uploads, and adding travel date. We also implement search functionality to find stories, filter by date range, and pin favorite stories to the top. Users can also edit or delete their stories.. Get Source Code: https://buymeacoffee.com/timetoprogram/e/304157 🔥 Complete Web Developer Bundle Includes 100+ React Components, 12 Full Stack Projects, 5 Cheat Sheets & 500+ Interview Q&As 👉 Get it here: https://buymeacoffee.com/timetoprogram/e/474148 Frontend React Project Setup 00:00 - Demo of Travel Story App 04:50 - Frontend React app setup 08:41 - Tailwind CSS setup 11:33 - react-router-dom installation & setup Backend 14:32 - Backend Node.js Express project setup 18:51 - MongoDB Atlas configuration 23:05 - Creating User schema 24:26 - Create Account API 31:10 - Login API 35:02 - Get User API and JWT token authentication 40:04 - Add Travel Story API 49:05 - Get All Travel Stories API 51:07 - Image Upload API using Multer 58:21 - Delete Image API 01:04:15 - Edit Travel Story API 01:09:53 - Delete Travel Story API 01:13:58 - Update isFavourite API 01:18:19 - Search Stories API 01:21:58 - Filter Stories by Date Range Frontend 01:26:12 - Login screen UI 01:42:28 - Login API integration 01:54:14 - Sign-up screen UI 01:57:29 - Create Account API integration 02:01:57 - Home page UI 02:04:55 - Get User Info API integration 02:08:00 - Navbar Profile Card 02:14:20 - Get All Stories API integration 02:17:07 - Travel Story Card component 02:26:30 - Function to update isFavourite 02:34:14 - Add/Edit Travel Story 02:47:12 - Date Selector component 02:58:34 - Custom Image Picker component 03:22:10 - Function to add new Travel Story 03:24:34 - Utility function to upload image 03:31:43 - View Travel Story popup modal 03:45:11 - Function to update story 03:51:20 - Function to delete Travel Story image 03:58:37 - Function to delete story 04:09:54 - Search Bar component 04:14:05 - Search Stories API integration 04:17:59 - Date Range Picker component 04:21:31 - Filter Travel Stories by date range 04:25:35 - Filter Info Title component Also, check out: Responsive Portfolio Website Using React JS and Tailwind CSS https://youtu.be/TYWQFSNY7Hg Build a Responsive Website Using React https://youtu.be/3Qr6ahVXrj4 #reactjs #mernstack #reactjstutorial #mernproject Follow us on : Instagram: https://www.instagram.com/timetoprogram/ Facebook: https://www.facebook.com/TimetoProgram/​ Pinterest: https://pinterest.com/TimeToProgram/​ For more updates subscribe to your channel: https://www.youtube.com/channel/UCy6osK_bBJgvfeu8R1GGucw Please Like | Share | Subscribe for more such videos. Thank You.