Full Stack Habit Tracker App With React, Next Js, Tailwind CSS, and Mongo DB

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!

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

[rakzfn]

Can i still do this project without using al those context providers? For example, you used context provider to decide which menu item is active, i can still do that in nextjs by checking the href of the current window, right?

[rahulchourasiya]

Can you please make a video for single sign on, like centralised authentication website using next-auth, without any workos or any paid library for multiple saas website

[Doma]

is this video full tutorial for this code ? and you explain everything or not . and thank you

[jhonsnow]

nice i want to add more chart using chart js can you guide me ho to do this ?\

[saber]

8 hrs of just explanation? I was excited for this course now im disappointed and on top of that the source code is not even free 👏 👏

[jhonsnow]

and username its showing ALI insted of user 's name how to change ?

[antwarior]

noone wants to use clerk for their projects 🤦 i wish clerk would stop infiltrating tutorials to sell their products when people on tutorials has no money and is the whole reason their watching tutorials to build their own apps to make money, not spending it on clerk fresh out the box on their very first projects!!!! 🤦

[Musictechy]

can i get ur social media or github account bro, you are such a good and talented Full Stack man, lots of love from India❤❤