Build a Full-Stack MERN Task Manager | React, Node.js, MongoDB, Express | MERN Project

In this video, we’ll build a fully responsive Task Manager App using the MERN (MongoDB, Express, React, Node.js) stack! This app allows users to manage tasks efficiently with an intuitive interface, create, update, and track tasks with due dates and priorities, automated status updates, and assign tasks to multiple users and track completion etc. Get Source Code: https://buymeacoffee.com/timetoprogram/e/390598 Functionalities Implemented: 1. User Dashboard – View assigned tasks, track progress, and get task insights. 2. Task Management – Create, update, and track tasks with due dates and priorities. 3. Automated Status Updates – Task status changes automatically based on the checklist. 4. Team Collaboration – Assign tasks to multiple users and track completion. 5. Priority & Progress Tracking – Categorize tasks by priority and monitor completion levels. 6. Task Report Downloads – Export task data for analysis and tracking. 7. Attachments Support – Add and access task-related file links easily. 8. Mobile Responsive UI – Seamless experience on desktop, tablet, and mobile. Frontend 00:00 - Demo of Task Manager App 11:30 - Setting Up React App 13:46 - Tailwind CSS v4 Setup 17:02 - Creating Required Files and Folders 18:36 - Defining App Routes Backend 24:01 - Backend Project Setup 28:33 - Configuring MongoDB 31:13 - Defining User MongoDB Schema 32:03 - Defining Task MongoDB Schema 33:39 - Creating Authentication APIs (Login, Sign-Up, Get User Info, Profile Image Upload) 52:21 - Creating User Management APIs (Get All Users and Get a Specific User Details) 59:14 - Creating Task Management APIs (Get All Tasks, Create Task, Update Task, Update Task Status, etc ) 01:27:23 - Creating Report Generation APIs Frontend (Continued) 01:36:34 - Building the Login Form UI 01:49:27 - Building the Sign-Up Form UI 01:58:56 - Defining API Paths 01:59:33 - Creating Axios Instance 02:01:28 - Integrating Login API 02:11:10 - Integrating Sign-Up API Dashboard Page 02:19:38 - Creating the Dashboard Page Layout 02:28:57 - API Call to Fetch Dashboard Data 02:31:00 - Creating Summary Section 02:38:09 - Creating Recent Tasks Section 02:45:33 - Creating Task Distribution Section (Pie Chart) 02:53:22 - Creating Task Priority Levels Section (Bar Chart) Create Task Page 02:57:39 - Building Create Task Form 03:33:44 - Validating Create Task Form 03:35:48 - Integrating Create Task API Manage Tasks Page 03:41:13 - API Call to Get All Tasks 03:48:30 - Creating Tab Filters 03:53:22 - Displaying Task Cards in a Grid Update Task Page 04:03:24 - Calling Get Task Details By Task ID API 04:05:31 - Integrating Update Task API 04:08:26 - Integrating Delete Task API Manage Users Page 04:12:51 - Calling Get All User Details API 04:15:12 - User Card UI Report Download 04:19:47 - Download All Users Task Report 04:21:27 - Download Detailed Task Report User Dashboard 04:25:58 - User Dashboard with Summary Card and Charts 04:28:45 - My Tasks Page UI 04:31:32 - View Task Details Page 04:47:45 - API Call to Update Task Status and Todo Checklist Also, check out: MERN Expense Tracker App https://youtu.be/PQnbtnsYUho Responsive Portfolio Website with React & Tailwind CSS https://youtu.be/l9W8utzrZTM #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.