My Finances

A personal finance tracker to manage monthly income and expenses,
with real-time cloud sync and multi-device access.

---

Goals

• Track income and expenses per month with categories, due dates, and paid status
• See a yearly dashboard with charts and spending insights
• Access data from any device via Firebase cloud sync
• Keep everything private — data is locked to the authenticated user

Features

• Monthly view — add, edit, delete income and expense entries; toggle paid/received status; track spending rate
• Dashboard — yearly overview with income vs. expense bar chart, top expense categories, and monthly summaries
• Authentication — email/password or Google sign-in via Firebase Auth
• Cloud storage — Firestore stores each month as an isolated document per user
• Import / Export — back up and restore all data as a JSON file
• Copy month — duplicate a month's entries to another period with paid status reset
• Responsive — desktop table layout and mobile card list; modal becomes a bottom sheet on small screens

Stack

Layer	Technology
Framework	React 18 + TypeScript 5
Bundler	Vite 5
Styling	Tailwind CSS 3
Charts	Recharts 2
Icons	Tabler Icons
Date picker	react-day-picker 8
Auth & DB	Firebase 12 — Auth + Firestore
Security	Firebase App Check + reCAPTCHA v3
Package manager	Bun
Linting	ESLint + typescript-eslint
Formatting	Prettier

Getting Started

1. Clone and install

git clone <repo-url>
cd p-finance
bun install

2. Create a Firebase project

1. Go to console.firebase.google.com and create a project
2. Enable Authentication → Sign-in providers → Email/Password and Google
3. Enable Firestore Database in production mode
4. Register a Web app and copy the config
5. Go to App Check → register your web app with reCAPTCHA v3 (get a site key from g.co/recaptcha/admin)

3. Configure environment

Copy .env.example to .env.local and fill in your Firebase credentials:

cp .env.example .env.local

VITE_FIREBASE_API_KEY=
VITE_FIREBASE_AUTH_DOMAIN=
VITE_FIREBASE_PROJECT_ID=
VITE_FIREBASE_STORAGE_BUCKET=
VITE_FIREBASE_MESSAGING_SENDER_ID=
VITE_FIREBASE_APP_ID=
VITE_RECAPTCHA_SITE_KEY=

4. Run

bun dev

Scripts

Command	Description
bun dev	Start dev server
bun run build	Type-check and build for production
bun run preview	Preview the production build locally
bun run lint	Run ESLint
bun run lint:fix	Run ESLint and auto-fix
bun run format	Format all files with Prettier
bun run format:check	Check formatting without writing