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.