Full Stack Habit Tracker App With React, Next Js, Tailwind CSS, and Mongo DB
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.
Info About This Video
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 |
More Videos