Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/fberrez/minihabits-web
🌱 A sleek and minimalist habit tracking web application built with React and TypeScript. Features intuitive habit management, streak tracking, beautiful heatmaps, and real-time statistics. Clean, modern, and user-friendly.
https://github.com/fberrez/minihabits-web
frontend habit-tracker heatmap jwt-authentication minimalist personal-development productivity react shadcn-ui statistics typescript vite web-app
Last synced: 1 day ago
JSON representation
🌱 A sleek and minimalist habit tracking web application built with React and TypeScript. Features intuitive habit management, streak tracking, beautiful heatmaps, and real-time statistics. Clean, modern, and user-friendly.
- Host: GitHub
- URL: https://github.com/fberrez/minihabits-web
- Owner: fberrez
- Created: 2025-01-09T13:26:30.000Z (17 days ago)
- Default Branch: main
- Last Pushed: 2025-01-23T20:35:12.000Z (3 days ago)
- Last Synced: 2025-01-23T21:28:16.153Z (3 days ago)
- Topics: frontend, habit-tracker, heatmap, jwt-authentication, minimalist, personal-development, productivity, react, shadcn-ui, statistics, typescript, vite, web-app
- Language: TypeScript
- Homepage: https://minihabits.fberrez.co
- Size: 215 KB
- Stars: 5
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# minihabits
A minimalist habit tracking application built with React that helps users build and maintain daily habits through simple, visual tracking.
## Features
- �� Track daily habits and tasks
- One-time tasks with deadlines
- Task descriptions and color coding
- Quick task completion with undo option
- ✨ Celebratory confetti animations for completed habits
- 📊 Detailed statistics and visualizations
- Current and longest streaks
- Monthly calendar view
- Yearly completion overview
- Monthly completion trends
- 🌙 Dark mode support
- 📱 Responsive design
- 🔒 User authentication
## Tech Stack
- **Frontend Framework**: React with TypeScript
- **Routing**: React Router
- **Styling**: Tailwind CSS
- **UI Components**: Shadcn/ui
- **Charts**: Recharts
- **Date Handling**: date-fns, moment
- **Calendar**: react-day-picker
- **Animations**: js-confetti
## Getting Started
```bash
git clone https://github.com/fberrez/minihabits-web.git
cd minihabits
pnpm install
pnpm run dev
```
API available at https://github.com/fberrez/minihabits
## Project Structure
```
src/
├── components/ # Reusable UI components
│ ├── habits/ # Habit-specific components
│ │ ├── task-habit-card.tsx
│ │ └── ...
├── contexts/ # React context providers
│ ├── AuthContext.tsx
│ └── HabitContext.tsx
├── pages/ # Main application pages
│ ├── HabitList.tsx
│ ├── NewTask.tsx
│ └── StatsPage.tsx
└── services/ # API service layer
└── habits.ts
```
## Contributing
Contributions are welcome! Please feel free to submit a Pull Request.
## License
This project is licensed under the MIT License - see the LICENSE file for details.