Handshake

A full-stack invoice prototype for creating itemized invoices, tracking activity, sharing payment links, and accepting cards through Stripe test mode.

GitHub repository · Architecture · Express API

Status: The repository is public, but no working Handshake demo or product walkthrough is published. The client README links to the original dashboard template instead.

System architecture

flowchart LR
    U[Browser] --> C[React and Redux app]
    C --> A[Express API]
    A --> O[Sequelize]
    O --> D[(PostgreSQL)]
    A --> S[Stripe PaymentIntents]
    C --> J[Stripe card form]
    J --> S

Data flow

1. The user enters invoice, customer, due-date, and line-item details in the React app.
2. Express recalculates the total, assigns an ID, and stores the invoice in PostgreSQL.
3. The dashboard loads invoice lists and status totals for tables and charts.
4. A public payment page confirms the card through Stripe, then marks the invoice completed.

Engineering highlights and trade-offs

• Server-calculated totals: The API ignores the submitted total and recalculates it from item prices and quantities.
• Complete prototype flow: Users can create, list, update, delete, share, and pay invoices from one interface.
• Simple storage model: Billing details and items are stored as JSON on the invoice. This is convenient for a prototype but harder to search and report on than separate tables.
• Small-data design: Pagination and dashboard totals are calculated in Node.js after loading records. Database-level queries would scale better.
• Template foundation: The interface is based on Flatlogic's Sofia React template, with the invoice and payment workflow added on top.