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..
The backend features secure JWT authentication, MongoDB for storing user data and travel stories, and APIs for adding, editing, deleting stories, and uploading images. This tutorial covers the entire development process, from setting up the frontend and backend to integrating APIs and building the UI components.
Get Source Code:
https://buymeacoffee.com/timetoprogra...
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
• Responsive Portfolio Website Using Re...
Build a Responsive Website Using React
• Build a Responsive Website Using Reac...
#reactjs #mernstack #reactjstutorial #mernproject
Follow us on :
Instagram: / timetoprogram
Facebook: /
Pinterest: /
For more updates subscribe to your channel:
/ @time-to-programyt
Please Like | Share | Subscribe for more such videos.
Thank You.
Смотрите видео Full Stack Travel Story App Using MERN Stack | MongoDB, Express, React, Node.js | MERN Project онлайн без регистрации, длительностью часов минут секунд в хорошем качестве. Это видео добавил пользователь Time To Program 15 Сентябрь 2024, не забудьте поделиться им ссылкой с друзьями и знакомыми, на нашем сайте его посмотрели 19,69 раз и оно понравилось 63 людям.