Full Stack Project Manager App Using, React, Next Js, Mongo DB, Tailwind CSS

In this video, we will be building a full stack project manager App, using the latest technologies, react, tailwind css, next js, mongo db for storing our projects. Also we will be adding clerk for authentification.

👉 Source Code: https://ko-fi.com/s/5ee03607f9
👉 Source code of all my projects: https://ko-fi.com/devscript/shop
👉 Live Project: https://project-master-iota.vercel.app/
👉 Save your code snippets for FREE: https://www.snippetsaver.com/

——————-

Watch Full Stack AI Content Generator tutorial:
👉 https://www.youtube.com/watch?v=XHcgNi3Wg7g&t=216s

Watch Full Stack Task Management tutorial:
👉 https://www.youtube.com/watch?v=wGDjgpugarc

——————-

Chapters:

00:00:00 Demo of the project
00:07:46 Setting up the project
00:11:14 Creating the sidebar
00:15:58 Adding the header and the sub heading in the dashboard
00:25:38 Creating the project card list
00:34:11 Adding the right sidebar
00:41:05 Adding the header and the subheader in the all tasks page
00:48:34 Adding the tasks list
00:54:49 Making the all projects page responsive
01:02:04 Making all the tasks responsive
01:13:07 Creating the context API and open and close the sidebar
01:24:13 Closing the sidebar when the user clicks outise of it
01:30:09 Adding the menu selection and changing the pages
01:40:09 Creating the project window
01:47:44 Adding the validation to the project form using ZOD and react form
01:53:45 Adding the icon window
01:59:00 Adding the icon selection logic in the project window
02:05:28 Adding the projects data and adding the project in the array
02:18:41 Adjusting the project card
02:28:44 Adding the drop down to edit each project
02:36:47 Adding the confirmation window to delete the project
02:43:43 Deleting the project
02:47:47 Showing the empty screen when there’s no project
02:51:33 Handling the editing in the project window
02:56:39 Editing the project in the all projects array
03:01:41 Creating the sorting drop down
03:11:06 Creating the selection logic of the sorting drop down
03:15:46 Sorting all the projects
03:23:09 Updating the right side bar
03:29:15 Showing the empty screen at the right side bar
03:30:59 Move to the all tasks page when the user clicks on a project
03:36:11 Counting the on going tasks and the completed tasks
03:39:47 Switiching the tabs in all tasks page
03:44:36 Filetring tasks based on the clicked tab
03:48:38 Creating the all projects drop down
03:51:31 Opening and closing the projects drop down
03:55:16 Updating the tasks when the projects is clicked from the drop down
04:02:43 Creating the task form window
04:24:48 Adding a new task
04:32:58 Updating the task
04:43:48 Deleting the task
04:49:32 Updating the edit project function
04:51:01 Updating the status of the task when it is checked
04:54:57 Adding a new task from the the project card
04:59:57 Sorting all tasks

#ReactJS #TypeScript #TailwindCSS #MongoDB #CodingTutorial #WebDevelopment #FrontendDevelopment #BackendDevelopment #ResponsiveDesign #WebAppDevelopment #Programming #DevCommunity #CodeWithMe #LearnToCode #developerlife