Habit Tracking Platform designed to build consistency.
Features • Quick Start • Contributing
Habitzy is a habit tracking platform designed to help users build consistency through gamification.
- Create, track, edit, and delete habits
- Monitor daily progress with streaks and leaderboards
- Easy to use drag-and-drop habits ordering
- Secure JWT authentication & authorization
- Manage profiles and customizable settings
- Dockerized deployment
# Development
docker compose -f docker-compose.dev.yml up --build
# Production
docker compose -f docker-compose.prod.yml up --build -d# Clone the repository
git clone https://github.com/DevHanza/habitzy.git
# Go to the repository folder
cd habitzy
# Install dependencies
(cd frontend && npm install) && (cd backend && npm install)-
Set up environment variables by copying
.example.envand renaming it to.envin both the./frontendand./backendfolders -
Start the application.
# Start the Frontend
cd ./frontend;
npm run dev;
# Start the Backend
cd ./backend;
npm run dev;
# For Production, refer to: https://www.frontendundefined.com/posts/tutorials/vite-production-build/- MongoDB Atlas: https://www.mongodb.com/cloud/atlas/register
- MongoDB connection string guide: https://www.mongodb.com/resources/products/fundamentals/mongodb-connection-string
- Brevo SMTP setup guide: https://help.brevo.com/hc/en-us/articles/7959631848850-Create-and-manage-your-SMTP-keys
- React
- React Router
- Chakra UI
- Pragmatic Drag and Drop
- Frimousse
- check-password-strength
- Lucide Icons
- @number-flow/react
- Node.js
- Express.js
- MongoDB
- Mongoose
- cors
- dotenv
- bcrypt
- jsonwebtoken
- cookie-parser
- express-rate-limit
- nodemailer
- nodemon
- Docker
- GitHub Actions
- Nginx
Frontend (React)
│
▼
API Calls (HTTP/REST)
│
┌────┴────┐
▼ ▼
Express + Node.js Backend
│
▼
MongoDB Database
- Improved performance using
React.memo,useMemo, anduseCallbackfor memoization. - Indexed MongoDB queries to speed up data retrieval.
- Used React Context for simpler and lighter state management.
Preventing unnecessary re-renders of all habit cards when updating a single card.
✅ Solved using `React.memo` and memoized callbacks.
Keeping drag-and-drop habit ordering synchronized between frontend state and backend.
✅ Solved with shared ordering utilities and optimistic state updates.
Ending user streaks automatically without depending on external schedulars or systems.
✅ Solved with date comparison logic + storing dailylogs of users in DB.
Sharing authentication state across multiple React contexts without circular re-render bugs.
✅ Solved by separating context responsibilities and memoizing provider values.
Creating a Docker setup that works for both development and production environments.
✅ Solved using separate Docker Compose configurations.
Building Habitzy helped me strengthen my understanding of:
- Managing authentication and backend communication using React Context.
- Practical use of React memoization techniques for performance optimization.
- JWT-based authentication and authorization workflows.
- Database indexing for improving query performance.
- Docker for both development and production deployment.
- Add optimistic UI updates
habitzy/
├── backend/
│ ├── Dockerfile
│ ├── package.json
│ ├── package-lock.json
│ └── src/
│ ├── index.js # App entry point
│ ├── server.js # Server bootstrap
│ ├── config/
│ │ └── db.js # MongoDB connection setup
│ ├── controllers/ # Business logic layer
│ ├── middleware/ # Request middlewares
│ ├── models/ # MongoDB schemas
│ ├── routes/ # API routes
│ └── utils/ # Helper functions
│
├── frontend/
│ ├── Dockerfile
│ ├── index.html
│ ├── vite.config.js
│ ├── nginx.conf
│ ├── package.json
│ ├── package-lock.json
│ ├── eslint.config.js
│ ├── jsconfig.json
│ ├── public/ # Static assets
│ ├── dist/ # Production build output
│ └── src/
│ ├── main.jsx # React entry point
│ ├── App.jsx # Root component
│ ├── routes.jsx # App routing
│ ├── index.css
│ ├── api/ # API layer
│ ├── assets/ # Images, animations, lottie files
│ ├── components/ # Reusable UI components
│ ├── context/ # Global state management
│ ├── hooks/ # Custom React hooks
│ ├── pages/ # App pages/routes
│ ├── services/ # Service layer (if used)
│ ├── theme/ # UI theme configuration
│ └── utils/ # Helper utilities
│
├── docker-compose.dev.yml
├── docker-compose.prod.yml
└── LICENSE
Pull requests are welcome.
For major changes, please open an issue first to discuss proposed improvements.
This project is licensed under the MIT License – free for personal and commercial use.
See LICENSE for details.
Hosted for free on Cloudflare Pages.