Celia Billing — Premium Quote & Invoice Builder

Celia Billing is a modern, responsive, and bilingual web application designed to generate professional quotes and invoices instantly. Developed for Celialabs.ai, the application features a polished user interface, rich micro-animations, customizable branding, digital signature signing, and real-time client-side PDF generation.

✨ Features

🌐 Dual Language Localization — Seamlessly toggle between English (EN) and French (FR) interfaces.
🎨 Dynamic Themes — Choose from curated color schemes to match your branding.
📂 Logo Upload — Easily drag-and-drop or select a custom company logo.
🖋️ Digital Signature Canvas — Draw and embed handwritten signatures directly onto the document.
⚙️ Live Interactive Preview — Watch the invoice layout, line items, subtotal, tax rates, and final total update in real-time.
📄 High-Fidelity PDF Export — Export clean, professional-grade PDFs client-side with precise margins, dynamic pricing tables, headers, and footers.
⚡ Fast State Management — Powered by Zustand for lightweight and ultra-responsive state handling.

🛠️ Technology Stack

Framework: React v18 + Vite
Styling: Tailwind CSS
Animations: Framer Motion
State Management: Zustand
Iconography: Lucide React
Signature Input: React Signature Canvas
PDF Generation: jsPDF, pdfmake, and html2canvas

🚀 Getting Started

Prerequisites

Ensure you have Node.js installed (v18 or higher recommended).

Installation

Clone the repository:

git clone https://github.com/dasocreative/billing.git
cd billing

Install dependencies:
```
npm install
```

Development Server

Run the development server locally:

npm run dev

The application will be accessible at http://localhost:5173.

Production Build

Build the optimized production bundles:

npm run build

Preview the production build locally:

npm run preview

📁 Project Structure

├── src/
│   ├── components/       # UI elements (LogoUpload, SignatureCanvas, ItemList, etc.)
│   ├── config/           # Localization dictionaries and site configurations
│   ├── pages/            # Page layouts (Landing, Billing)
│   ├── store/            # Zustand global store configuration
│   ├── utils/            # Client-side PDF generation functions
│   ├── App.jsx           # App routing and root wrapper
│   ├── index.css         # Tailwind directives and custom fonts
│   └── main.jsx          # Entry point
├── public/               # Static assets
├── tailwind.config.cjs   # Tailwind styling configurations
├── vite.config.js        # Vite compilation options
└── package.json          # Node dependencies and build scripts

Developed by Celialabs.ai.

FilesExpand file tree

README.md

Latest commit

History