Accounting & Invoicing System

Demo Video

https://drive.google.com/drive/folders/1K_IhJbgcrs9WAT5Q8N0wEBg2RpVxEhz2?usp=sharing

🚀 Overview

The Accounting & Invoicing System is a comprehensive full-stack web application designed to simplify financial management and billing processes for small to medium-sized businesses. It streamlines the creation of professional invoices, tracks payments, and provides real-time financial insights. By automating manual accounting tasks, this platform helps business owners save time, reduce human errors, and get paid faster.

Problem it solves

Traditional invoicing and accounting methods are often manual, prone to error, and disconnected from modern payment gateways. This project bridges that gap by offering an integrated solution where invoices can be securely generated, distributed, and paid online seamlessly.

🧠 Features

• Secure Authentication: User registration and secured login flow using JWT and bcrypt password hashing.
• Dynamic Invoice Generation: Create customized, professional PDF invoices on the fly using Puppeteer and PDFKit.
• Payment Integration: Seamless, real-time payment processing heavily integrated with Razorpay.
• Financial Dashboard: Intuitive and interactive charts representing cash flow and revenue metrics.
• Customer Management: Keep track of client profiles and their transaction histories in one place.
• Responsive & Accessible UI: A modern, mobile-friendly interface built with Radix UI, Shadcn, and Tailwind CSS.
• Robust Security: Integrated Helmet and Express rate limiting to prevent abuse and ensure API security.

🛠️ Tech Stack

Frontend

• Framework: React 18 (with Vite)
• Language: TypeScript
• Styling: Tailwind CSS, Radix UI, Shadcn UI Components
• State Management & Data Fetching: TanStack React Query
• Routing: React Router DOM
• Forms & Validation: React Hook Form, Zod
• Data Visualization: Recharts

Backend

• Framework: Node.js, Express.js
• Database: MongoDB (with Mongoose ODM)
• Authentication: JSON Web Tokens (JWT), bcryptjs
• Validation: Joi
• Document Generation: PDFKit, Puppeteer
• File Handling: Multer

DevOps & External Services

• Payment Gateway: Razorpay
• Linting & Formatting: ESLint

📂 Project Structure

📦 Odoo-Final-Hackakton
 ┣ 📂 Backend
 ┃ ┣ 📂 src
 ┃ ┃ ┣ 📂 controllers    # Business logic for API endpoints
 ┃ ┃ ┣ 📂 database       # Database seeding and migration scripts
 ┃ ┃ ┣ 📂 middlewares    # Auth, validation, and error handling
 ┃ ┃ ┣ 📂 models         # Mongoose schemas (User, Invoice, etc.)
 ┃ ┃ ┣ 📂 routes         # Express REST API route definitions
 ┃ ┃ ┣ 📂 utils          # Helper functions (exporting, PDF generation)
 ┃ ┃ ┗ 📜 server.js      # Main backend entry point
 ┃ ┗ 📜 package.json
 ┣ 📂 Fronted
 ┃ ┣ 📂 src
 ┃ ┃ ┣ 📂 components     # Reusable UI components (Shadcn, Radix)
 ┃ ┃ ┣ 📂 pages          # Main application screens and views
 ┃ ┃ ┣ 📂 hooks          # Custom reusable React hooks
 ┃ ┃ ┣ 📂 lib            # API clients, utilities, and helpers
 ┃ ┃ ┣ 📜 App.tsx        # Main application root component
 ┃ ┃ ┗ 📜 main.tsx       # React DOM rendering entry
 ┃ ┣ 📜 tailwind.config.ts
 ┃ ┣ 📜 vite.config.ts
 ┃ ┗ 📜 package.json
 ┣ 📂 scripts            # Utility setup, env validation, and execution scripts
 ┗ 📜 package.json       # Root orchestrator for concurrent execution

🖼️ Architecture Diagram

