Build a Full Stack Notes App using MERN | MongoDB, Express, React JS, Node JS

In this video, we will build a Full Stack Notes App using MERN (MongoDB, Express, React JS, Node JS). Our Notes App contains functionalities like Authentication (Login & Sign Up), Adding/Edit Notes, Pin important notes to the top, and searching through the notes.

Get Source Code:
https://www.buymeacoffee.com/timetopr...

🕚 Timestamps:

Frontend React Project Setup

00:00 Demo of Notes App
03:12 Frontend React app setup
05:38 Tailwind CSS setup
07:35 react-router-dom installation & setup

Creating UI

09:48 Login screen UI
14:15 Password Input component
22:02 Sign Up page UI
27:20 Navbar Profile Card
31:42 Search Bar component
36:25 Creating Note Card
43:47 Add/Edit note popup
49:38 Tag Input component

Backend

01:03:28 Backend node express.js project setup
01:06:50 MongoDB Atlas config
01:09:41 jwt token authentication util function
01:10:44 Creating User Schema
01:12:00 mongoDB connection
01:13:43 Create account API
01:19:09 Login API
01:22:47 Add New Note API
01:28:31 Edit Note API
01:33:23 Get All Notes API
01:35:08 Delete Note API
01:38:39 Pin Notes API
01:43:19 Get User API

Frontend API Integration

01:47:04 Get axios instance util function
01:49:10 Login API integration
01:54:02 Get User API integration
01:57:36 Create account API integration
02:01:02 All Notes API integration
02:07:24 Add New Note API integration
02:12:19 Edit Note API integration
02:14:44 Creating Toast Message Component
02:25:01 Delete Note API integration
02:28:00 Empty Card, If No Notes

02:31:48 Creating Search API
02:36:13 Search API integration

02:40:52 Pin Note API integration

Also, check out:
Build a Responsive Website Using React
   • Build a Responsive Website Using React JS ...  

Responsive Portfolio Website Using React JS
   • Build a Responsive Portfolio Website Using...  

#reactjs #mernstack #reactjstutorial #mernproject

Follow us on :
Instagram:   / timetoprogram  
Facebook:   / ​  
Pinterest:   / ​  

For more updates subscribe to your channel:
   / @timetoprogram-yt  

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