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/
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
Auf dieser Seite können Sie das Online-Video Full Stack Project Manager App Using, React, Next Js, Mongo DB, Tailwind CSS mit der Dauer stunde minuten sekunde in guter Qualität ansehen, das der Benutzer Dev Script 07 September 2024 hochgeladen hat, den Link mit Freunden und Bekannten teilen, dieses Video wurde auf Youtube bereits 20,048 Mal angesehen und es wurde von 952 den Zuschauern gefallen. Viel Spaß beim Betrachtenden Zuschauern gefallen!
