Dynamic Invoice Generator

A modern, responsive invoice builder built with React + Vite + Tailwind CSS. Create line items, configure tax/discount, edit billing details, and switch into a polished invoice preview in real time.

✨ Highlights

• Interactive invoice editor with editable line items (service, quantity, unit price)
• Auto-calculated totals including subtotal, discount, tax, and grand total
• Smart item ID generation that fills ID gaps when rows are removed
• Billing profiles for both sender (“From”) and recipient (“Bill To”) sections
• Professional invoice preview mode with printable-looking layout
• Modern UI using utility-first styling and gradient-based design accents

🛠 Tech Stack

• Frontend: React 19
• Build tool: Vite 7
• Styling: Tailwind CSS 4
• Icons: react-icons
• Linting: ESLint 9

🌐 Live Demo

Live URL: Invoice Generator

🚀 Getting Started

1) Prerequisites

Make sure you have one of the following installed:

• Node.js 18+ (recommended), or
• Bun (lockfile included)

2) Install dependencies

Using npm:

npm install

Using Bun:

bun install

3) Run the development server

npm run dev

Then open the local URL shown in your terminal (usually http://localhost:5173).

📜 Available Scripts

• npm run dev — Start local dev server with HMR
• npm run build — Create production build
• npm run preview — Preview production build locally
• npm run lint — Run ESLint checks

📂 Project Structure

dynamic-invoice-generator/
├── public/
├── src/
│   ├── components/
│   │   ├── ActionButtons.jsx
│   │   ├── Footer.jsx
│   │   ├── Header.jsx
│   │   ├── InvoiceDetails.jsx
│   │   ├── InvoicePreview.jsx
│   │   ├── InvoiceSummary.jsx
│   │   └── LineItemRow.jsx
│   ├── App.jsx
│   ├── App.css
│   ├── index.css
│   └── main.jsx
├── index.html
├── package.json
└── vite.config.js

🧠 How It Works

1. Enter sender and client details.
2. Add, update, or remove line items.
3. Set discount and tax rate.
4. Review computed totals in the summary panel.
5. Toggle Preview for a clean, invoice-style layout.

📸 Screenshots

Invoice Editor

Invoice Summary

Invoice Preview

🔮 Potential Improvements

• Export to PDF
• Persistent drafts (local storage / backend)
• Invoice number sequencing
• Multi-currency and locale formatting
• Authentication + client management
• Unit/integration tests

📬 Contact

• LinkedIn: Dadir Dev.
• Twitter/X: @Dadir_Dev

🙌 Acknowledgement

• Built with React, Vite, and Tailwind CSS.
• Icons powered by react-icons.
• Thanks to the open-source community for the tooling that made this project possible.

🤝 Contributing

Contributions are welcome.

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Run lint/build checks
5. Open a pull request

📄 License

This project is open source and available under the MIT License.