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

Published: 12 April 2024
on channel: Time To Program

185,680

3.2k

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

🔥 Complete Web Developer Bundle
Includes 100+ React Components, 12 Full Stack Projects, 5 Cheat Sheets & 500+ Interview Q&As
👉 Get it here: https://buymeacoffee.com/timetoprogra...

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

On this page of the site you can watch the video online Build a Full Stack Notes App using MERN | MongoDB, Express, React JS, Node JS with a duration of hours minute second in good quality, which was uploaded by the user Time To Program 12 April 2024, share the link with friends and acquaintances, this video has already been watched 185,680 times on youtube and it was liked by 3.2 thousand viewers. Enjoy your viewing!

1,572