Hellow guys, Welcome to my website, and you are watching Full Stack Habit Tracker App With React, Next Js, Tailwind CSS, and Mongo DB. and this vIdeo is uploaded by Dev Script at 2024-06-15T10:30:01-07:00. We are pramote this video only for entertainment and educational perpose only. So, I hop you like our website.
| Name | Full Stack Habit Tracker App With React, Next Js, Tailwind CSS, and Mongo DB |
| Video Uploader | Video From Dev Script |
| Upload Date | This Video Uploaded At 15-06-2024 17:30:01 |
| Video Discription | In this video, you will create a complete full stack habit tracker app from scratch! Using TypeScript, React, Tailwind CSS, Clerk for authentication, and MongoDB, we'll cover everything from complex UI components to responsive design and advanced functionality. Perfect for developers of all levels looking to enhance their skills and build a feature-rich, user-friendly app. Don't miss out! Live Project: https://habit-stacker.vercel.app/ Source Code: https://ko-fi.com/s/7d31c4a478 (Thank for your support) Source code of all my projects: https://ko-fi.com/devscript/shop Check out my FREE Code Snippets Tool to save your snippets: https://www.snippetsaver.com/ Chapters: 00:00:00 Demo of the project 00:09:39 The initial setup of the project 00:12:54 Setting up the Poppins font 00:14:24 Building the landing page 00:20:14 Setting up Clerk for authentication 00:28:15 Setting up MongoDB 00:31:30 Syncing Clerk User's Data with MongoDB 00:40:56 Building the Sidebar 01:01:33 Building the top bar in the All Habits section 01:22:40 Building the Habits Completed component 01:25:10 Fixing the Sidebar height 01:27:35 Creating the user profile 01:30:45 Creating the statistics component in the right sidebar 01:39:04 Adding the calendar component 01:43:27 Making slight changes to the right sidebar 01:45:13 Making All Habits responsive 01:50:10 Opening and closing the sidebar 02:00:27 Making the dark mode functional 02:05:23 Changing to dark colors 02:27:30 Creating the New Habit window 02:43:56 Creating the icon window 02:58:50 Adding the repeat function 03:08:37 Creating the "On These Days" component - Habit Window 03:18:37 Creating the frequency component - Habit Window 03:28:58 Creating the notification component - Habit Window 03:31:48 Building the Select Time component - Habit Window 04:09:45 Building the Areas component 04:22:02 Adding validation to the Habit Form 04:29:45 Adding the new habit in the app UI 04:48:17 Creating the Areas selection component 04:55:57 Filtering habits by area and current date 05:05:26 Creating the empty placeholder for habits 05:17:36 Making the habits added in the Habits Completed container 05:26:38 Building the drop-down menu 05:39:48 Creating the confirmation window to delete an item 05:46:29 Creating the selection logic of habits 05:57:58 Adding the delete function for the habit 06:22:17 Adding a habit in the database 06:35:08 Showing the data from the database 06:40:00 Deleting the habit from the database 06:42:50 Editing the habit in the database 06:51:33 Adding the notification system 06:53:04 Adding the top bar in the statistics page 06:56:12 Creating the statistics board component 07:03:56 Creating the statistics component for each habit 07:14:16 Creating the top bar of the Areas page 07:22:43 Creating the form modal to create an area 07:30:08 Adding a new area 07:37:41 Getting the data from the database 07:52:10 Editing an area #FullStackDevelopment #ReactJS #TypeScript #TailwindCSS #MongoDB #ClerkAuthentication #HabitTrackerApp #CodingTutorial #WebDevelopment #JavaScript #FrontendDevelopment #BackendDevelopment #ResponsiveDesign #DarkMode #WebAppDevelopment #Programming #DevCommunity #CodeWithMe #TechTutorial #LearnToCode #DeveloperLife |
| Category | Education |
| Tags | full stack app react | habit tracker app | full stak habit tracker | full stack application project | habit tracker application | habit tracker react app | habit tracker react js | habit tracker using react | habit tracker react native | next js project tutorial | full stack projects for beginners | react full stack project | full stack web developement | react project with source code | react js portoflio project | mern full stack developer project | habit tracker | dev script |
