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
Смотрите видео Full Stack Task Manager App with React, Next Js and MongoDB онлайн без регистрации, длительностью часов минут секунд в хорошем качестве. Это видео добавил пользователь Dev Script 21 Май 2024, не забудьте поделиться им ссылкой с друзьями и знакомыми, на нашем сайте его посмотрели 29,604 раз и оно понравилось 1.2 тысяч людям.