Habit Tracker is a React + TypeScript application that helps you build and maintain daily habits effortlessly. With a clean UI powered by Material UI and Tailwind CSS, plus state management via Zustand, it’s designed for fast, responsive, and enjoyable habit tracking.
- 🆕 Add and manage daily habits easily
- 📋 View your habit list with intuitive UI components
- 🎨 Styled with Material UI and Tailwind CSS
- ⚡ Built for speed using Vite
- 🔒 Type-safe development with TypeScript
- 🔄 State management with Zustand for simple global state
- ⚛️ React 19
- 📝 TypeScript
- 🎨 Material UI
- 🧩 Zustand
- ⚡ Vite
- 🖌️ Tailwind CSS
- ✅ ESLint
Habit Tracker/
├── node_modules/ # Project dependencies
├── src/ # Source code
│ ├── Components/ # React components
│ │ ├── HabitForm.tsx # Form to add new habits
│ │ └── HabitList.tsx # Displays list of habits
│ ├── store/ # State management
│ │ └── store.ts # Centralized store logic
├── App.css # Global styles
├── App.tsx # Root app component
├── index.css # Base CSS styles
├── main.tsx # App entry point
├── vite-env.d.ts # Vite environment typings
├── eslint.config.js # ESLint configuration
├── index.html # HTML template
├── package.json # Project metadata and dependencies
├── package-lock.json # Locked dependency versions
├── tsconfig.app.json # TypeScript config for app
├── tsconfig.json # Base TypeScript config
├── tsconfig.node.json # TypeScript config for Node environment
├── vite.config.ts # Vite build configuration
└── README.md # Project documentation
- Node.js (v14+)
- npm or Yarn
1️⃣ Clone the Repository
git clone https://github.com/yourusername/habit-tracker.git
2️⃣ Navigate to the Project Directory
cd habit-tracker
3️⃣Install Dependencies
npm install
yarn install
4️⃣ Running Locally
npm run dev
yarn dev