Expense Tracker

Monorepo containing a React (Vite) client and an Express server.

---

Project Overview

Expense Tracker is a full‑stack web application to track personal finances. It helps you record expenses and incomes, categorize them, attach receipts, and visualize insights with a clean dashboard.

Key capabilities:

• 🔐 Authentication and onboarding (username, categories) with protected routes.
• 💸 Expenses and incomes management (CRUD), filters, charts, and PDF export of income receipts.
• 🗂️ Categories management with list/grid views, inline edit, and bulk actions.
• 🧾 Receipts storage and preview (image/PDF). Local static serving and optional Supabase Storage integration.
• 📊 Analytics dashboard (KPIs, monthly evolution, category breakdown).
• 🧩 Reusable UI library and Storybook docs.
• 🔗 OpenAPI‑driven client SDK so frontend and backend stay in sync.

Architecture (high level): The React client (Vite + React Router + Tailwind) calls the Express API through a generated SDK (client/src/api). The server exposes REST endpoints backed by PostgreSQL via Prisma, with middleware for security (helmet, cors) and uploads. Optional integrations include Google OAuth and Supabase for receipts.

---

Table of Contents

• Structure
• Tech Stack
• Architecture
• Quick Start
• Documentation
• Environment
• OpenAPI
• Deployment

Structure

expense-tracker/
  client/   # React + TS + Vite app (UI library + Storybook)
  server/   # Express API server

Tech Stack

• Client: React 19, TypeScript, Vite 7, Tailwind CSS 4, Storybook 9
• Server: Node.js, Express, PostgreSQL (via pg), Helmet, CORS, Morgan

Architecture

flowchart LR
  user[User Browser] --> client[Client React Vite Tailwind]
  client --> sdk[OpenAPI SDK]
  client --> hooks[Hooks and Stores]
  client --> services[Domain Services]
  client --> auth[RequireAuth PostAuthGate]
  sdk --> api[Express API Server]
  api --> db[(PostgreSQL)]
  api -.-> supabase[(Supabase Storage)]

Loading

Quick Start

1. Server

cd server
cp .env.example .env  # edit values as needed
npm install
npm run dev

By default, set PORT=8080 to match the client SDK base (http://localhost:8080/api). If PORT is unset, the server falls back to 4000.

2. Client

cd client
npm install
npm run dev

Vite dev server runs on http://localhost:5173 by default.

3. Storybook (optional)

cd client
npm run storybook

Documentation

• Client README: ./client/README.md
• Server README: ./server/README.md

Environment

• Server env template: server/.env.example
• Key vars: PORT, DATABASE_URL, JWT_SECRET, CORS_ORIGIN

OpenAPI

• Spec file: server/docs/Expense Tracker API.yaml
• Regenerate client SDK from the spec (run from client/):

npm run api:generate

Deployment

• Client can be deployed as static assets (e.g., Vercel). Ensure API base points to the deployed server.
• Server: provide DATABASE_URL, JWT_SECRET, CORS_ORIGIN, and (if used) Supabase/Google OAuth variables as per server/.env.example.