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/timetoprogram/e/242757 🕚 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 https://youtu.be/3Qr6ahVXrj4 Responsive Portfolio Website Using React JS https://youtu.be/yp6tRkS-QBU #reactjs #mernstack #reactjstutorial #mernproject Follow us on : Instagram: https://www.instagram.com/timetoprogram/ Facebook: https://www.facebook.com/TimetoProgram/ Pinterest: https://pinterest.com/TimeToProgram/ For more updates subscribe to your channel: https://www.youtube.com/channel/UCy6osK_bBJgvfeu8R1GGucw Please Like | Share | Subscribe for more such videos. Thank You.
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/timetoprogram/e/242757 🕚 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 https://youtu.be/3Qr6ahVXrj4 Responsive Portfolio Website Using React JS https://youtu.be/yp6tRkS-QBU #reactjs #mernstack #reactjstutorial #mernproject Follow us on : Instagram: https://www.instagram.com/timetoprogram/ Facebook: https://www.facebook.com/TimetoProgram/ Pinterest: https://pinterest.com/TimeToProgram/ For more updates subscribe to your channel: https://www.youtube.com/channel/UCy6osK_bBJgvfeu8R1GGucw Please Like | Share | Subscribe for more such videos. Thank You.