A habit tracking application empowering users to build positive habits for a more fulfilling life.
- User-Centric Design: Intuitive UI for seamless habit tracking & positive user feedback.
- Data-Driven Insights: AI-powered advice & visualizations optimize habit formation.
- Personalized Experience: Tailored onboarding & motivation for sustained engagement.
- Modern Tech Stack: Next.js, React, Tailwind CSS, Firebase - scalable & maintainable.
- Personalized Onboarding: Guided setup for goals & habit definition.
- Habit Management: Easy addition, tracking, & management of habits.
- Consistency Heatmap: Visual progress overview for identifying trends.
- AI-Generated Advice: Personalized tips for habit improvement.
- Daily Motivation: Inspiring quotes to stay focused.
- Progress Tracking: Statistics & charts to visualize achievements.
- Customizable Reminders: Personalized reminders to stay on track.
- Dark Mode Support: Comfortable viewing experience.
- Frontend: Next.js 14 with React
- UI: Tailwind CSS with Framer Motion
- Backend: Firebase (Authentication, Firestore)
- State Management: React Context API
- Animation: Framer Motion
- Next.js: Performance (SSR), SEO, developer experience.
- Tailwind CSS: Rapid UI development, consistent styling.
- Firebase: Scalable backend, easy authentication & data storage.
- React Context API: Simple state management for this project's complexity.
- Framer Motion: Performant & declarative animations for enhanced UX.
- Challenge: Optimizing heatmap performance with many data points.
- Solution: Implemented virtualization to render only visible data, improving performance.
- Proficient in Next.js, React, Tailwind CSS, & Firebase.
- Strong understanding of user-centered design principles.
- Built a scalable & maintainable application with best practices.
- Utilized data-driven insights & AI for personalized UX.
- Addressed performance challenges through optimization.
- Implemented testing for reliability & code quality.
- Node.js 18.x+
- npm or yarn
- Firebase account
- Clone:
git clone https://github.com/UjjwalSharma01/Habitual.git && cd Habitual - Install:
npm install(oryarn install) - Env: Copy
.env.exampleto.env.local& fill Firebase details. - Run:
npm run dev(oryarn dev) - Open http://localhost:3000
- Homepage: https://habitual.ujjwalsharma.tech
- Next.js Docs: https://nextjs.org/docs
Deployed on Vercel for performance & scalability. Auto-deploys on main branch pushes.
Coming Soon