SimpleBill

A minimal, charming invoicing app built with React + TypeScript, Firebase, and Rough.js. Create and manage customers, items, and billing documents quickly.

Why SimpleBill?

I built SimpleBill for my non‑tech‑savvy dad, who only needs to make an invoice occasionally — about once a week or every couple of weeks. The focus is a calm, uncluttered flow that makes the task quick and stress‑free when he needs it.

Tech Stack

• React (Vite, TypeScript)
• Firebase (Auth with Google, Firestore)
• Rough.js for sketch‑style UI accents
• pdf-lib for PDF generation

Prerequisites

• Node.js 18+
• A Firebase project with Firestore and Google Sign‑In enabled

Setup

1. Install deps

npm install

2. Environment variables Create a .env file with your Firebase web config:

VITE_API_KEY=...
VITE_AUTH_DOMAIN=...
VITE_PROJECT_ID=...
VITE_STORAGE_BUCKET=...
VITE_MESSAGING_SENDER_ID=...
VITE_APP_ID=...

3. Firestore

• Create the database (Native mode, region nam5) in Firebase Console
• Deploy rules and indexes (requires Firebase CLI):

npm i -g firebase-tools
firebase login
firebase use <your-project-id>
firebase deploy --only firestore:rules,firestore:indexes

Files used:

• firebase.json – Firestore config (database, region, files)
• config/firebase/firestore.rules – Secure, per‑user access rules
• config/firebase/firestore.indexes.json – Composite index for customers (userId ASC, createdAt DESC)

Development

Run the app locally:

npm run dev

Features

• Google Sign‑In
• Customers
  • Add/Edit in modal
  • Address supports multiple lines
  • Email is optional; validated if provided
  • showEmail boolean to control whether email appears on documents
• Items
  • Add/Edit in modal
  • Unit price with currency formatting
• Documents (Invoices/Quotations)
  • Create, edit, validate draft/finalize
  • Auto document number allocation
  • PDF export (pdf-lib) with dynamic import
• Dashboard: list and download recent documents

Design Language

• Rough.js‑enhanced components:
  • PrimaryButton, SecondaryButton (sketch borders/fills, hover states)
  • StyledInput, StyledTextarea (rough borders)
  • StyledTable (card with rough border)
• Link‑style table actions for Edit/Delete

Code Structure

• src/components/core/* – Reusable UI components
• src/components/customers/CustomerModal.tsx – Add/Edit customer modal
• src/components/items/ItemModal.tsx – Add/Edit item modal
• src/components/documents/LineItemsTable.tsx – Line items editor
• src/auth/* – Google Auth provider and hook
• src/hooks/useFirestore.ts – Generic Firestore CRUD hook
• src/hooks/useDocumentForm.ts – Document form state/validation utilities
• src/types/* – Shared models (@models/firestore, document, item, customer)
• src/pages/* – Route pages (Dashboard, Customers, Items, DocumentCreation, DocumentEdit)

Roadmap

• Items CRUD
• Document creation (invoice/quotation), totals, and PDF export
• Dashboard recent documents

Contributing

Contributions are welcome! See CONTRIBUTING and Code of Conduct.

License

MIT