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

Published: 12 April 2024
on channel: Time To Program

87,901

1.7k

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 Reac...

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

#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.

Watch video Build a Full Stack Notes App using MERN | MongoDB, Express, React JS, Node JS online without registration, duration hours minute second in high quality. This video was added by user Time To Program 12 April 2024, don't forget to share it with your friends and acquaintances, it has been viewed on our site 87,90 once and liked it 1.7 thousand people.