A mobile-first web app for splitting receipts with friends using OCR.
| Role | Folders | Spec Doc |
|---|---|---|
| Frontend | src/components/, src/app/**/page.tsx |
FRONTEND.md |
| Backend | src/app/api/, src/lib/ocr.ts |
BACKEND.md |
| Database | src/lib/firebase.ts, src/lib/firestore.ts, src/lib/storage.ts, src/hooks/ |
DATABASE.md |
| Business Logic | src/lib/calculator.ts, src/lib/parser.ts, src/lib/payment.ts, src/lib/utils.ts, src/types/ |
BUSINESS_LOGIC.md |
See docs/ARCHITECTURE.md for full architecture overview.
# Install dependencies
npm install
# Copy env template
cp .env.local.example .env.local
# Fill in your Firebase & Google Cloud credentials in .env.local
# Run dev server
npm run devsrc/
├── app/ # Next.js pages & API routes
│ ├── api/
│ │ ├── ocr/ # [Backend] OCR endpoint
│ │ └── receipts/ # [Backend] Receipt CRUD
│ ├── split/[token]/ # [Frontend] Split page
│ └── page.tsx # [Frontend] Landing page
├── components/ # [Frontend] React components
│ ├── ui/ # Base UI components
│ └── *.tsx # Feature components
├── hooks/ # [Database] React hooks
├── lib/
│ ├── __mocks__/ # Mock data for development
│ ├── firebase.ts # [Database] Firebase init
│ ├── firestore.ts # [Database] Firestore CRUD
│ ├── storage.ts # [Database] Storage uploads
│ ├── ocr.ts # [Backend] Vision API
│ ├── calculator.ts # [Business Logic] Split calculations
│ ├── parser.ts # [Business Logic] Receipt parsing
│ ├── payment.ts # [Business Logic] Payment links
│ └── utils.ts # [Business Logic] Utilities
└── types/ # [Business Logic] TypeScript types
- Create feature branch:
git checkout -b feature/your-feature - Work only in your assigned folders
- Create PR to
main - Get review from 1+ team member
- Merge after approval
While developing, use mock data from src/lib/__mocks__/data.ts:
import { mockReceipt, mockItems, mockPeople } from '@/lib/__mocks__/data';- Framework: Next.js 14 (App Router)
- Database: Firebase Firestore
- Storage: Firebase Storage
- OCR: Google Cloud Vision API
- Styling: Tailwind CSS