Habits Tracker

A modern habit tracker built with Next.js and Tailwind CSS.

This app helps you stay on track with daily habits, visualize progress, and monitor streaks over time. The dashboard includes today's habits, streak summaries, progress metrics, and habit insights for weekly and monthly tracking.

Key Features

• Habit progress dashboard with cards for completed habits, current streak, success rate, and total active habits
• Today’s habits list showing completion state, progress, and daily habit details
• Habit streak tracking to visualize consistency and momentum
• Weekly and monthly insights for performance trends and progress over time
• Interactive habit table for reviewing habit details and status
• Responsive UI with a polished dashboard layout and dark mode-ready styling

Tech Stack

• Next.js 16
• React 19
• Tailwind CSS v4
• recharts for charts and visual insights
• lucide-react and react-icons for icons
• zod for schema validation
• sonner for toast notifications

Getting Started

1. Install dependencies

npm install

2. Start the development server

npm run dev

3. Open the app

Visit http://localhost:3000.

Available Scripts

• npm run dev — start the development server
• npm run build — build the production app
• npm run start — start the production server after build
• npm run lint — run ESLint

Project Structure

• app/ — Next.js app routes and layout
• app/dashboard/ — habit tracker dashboard pages and data
• components/ — reusable UI components, cards, and dashboard widgets
• components/ui/ — shared design system components
• hooks/ — custom hooks
• lib/ — utility helpers
• public/ — static assets

Notes

The current implementation uses static sample data for dashboard metrics and habits. Update the dashboard components and data sources to connect a backend, add persistence, or extend the habit tracking logic.