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 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.
Смотрите видео Build a Full Stack Notes App using MERN | MongoDB, Express, React JS, Node JS онлайн без регистрации, длительностью часов минут секунд в хорошем качестве. Это видео добавил пользователь Time To Program 12 Апрель 2024, не забудьте поделиться им ссылкой с друзьями и знакомыми, на нашем сайте его посмотрели 87,901 раз и оно понравилось 1.7 тысяч людям.