A modern habit tracking application built with Next.js, React, Redux Toolkit, and Material-UI. Track your daily and weekly habits, monitor your progress, and build consistent routines.
- Add Custom Habits: Create habits with daily or weekly frequency
- Track Progress: Mark habits as complete and track completion dates
- Streak Calculation: Automatically calculate current streaks for each habit
- Visual Progress: Progress bars showing streak progress (up to 30 days)
- Statistics Dashboard: View total habits and daily completion stats
- Responsive Design: Works seamlessly on desktop and mobile devices
- Modern UI: Clean interface built with Material-UI components
- Frontend Framework: Next.js 15.3.3 with React 19
- State Management: Redux Toolkit with React-Redux
- UI Library: Material-UI (MUI) v7
- Styling: Material-UI components with CSS modules
- Language: TypeScript
- Development: ESLint for code quality
- Node.js (version 18 or higher)
- npm, yarn, pnpm, or bun
- Clone the repository:
git clone <repository-url>
cd habits-tracker- Install dependencies:
npm install
# or
yarn install
# or
pnpm install- Run the development server:
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev- Open http://localhost:3000 in your browser to see the application.
- Enter a habit name in the "Habit Name" field
- Select frequency (Daily or Weekly)
- Click "Add Habit" to create your new habit
- Click "Mark Complete" to mark a habit as done for today
- The button will change to "Completed" and turn green
- Click again to unmark if needed
- Current streak is displayed for each habit
- Progress bar shows streak progress (target: 30 days)
- Stats section shows total habits and today's completions
- Use the "Delete" button to remove habits permanently
- Habits are automatically sorted and managed in the Redux store
src/
├── app/ # Next.js app directory
│ ├── globals.css # Global styles
│ ├── layout.tsx # Root layout component
│ └── page.tsx # Home page component
├── components/ # React components
│ ├── AddHabitForm.tsx # Form for adding new habits
│ ├── HabitList.tsx # Display and manage habits
│ └── HabitStats.tsx # Statistics dashboard
├── lib/
│ └── utils.ts # Utility functions (streak calculation)
└── store/ # Redux store configuration
├── slices/
│ └── habit.slice.ts # Habit state management
└── store.ts # Store configuration
The app calculates streaks based on consecutive completion dates:
- Daily habits: Expects completion every day
- Weekly habits: Expects completion every 7 days
- Streaks break if there are gaps longer than expected
Currently uses Redux state with sample data. The app includes:
- Mock API simulation with loading states
- Sample habits for demonstration
- Ready for backend integration
npm run dev- Start development server with Turbopacknpm run build- Build for productionnpm run start- Start production servernpm run lint- Run ESLint
- TypeScript for type safety
- ESLint configuration for Next.js
- Consistent component structure with React functional components
- Redux Toolkit for predictable state management
- Data persistence with local storage or database
- Habit categories and tags
- Calendar view for tracking
- Export/import functionality
- Habit templates
- Notifications and reminders
- Advanced analytics and charts
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add some amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
This project is open source and available under the MIT License.
If you encounter any issues or have questions, please open an issue on the repository.