Habit Tracker

A full-stack habit tracking web app built with React + FastAPI + PostgreSQL. Track daily habits, build streaks, and navigate through weeks.

Prerequisites

• Node.js v18+
• Python 3.11+
• PostgreSQL 17

Database Setup

1. Open pgAdmin 4
2. Create a new database called habit_tracker
3. Open Query Tool and run:

CREATE TABLE habits (
    id SERIAL PRIMARY KEY,
    name VARCHAR(255) NOT NULL,
    created_at TIMESTAMP DEFAULT NOW()
);

CREATE TABLE completions (
    id SERIAL PRIMARY KEY,
    habit_id INTEGER NOT NULL REFERENCES habits(id) ON DELETE CASCADE,
    date DATE NOT NULL,
    UNIQUE(habit_id, date)
);

Running Locally

1. Backend

cd backend
python -m venv venv
venv\Scripts\activate
pip install -r requirements.txt

Create a .env file in the backend folder:

DATABASE_URL=postgresql://postgres:YOUR_PASSWORD@localhost:5432/habit_tracker

Then start the server:

uvicorn main:app --reload

Backend runs at http://localhost:8000

2. Frontend

Open a new terminal in the root folder:

npm install
npm run dev

Frontend runs at http://localhost:5173

Features

• Add, rename, and delete habits
• Weekly grid with toggleable checkmarks
• Today's column highlighted
• Future dates disabled
• Streak counter per habit
• Week navigation (previous, next, back to this week)
• Historical checkmarks persist across reloads
• Empty state when no habits exist
• Fully connected to PostgreSQL via FastAPI