├── backend/ ← Express API + Gemini AI
│ ├── server.js
│ ├── .env ← PUT YOUR API KEY HERE
│ ├── package.json
│ ├── routes/
│ │ └── bill.js
│ └── services/
│ └── extractBill.js
│
├── frontend/ ← React + Vite app
│ ├── index.html
│ ├── vite.config.js
│ ├── package.json
│ └── src/
│ ├── main.jsx
│ ├── App.jsx
│ ├── index.css
│ └── components/
│ ├── Sidebar.jsx
│ ├── BillScanner.jsx
│ ├── BillsList.jsx
│ └── Dashboard.jsx
│
└── package.json ← Run both apps from the project root
- Node.js 18 or higher → https://nodejs.org
- pnpm → https://pnpm.io/installation
- Gemini API key → https://aistudio.google.com/app/apikey
If you do not already have pnpm installed, enable it with Corepack:
corepack enable
corepack prepare pnpm@9.15.0 --activateOpen backend/.env and replace:
GEMINI_API_KEY=your_gemini_api_key_here
with your real key from Google AI Studio. The backend can start without this key, but bill extraction requires it.
From the repository root, run:
pnpm run devThis single command will:
- install the root toolchain
- install backend dependencies
- install frontend dependencies
- start the backend on http://localhost:3001
- start the frontend on http://localhost:5173
Go to: http://localhost:5173
If you want to run each app separately, you can still do:
cd backend
pnpm install
pnpm run devAnd in a second terminal:
cd frontend
pnpm install
pnpm run devIf you are using an AI coding agent or automation workflow for this repo, use pnpm instead of npm for installs and scripts. The default workflow above is already set up for pnpm.
- Click "Bill Scanner" in the sidebar
- Upload a bill photo (JPG/PNG) or PDF
- Wait for Gemini to read the bill
- Review extracted fields (yellow = AI was unsure)
- Edit anything wrong
- Click "Approve & save"
- Bill appears in "Bills" tab and "Dashboard"