Bill Tracker

A full-stack bill tracking application that allows users to track their expenses with both manual entry and OCR-powered receipt scanning.

🚀 Live Demo

• Frontend: https://bill-tracker.saikumarbali555.workers.dev/
• Backend API: https://server-wheat-eight-61.vercel.app/api

✨ Features

• User Authentication - Secure login and registration system
• Manual Bill Entry - Add bills manually with title, amount, category, and date
• OCR Receipt Scanning - Upload receipt images and automatically extract bill details
• Dashboard - View total spending, monthly totals, and category breakdown
• Data Visualization - See spending trends over time with charts
• Bill Management - View, track, and manage all your bills in one place
• Image Storage - Receipts stored in Cloudflare R2 with public access

🛠 Tech Stack

Frontend

• React 19 - UI framework
• Vite - Build tool
• React Router - Client-side routing
• Axios - HTTP client
• Recharts - Data visualization
• Lucide React - Icons

Backend

• Express.js - Web framework
• Cloudflare D1 - SQLite database
• Cloudflare R2 - Object storage for receipt images
• JWT - Authentication tokens
• OCR.space API - Receipt text extraction
• Multer - File upload handling

📁 Project Structure

bill_tracking/
├── client/                 # React frontend
│   ├── src/
│   │   ├── components/    # React components
│   │   ├── pages/         # Page components
│   │   ├── context/       # React context (auth)
│   │   ├── services/      # API service
│   │   ├── App.tsx        # Main app component
│   │   └── main.tsx       # Entry point
│   ├── .env               # Frontend environment variables
│   ├── .env.example       # Frontend environment template
│   ├── vercel.json        # Vercel configuration
│   └── package.json
├── server/                 # Express backend
│   ├── src/
│   │   ├── routes/        # API routes (auth, bills)
│   │   ├── middleware/    # Express middleware
│   │   ├── services/      # D1, R2, OCR services
│   │   └── index.js       # Server entry point
│   ├── .env               # Server environment variables
│   ├── .env.example       # Server environment template
│   ├── wrangler.toml      # Cloudflare config
│   ├── vercel.json        # Vercel configuration
│   └── package.json
└── README.md

�-setup Local Development

Prerequisites

• Node.js 18+
• npm or pnpm

1. Clone the repository

git clone https://github.com/yourusername/bill_tracking.git
cd bill_tracking

2. Setup Backend

cd server
npm install
cp .env.example .env
# Edit .env with your credentials

Required Backend Environment Variables

PORT=5000
CLOUDFLARE_API_TOKEN=your_cloudflare_api_token
CLOUDFLARE_ACCOUNT_ID=your_cloudflare_account_id
CLOUDFLARE_D1_DATABASE_ID=your_d1_database_id
JWT_SECRET=your_jwt_secret
OCR_SPACE_API_KEY=your_ocr_space_api_key
R2_ACCESS_KEY_ID=your_r2_access_key_id
R2_SECRET_ACCESS_KEY=your_r2_secret_access_key

Start the backend server:

npm run start
# Server runs on http://localhost:5000

3. Setup Frontend

cd client
npm install
cp .env.example .env
# Edit .env with your API URL

Required Frontend Environment Variables

VITE_API_URL=http://localhost:5000/api
# Or for production:
VITE_API_URL=https://server-wheat-eight-61.vercel.app/api

Start the frontend:

npm run dev
# Frontend runs on http://localhost:5173

☁️ Deployment

Frontend (Cloudflare Pages)

1. Go to Cloudflare Dashboard → Pages
2. Click Connect to Git and select your repository
3. Configure settings:
   • Production branch: main
   • Build command: npm run build
   • Build output directory: dist
4. Add environment variable:
   • VITE_API_URL = https://server-wheat-eight-61.vercel.app/api
5. Click Save and Deploy

Backend (Vercel)

The backend is already deployed to Vercel. To redeploy:

1. Push changes to GitHub
2. Vercel will automatically deploy

Or manually:

cd server
npm install -g vercel
vercel --prod

� API Endpoints

Authentication

Method	Endpoint	Description
POST	/api/auth/register	Register new user
POST	/api/auth/login	Login user
GET	/api/auth/me	Get current user

Bills

Method	Endpoint	Description
GET	/api/bills	Get all bills for user
POST	/api/bills/manual	Add bill manually
POST	/api/bills/upload	Upload receipt (with OCR)
GET	/api/bills/summary	Get spending summary
GET	/api/bills/image/:key	Get receipt image

🔧 Cloudflare D1 Database Schema

CREATE TABLE users (
  id INTEGER PRIMARY KEY AUTOINCREMENT,
  email TEXT UNIQUE NOT NULL,
  password TEXT NOT NULL,
  created_at DATETIME DEFAULT CURRENT_TIMESTAMP
);

CREATE TABLE bills (
  id INTEGER PRIMARY KEY AUTOINCREMENT,
  user_id INTEGER NOT NULL,
  title TEXT NOT NULL,
  amount REAL NOT NULL,
  category TEXT,
  date DATE NOT NULL,
  type TEXT NOT NULL,
  file_path TEXT,
  vendor_name TEXT,
  invoice_no TEXT,
  phone_number TEXT,
  address TEXT,
  items_json TEXT,
  subtotal REAL,
  discount REAL,
  total_qty INTEGER,
  created_at DATETIME DEFAULT CURRENT_TIMESTAMP,
  FOREIGN KEY (user_id) REFERENCES users(id)
);

📝 License

MIT License - feel free to use this project for learning or personal use.

👤 Author

Saikumar Bali

---

Built with ❤️ using React, Express, and Cloudflare