Habitzy

Habit Tracking Platform designed to build consistency.

Features • Quick Start • Contributing

✨ What is Habitzy?

Habitzy is a habit tracking platform designed to help users build consistency through gamification.

🎯 Features

• 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

🔃 Quick Start

Option A: Docker (Recommended)

# Development
docker compose -f docker-compose.dev.yml up --build

# Production
docker compose -f docker-compose.prod.yml up --build -d

Option B: Manual Deployment

1. Install Node.js (v18.x+) and MongoDB (v8.2.3+).
2. Execute:

# 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)

3. Set up environment variables by copying .example.env and renaming it to .env in both the ./frontend and ./backend folders

4. 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/

Useful links:

• 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

💻 Tech Stack

Frontend

• React
• React Router
• Chakra UI
• Pragmatic Drag and Drop
• Frimousse
• check-password-strength
• Lucide Icons
• @number-flow/react

Dev Depedencies

• rollup-plugin-visualizer

Backend

• Node.js
• Express.js
• MongoDB
• Mongoose
• cors
• dotenv
• bcrypt
• jsonwebtoken
• cookie-parser
• express-rate-limit
• nodemailer
• nodemon

DevOps & Infrastructure

• Docker
• GitHub Actions
• Nginx

🏭 Architecture Overview

Frontend (React)
      │
      ▼
API Calls (HTTP/REST)
      │
 ┌────┴────┐
 ▼         ▼
Express + Node.js Backend
      │
      ▼
MongoDB Database

🚀 Optimizations

• Improved performance using React.memo, useMemo, and useCallback for memoization.
• Indexed MongoDB queries to speed up data retrieval.
• Used React Context for simpler and lighter state management.

💪 Challenges Faced

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.

📝 Lessons Learned

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.

⚡ Planned Improvements

• Add optimistic UI updates

📁 Project Structure

  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

📍 Contributing

Pull requests are welcome.

For major changes, please open an issue first to discuss proposed improvements.

📄 License

This project is licensed under the MIT License – free for personal and commercial use.

See LICENSE for details.

Hosted for free on Cloudflare Pages.