HabitTracker

A full-stack habit management and tracking application built with React, TypeScript, Express, MongoDB, and JWT authentication. HabitTracker lets users register, log in, and manage daily habits. Users can create, update, delete, and track habit progress over time.

Currently under development.

• Frontend

  • React 19
  • TypeScript
  • Vite
  • Ant Design
  • Axios
  • React Router DOM
  • Zustand

• Backend

  • Node.js
  • Express 5
  • TypeScript
  • MongoDB / Mongoose
  • JSON Web Tokens (JWT)
  • bcrypt
  • CORS
  • Morgan / Winston logging

Features

• User registration and login
• JWT-secured API routes
• Create, read, update, and delete habits
• Track habit completion/status
• Habit history retrieval
• Responsive UI with Ant Design components
• Client-side state managed with React context and Zustand

Getting Started

Prerequisites

• Node.js 18+ / npm
• MongoDB instance
• .env file for server configuration

Installation

1. Clone the repository:

git clone https://github.com/naama-git/habit-tracker

2. Frontend Setup

cd client
npm install
npm run dev

3. Backend Setup

cd server
npm install
npm run dev

Environment Variables

Create .env file with:

PORT=5000
DATABASE_URI=<your_mongodb_connection_string>
ACCESS_TOKEN_SECRET=<your_jwt_secret>

Screenshots

Main Interface & Responsive Design

Desktop Experience	Mobile Adaptation
Comprehensive wide-screen management	Smart vertical navigation & layout

---

Habit Management & Control

Detailed Views

View Details	Quick Edit	Action Confirmation

---

Customization & Scheduling

Frequency & Planning

Adding New	Weekly Routine	Monthly Goals

Visual Organization

---

Access & Security

A clean, minimalist authentication gateway focused on user data privacy.