More project photos (3)
The problem
Freelancers and small studios lose hours to invoice formatting: line items, taxes, totals and professional layout, repeated for every client. This project builds BillBook, an invoice generator that removes that friction. The builder view pairs form controls (client, invoice number, dates, line items, GST rate, discount) with a live preview of a professional GST invoice — parties with GSTINs, an itemized table, and a totals block computing subtotal, 5% discount, 18% GST and the 53,808-rupee grand total correctly. Line items are editable with add-row support. Around the builder sit the business views: a revenue dashboard with stat cards (monthly revenue, outstanding, overdue, average payment time), a canvas monthly-revenue bar chart and payment-status donut, an invoice history table with paid/pending/overdue pills, and a client manager with per-client billed and outstanding totals. All money uses Indian Rupee formatting.
Edits invoice fields, previews the layout and exports or emails the PDF.
Follow the working sequence
How it works
- The builder form edits an invoice model: parties, line items, tax and discount rates.
- A totals engine recomputes subtotal, discount amount, GST and grand total from the line items.
- The preview pane re-renders the professional invoice layout from the same model on every change.
- The analytics view aggregates the invoice dataset into revenue cards, monthly bars and the payment donut.
- The history table lists invoices with status pills; the client table rolls up billed and outstanding per client.
- PDF export and email actions are provided as the delivery affordances of the document pipeline.
Tech stack:
- HTML5, CSS3, vanilla JavaScript (ES6)
- Canvas 2D API for revenue charts
- Document totals engine (no library)
- INR currency formatting throughout
- Static deployment (no server or database)
| Parameter | Value |
|---|---|
| Views | 3 (Create Invoice, Invoices & Revenue, Clients) |
| Demo invoices | 5 with realistic amounts and states |
| Demo clients | 4 with billing rollups |
| Tax model | GST (18%/12%/5%/0%) plus discount % |
| Charts | Canvas monthly bars and payment donut |
| Dependencies | None (single HTML file) |
| Deployment | Any static host |
Project features
- [Invoice builder] Client, dates and invoice-number form bound to a live document model.
- [Editable line items] Description, quantity and rate inputs with per-row amounts and add-row support.
- [Correct totals math] Subtotal, discount %, GST % and grand total computed by a totals engine.
- [Live GST invoice preview] Professional layout with GSTINs, itemized table and payment footer.
- [Revenue analytics] Monthly bar chart and payment-status donut drawn on canvas.
- [Invoice history] Five invoices with amounts, dates and paid/pending/overdue status pills.
- [Client management] Client table with contacts, invoice counts, billed totals and outstanding.
What is included
- Complete source code (single-file invoicing app with all views)
- Realistic invoice and client dataset in INR
- Totals engine with GST/discount computation
- Setup guide (print-CSS PDF export, email integration)
- Project report PDF (document modelling, totals math, methodology)
- PPT presentation for final review
- Viva Q&A preparation document (billing systems, GST basics, document UI)
Limitations & prerequisites
- PDF export uses the browser print flow in the demo; one-click jsPDF generation is a documented extension.
- Figures are demo data; a production build needs a database and user accounts.
- Single GSTIN profile; multi-business support is future scope.
- No payment gateway or UPI link generation in this build.
Frequently Asked Questions
Is the GST math correct?
Yes. The totals engine computes subtotal from line items, applies the discount, then applies GST on the discounted subtotal — the standard Indian invoice sequence — and every figure on the preview traces to it.
Can I change the GST rate?
Yes, per invoice (18%, 12%, 5%, 0%), and the discount percentage is editable; totals recompute live.
How do I get a real PDF?
The demo uses the browser's print-to-PDF flow against the invoice preview; the setup guide documents wiring jsPDF/html2pdf for one-click export.
Can it handle my own clients?
Clients are data objects with contact, GSTIN and billing history; adding one updates the builder dropdown, history and rollups.
What will I learn?
Document-generation UI, financial arithmetic in code, dashboard analytics and business-app design.
Is this project suitable for a final-year project?
Yes — for Computer Science, IT and Web Development programs. It demonstrates a complete business document pipeline with real arithmetic. Suitable for B.E./B.Tech final-year projects in Computer Science, IT and Web Development.
Components & software requirements
- HTML5, CSS3, vanilla JavaScript (ES6)
- Canvas 2D API for revenue charts
- Document totals engine (no library)
- INR currency formatting throughout
- Static deployment (no server or database)
Delivery information
Built-to-order project. Delivery timeline is shared after order confirmation based on current queue.
Support terms
Complete documentation, setup guide, and viva preparation included. Support for setup and explanation provided.
Download free synopsis (PDF)
Enter your name and WhatsApp number — the synopsis PDF downloads immediately. We may send occasional project updates on WhatsApp; no spam.