Full Stack Task Manager App with React, Next Js and MongoDB

In this comprehensive tutorial, we'll building a responsive full stack task manager app using cutting-edge technologies like Next.js, React, Tailwind CSS, Clerk, TypeScript, and MongoDB. Access to the source code: Show support for my work : https://ko-fi.com/s/65b811976c Thank you! 🙏 Check out my FREE Code Snippets Tool to save your snippets: https://www.snippetsaver.com/ Whether you're a seasoned developer looking to expand your skill set or a beginner eager to dive into the world of full stack development, this tutorial has something for you. Throughout the video, we'll cover a wide range of topics, including: Building an interactive dashboard Creating more complex UI components with React to enhance user experience. Building a responsive sidebar that adapts seamlessly to different screen sizes. Implementing a live and categorized sidebar for easy navigation. Utilizing the Recharts library to create stunning and interactive bar charts for visualizing task data. Implementing sorting functionality for tasks based on name, priority, and status. Exploring various strategies for categorizing projects to better organize your tasks. Chapters: 00:00:00 Introduction 00:16:13 Setting up the poppins font 00:18:16 Creating the sidebar 00:36:02 Creating the dashboard top bar 00:41:52 Creating statistics in the dashboard 00:48:01 Creating the overall Progress 00:51:21 Creating the latest Projects in the dashboard 00:54:14 Creating the chart Bar 01:00:23 Creating the recent tasks 01:04:23 Making the sideBar responsive 01:15:03 Making the dashboard fully responsive 01:33:07 Creating the empty Placeholders for tasks and projects 01:38:36 Changing the side bar selection 01:43:44 Creating the projects top bar 01:45:04 Adding the icon bar to open the sidebar 01:47:34 Adding the dark mode colors for the projects area 01:48:56 Adding the project cards 02:01:10 Creating a window to add a new project 02:12:51 Making the project window responsive 02:13:46 Creating the window to choose the icon 02:22:33 Creating the drop down menu 02:37:27 Building the project window 02:48:41 Adding all tasks card 02:56:28 Building the window to add a task 03:04:24 Start working the category section 03:07:54 Creating the sorting component 03:18:08 Creating the add window for categories 03:24:01 Creating the data structure 03:33:21 Showing the data inside the project card 03:40:46 Showing the data inside the categories card 03:48:11 Adding a new project in the projects section 04:08:38 Creating the no category element 04:10:43 Creating the add category window 04:16:38 Creating the confirmation window to delete an item 04:35:14 Deleting a single category 04:43:54 Editing the project 04:57:23 Editing a category 05:06:37 Updating the project (part 2) 05:14:10 Adding a new task 05:18:24 Editing or remove a task 05:44:34 Working the sorting function of tasks 06:09:10 Creating an empty placeholder for projects 06:12:32 Adjusting the latest projects component 06:20:24 Adding the empty placeholder for tasks 06:22:12 Adding the loading spinner in the project window 06:25:15 Adjusting the latest projects component (part 2) 06:29:06 Adjusting the recent tasks component in the dashboard 06:34:41 Removing the add task button when there's no tasks yet 06:35:26 Adjusting the recent tasks component in the dashboard (part 2) 06:36:54 Adding the pagination to the projects area 06:42:36 Working on the chart bar in the dashboard 07:02:33 Adjusting the overall Progress component 07:05:08 Creating the live search bar 07:22:06 Accessing to projects and tasks through dashboard 07:39:45 Creating the landing page 07:42:06 Setting up Clerk for authentication 07:51:14 Setting up MongoDB for the database 07:54:34 Adding the users from Clerk to the database 08:04:55 Adding projects to MongoDB 08:08:26 Extract projects from the database and show them in the client 08:14:34 Adding and extracting the categories from MongoDB 08:19:36 Adding the myTasksDone object into the database 08:38:50 Adding and deleting projects from the database 08:43:35 Updating the projects from the database 08:47:02 Adding tasks into the database 08:52:56 Deleting tasks from the database 08:55:31 Updating the task from the database 08:59:26 Creating categories in the database 09:06:16 Deleting a category from the database 09:10:14 Updating the all tasks done collection