flowchart TB
    %% Clean and highly-compatible styling
    classDef default fill:#f9f9f9,stroke:#333,stroke-width:2px;
    classDef highlight fill:#e1f5fe,stroke:#0288d1,stroke-width:2px;
    classDef ext fill:#fff3e0,stroke:#f57c00,stroke-width:2px;
    classDef dbStyle fill:#e8f5e9,stroke:#388e3c,stroke-width:2px;

    User(("👤 Client / User")):::highlight

    subgraph Frontend ["🌍 Frontend Application (React & Vite)"]
        UI["🧩 UI Components & Views"]
        State["⚡ State Management (React Query)"]
        Router["🔀 Routing & Forms (React Router)"]
        
        UI <--> State
        UI <--> Router
    end

    subgraph Backend ["⚙️ Backend API Server (Node.js & Express)"]
        Gateway["🚪 API Gateway"]
        Auth["🛡️ Security Middleware (JWT)"]
        Logic["🧠 Business Controllers"]
        Services["📄 Service Providers (PDF Generation)"]
        
        Gateway --> Auth
        Auth --> Logic
        Logic --> Services
    end

    Database[("💾 MongoDB Data Store")]:::dbStyle
    PaymentGateway{{"💳 External Service (Razorpay)"}}:::ext

    %% Relationships
    User <==>|"HTTPS Requests"| UI
    State <==>|"REST API Data"| Gateway
    Router -.-> State
    Logic <==>|"Mongoose Object Models"| Database
    Logic <==>|"Secure API Keys"| PaymentGateway

Loading

🧩 System Architecture

The application follows a decoupled Client-Server architecture.

1. The Frontend (React) handles user interaction, form validation (using Zod), and local state management. It communicates asynchronously with the backend via RESTful APIs, with TanStack React Query managing server state, caching, and loading/error handling.
2. The Backend (Express) serves as the central API gateway. It validates incoming payloads using Joi, authenticates requests via JWT, processes core business logic, and generates documents.
3. The Database (MongoDB) stores sensitive records such as user profiles, invoice data, and transaction logs.
4. An External Gateway (Razorpay) handles secure, PCI-compliant payment initiations and verifications.

📡 API Endpoints (Assumed Core Routes)

Method	Endpoint	Description
POST	/api/auth/register	Register a new user account
POST	/api/auth/login	Authenticate user credentials and return a JWT
GET	/api/invoices	Retrieve a list of invoices for the authenticated user
POST	/api/invoices	Create a new invoice record
GET	/api/invoices/:id/pdf	Generate and retrieve a PDF version of a specific invoice
POST	/api/payments/create-order	Initialize a new Razorpay payment order
POST	/api/payments/verify	Verify the signature of a successful Razorpay transaction

Note: Endpoints dealing with invoices and payments are strictly protected and require a valid Bearer token in the Authorization header.

⚙️ Installation & Setup

Prerequisites

• Node.js (v16 or higher recommended)
• MongoDB (Local installation or MongoDB Atlas cluster URI)
• A Razorpay Developer Account for API keys

Step-by-Step Guide

1. Clone the repository

   git clone <your-repository-url>
   cd Odoo-Final-Hackakton

2. Install all dependencies The project is configured to install root, backend, and frontend dependencies easily:

   npm run install:all

3. Configure Environment Variables Create a .env file in the Backend directory and optionally in the Fronted directory. Populate them using the template below.

4. Run the Initialization Scripts Validate your environment and start the application. The root package configuration simplifies this:

   npm run setup-and-run
   # OR run manually via concurrently:
   npm run dev

   • The frontend development server will typically be accessible at http://localhost:5173
   • The backend API will typically run on http://localhost:5000

🔐 Environment Variables

Ensure the following environment variables are properly configured in your Backend/.env file:

# Server Configuration
PORT=5000
NODE_ENV=development

# MongoDB Connection String
MONGODB_URI=mongodb://localhost:27017/accounting_db

# Authentication Keys
JWT_SECRET=your_super_secret_jwt_key
JWT_EXPIRES_IN=1d

# Razorpay Integration Credentials
RAZORPAY_KEY_ID=your_razorpay_key_id
RAZORPAY_KEY_SECRET=your_razorpay_key_secret