Habit Tracker

A platform to help users build and maintain positive habits. Users can sign up, track their daily routines, and monitor progress over time.

Features

• Manage Habits – Add, edit, delete, and mark daily habits as done with a simple and intuitive workflow.
• Progress Visualization – View your habit streaks, completion history, and overall progress at a glance.
• User-friendly Interface – Instant updates, modern UI, single-page application (SPA) feel, and intuitive drag-and-drop functionality.
• Sync Across Devices – Keep your progress consistent across multiple devices with secure cloud storage.
• Authentication – Sign up, log in, and stay secure with JWT-based authentication and session management.
• Responsive Design – Works seamlessly on desktop, tablet, and mobile devices.
• Customizable Settings – Personalize your experience with app preferences, profile settings, and theme options.
• User Leaderboard – Compete with others and track top streaks to foster a habit-building community.

How to run locally?

🔻 Prerequisites

• Node.js (v18.x+ recommended)
• MongoDB (v8.2.3+ recommended)

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

🔻 Setup Frontend

Configure .env file

Rename .env.example to .env, then fill in the required values. Most of the variables are self-explanatory and can be understood by reading the .env file.

Run

# Install frontend dependencies
cd frontend
npm install

# Start the dev server
npm run dev

For production deployment instructions, please read here.

🔻 Setup Backend

Configure .env file

Rename .env.example to .env, then fill in the required values.

Most of the variables are self-explanatory and can be understood by reading the .env file. Below are instructions for obtaining only the values that may need additional setup.

🔹 MongoDB Connection String - MONGO_URI

You can get this by setting up MongoDB locally or by creating a Free MongoDB account. For more information, read here.

🔹 JWT Token Secrets - ACCESS_TOKEN_SECRET, REFRESH_TOKEN_SECRET

You can use any value for these secrets. However, it is recommended to generate a strong and secure random value.

You can generate one using Node.js with the following steps:

// Run `node` in your terminal, then paste this:
require("crypto").randomBytes(64).toString("hex");

// Example output:
// d6a587c0a0ae1558081d29f292a38e0404232d2c05a16379e3ca120ab50745f2907671f1f11fa84e2f030c35bb3b3d26aa2f43348d6e1c10ec8008f2ed64922f

🔹 SMTP Credentials - SMTP_HOST, SMTP_PORT, SMTP_USER, SMTP_KEY, FROM_EMAIL

I used Brevo to configure SMTP. You can follow their documentation for setup instructions.

Stack

Frontend Libraries

• Chakra UI
• React Router v7
• Pragmatic Drag and Drop
• Frimousse
• check-password-strength
• Lucide Icons
• lottie-react
• gh-pages

Backend Libraries

• Mongoose
• cors
• dotenv
• bcrypt
• jsonwebtoken
• cookie-parser
• express-rate-limit
• nodemailer
• nodemon

---

Hosted for free on Cloudflare Pages. ⚡