InvoiceFlow

Production-grade full-stack invoice management system with secure authentication, seller business profile defaults, auto-calculated totals, and one-click PDF download.

Highlights

• Full authentication flow with JWT
• Seller Business Profile page with editable:
  • Mobile number
  • Address
  • GSTIN
  • Default tax %
  • Optional default note
• Create invoice with server-side financial calculations
• Invoice status lifecycle: draft, sent, paid, cancelled
• Professional invoice preview and PDF export
• Responsive React UI with animated action buttons
• MongoDB support with in-memory fallback for local development

Tech Stack

Frontend

• React 18
• React Router v6
• Axios
• Tailwind CSS + custom CSS

Backend

• Node.js
• Express
• Mongoose
• express-validator
• JWT + bcryptjs

Document Generation

• Puppeteer
• PDFKit fallback

Project Structure

invoice-app/
|-- client/
|   |-- public/
|   |-- src/
|       |-- components/
|       |-- context/
|       |-- hooks/
|       |-- pages/
|       |-- services/
|       |-- utils/
|
|-- server/
|   |-- config/
|   |-- controllers/
|   |-- middleware/
|   |-- models/
|   |-- routes/
|   |-- services/
|   |-- utils/
|   |-- server.js
|
|-- Project Working.webp
|-- README.md

Prerequisites

• Node.js 18+
• npm
• MongoDB (optional for dev; app can run with in-memory fallback)

Installation

npm run install:all

Or install manually:

cd server
npm install
cd ../client
npm install

Environment Setup

Create server env file:

cp server/.env.example server/.env

Recommended server/.env values:

PORT=5219
NODE_ENV=development
MONGO_URI=mongodb://127.0.0.1:27017/invoiceflow
JWT_SECRET=replace_with_a_long_random_secret
JWT_EXPIRES_IN=7d
CLIENT_URL=http://localhost:3000

Notes:

• If local MongoDB is unavailable, backend falls back to an in-memory MongoDB instance in development.
• You can also point MONGO_URI to MongoDB Atlas.

Running the App

From project root:

npm run dev:server
npm run dev:client

Default URLs:

• Frontend: http://localhost:3000
• Backend API: http://localhost:5219

If port 3000 is occupied, React may start on 3001.

Key Features

Seller Business Profile Defaults

• Manage seller profile data from the business profile page.
• Saved defaults auto-fill into new invoices:
  • Tax percentage
  • Optional note

Invoice Workflow

• Create invoice with customer details and line items.
• Totals are calculated on server side for integrity.
• Preview before download.
• Download as PDF.

Security and Validation

• Password hashing with bcrypt
• JWT-based protected endpoints
• Input validation with express-validator
• User-scoped invoice access

API Overview

Base: /api

Auth

• POST /auth/register
• POST /auth/login
• GET /auth/me
• PUT /auth/me (update seller business profile)

Invoices

• POST /invoices
• GET /invoices
• GET /invoices/:id
• PATCH /invoices/:id/status
• DELETE /invoices/:id
• GET /invoices/:id/pdf

Scripts

Root

• npm run install:all - install both client and server dependencies
• npm run dev:server - start backend in dev mode
• npm run dev:client - start frontend

Server

• npm run dev
• npm start

Client

• npm start
• npm run build

Troubleshooting

Login or register not working

• Ensure backend is running.
• Ensure frontend points to the correct backend URL.
• Check token is present after login.

MongoDB connection error

• Start MongoDB locally, or
• Set a valid Atlas MONGO_URI, or
• Use the in-memory fallback in development.

PDF issues

• Verify backend has required Puppeteer dependencies.
• PDFKit fallback is used if Puppeteer cannot launch.

License

This project is licensed under the Apache License 2.0.

See the full license text in LICENSE.