Full Stack Travel Story App Using MERN Stack | MongoDB, Express, React, Node.js | MERN Project

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:

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

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

Build a Responsive Website Using React

#reactjs #mernstack #reactjstutorial #mernproject

Follow us on :

For more updates subscribe to your channel:

Please Like | Share | Subscribe for more such videos.
Thank You.

[yantech.]

Amazing work. Can add the following options
- Following / Followers
- Feed page that everyone can see others's story
- And much more...

Big thanks

[arbaz-u]

this Content is High label thanks for supporting when start New Mern project

[AvikNayak_]

Why don't you add voice? If you are going to make educational content you have to explain stuff otherwise the videos will not be much beneficial.

[JuddJulia-jr]

Robinson James Lee Larry Clark William

[MahmutAyabakan]

Martinez George Martinez Michelle Taylor Jessica