⏱ TimeTrack

A full-stack time tracking web app built with FastAPI, React, and SQLite. Organise your work into areas and projects, track time with a live timer, and review your productivity through a summary dashboard.

---

Features

• Live timer — start and stop sessions with an optional note
• Organised structure — group projects under areas (e.g. Portfolio Building → SQL Workshop)
• Summary dashboard — total hours per project across all sessions
• Recent entries log — full history with timestamps and durations
• Auto-generated API docs — interactive Swagger UI at /docs

---

Tech stack

Layer	Technology
Backend	Python 3.11, FastAPI, Pydantic
Database	SQLite (via Python sqlite3)
Frontend	React 19, Vite 8
API style	REST, JSON

---

Project structure

timetrack/ ├── backend/ │ ├── database.py # DB connection and initialisation │ ├── models.py # Pydantic request/response schemas │ └── routes.py # All API endpoints ├── frontend/ │ └── src/ │ ├── App.jsx # Main React component (timer, dashboard) │ ├── main.jsx # React entry point │ └── index.css # Global styles ├── docs/ # Screenshots for this README ├── main.py # FastAPI app, CORS, startup └── timetrack.db # SQLite database (git-ignored)

---

API endpoints

Method	Endpoint	Description
GET	/api/areas	List all areas
POST	/api/areas	Create an area
GET	/api/projects	List all projects
POST	/api/projects	Create a project
GET	/api/entries	List all time entries
POST	/api/entries/start	Start a timer
POST	/api/entries/{id}/stop	Stop a running timer
GET	/api/summary	Total hours per project

Interactive docs available at http://localhost:8000/docs when running locally.

---

Screenshots

Summary dashboard

Recent entries

---

Running locally

Prerequisites

Tool	Version
Python	3.11+
Node.js	22.12+
npm	10+

1. Clone the repo

git clone https://github.com/mqcapelle/timetrack.git
cd timetrack

2. Backend

# Create and activate a conda environment
conda create -n timetrack python=3.11 -y
conda activate timetrack

# Install dependencies
pip install fastapi uvicorn pydantic

# Start the API server
uvicorn main:app --reload
# Running at http://localhost:8000
# Swagger UI at http://localhost:8000/docs

3. Frontend

Open a second terminal:

cd frontend
npm install
npm run dev
# Running at http://localhost:5173

4. Open the app

Go to http://localhost:5173 in your browser.

---

How to use

1. Create an area — e.g. "Portfolio Building" or "Job Applications"
2. Create a project under that area — e.g. "SQL Workshop"
3. Select the project in the Timer dropdown, add an optional note
4. Click Start — the live timer begins
5. Click Stop when done
6. View totals in the Summary table and full history in Recent Entries

---

What I learned building this

• Designing a REST API with FastAPI and Pydantic models
• Managing a relational SQLite database with foreign keys
• Building a React frontend with useState and useEffect hooks
• Connecting frontend and backend with fetch() and handling CORS
• Structuring a full-stack project for a clean GitHub portfolio