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
Смотрите видео Full Stack Project Manager App Using, React, Next Js, Mongo DB, Tailwind CSS онлайн без регистрации, длительностью часов минут секунд в хорошем качестве. Это видео добавил пользователь Dev Script 07 Сентябрь 2024, не забудьте поделиться им ссылкой с друзьями и знакомыми, на нашем сайте его посмотрели 20,04 раз и оно понравилось 95 людям.