InvoiceEase

A professional, browser-based invoice generation web application built with Angular 21+ and Tailwind CSS. InvoiceEase enables business owners, office workers, and freelancers to create professional invoices in under 60 seconds.

Overview

InvoiceEase provides a streamlined invoicing experience with real-time preview, bilingual support (Indonesian/English), dual currency support (IDR/USD), and one-click PDF generation. The application runs entirely in the browser with no backend required, making it simple to deploy and use.

Key Features

• Real-time invoice form validation and calculations
• Live invoice preview with instant updates
• Bilingual support (Indonesian & English) with instant language switching
• Dual currency formatting (IDR & USD)
• Client-side PDF generation with professional design
• Mobile-responsive design for on-the-go invoicing
• Digital signature support
• Modern, intuitive user interface

Tech Stack

• Frontend Framework: Angular 21+ (standalone components, signals)
• Styling: Tailwind CSS v3
• PDF Generation: pdfmake
• Date Utilities: date-fns
• Language: TypeScript
• Build Tool: Angular CLI

Prerequisites

Before you begin, ensure you have the following installed:

• Node.js 18 or higher
• npm (comes with Node.js) or yarn

You can check your versions by running:

node --version
npm --version

Getting Started

Installation

1. Clone the repository or navigate to the project directory
2. Install dependencies:

npm install

This will download all required packages defined in package.json.

Running the Development Server

Start the development server:

npm start

Alternatively, you can use the Angular CLI directly:

ng serve

The application will be available at http://localhost:4200. The server will automatically reload when you make changes to any source file.

Building for Production

Create an optimized production build:

npm run build

Build artifacts will be stored in the dist/ directory. You can deploy this folder to any static hosting service (Netlify, Vercel, GitHub Pages, etc.).

Project Structure

src/app/
├── components/          # Angular components
│   ├── invoice-form/    # Main invoice input form
│   ├── invoice-preview/ # Real-time preview component
│   └── toast/           # Notification component
├── services/           # Business logic and utilities
│   ├── invoice.service.ts       # Invoice state management
│   ├── pdf.service.ts           # PDF generation logic
│   ├── i18n.service.ts          # Internationalization
│   ├── validation.service.ts    # Form validation
│   ├── calculation.service.ts   # Invoice calculations
│   └── locale-persistence.service.ts # Language persistence
├── models/             # TypeScript interfaces and types
│   ├── invoice.model.ts         # Invoice data structures
│   └── validation.types.ts      # Validation types
├── pipes/              # Custom pipes
│   └── translate.pipe.ts        # Translation pipe
├── i18n/               # Translation files
│   ├── id.json                  # Indonesian translations
│   └── en.json                  # English translations
├── app.config.ts       # Application configuration
├── app.routes.ts       # Route definitions
└── app.component.ts    # Root component

Usage

Creating an Invoice

1. Fill in your business information (company name, address, contact details)
2. Add client information
3. Select invoice date and due date
4. Add line items with descriptions, quantities, and rates
5. The preview will update in real-time as you type
6. Choose your preferred language and currency
7. Click the download button to generate the PDF invoice

Switching Languages

Use the language selector in the header to switch between Indonesian and English. Your preference will be saved for future visits.

Currency Support

The application supports both Indonesian Rupiah (IDR) and US Dollars (USD). Switch between currencies using the currency selector in the header.

Development

Code Style

The project follows Angular best practices and uses:

• Standalone components for better tree-shaking
• Signals for reactive state management
• TypeScript for type safety
• Tailwind CSS for utility-first styling

Testing

Run unit tests:

npm test

Available Scripts

• npm start - Start development server
• npm run build - Build for production
• npm run watch - Build in watch mode for development
• npm test - Run unit tests

Browser Support

• Chrome (recommended)
• Firefox
• Safari
• Edge

License

MIT License - feel free to use this project for personal or commercial purposes.

Contributing

Contributions are welcome! Please feel free to submit pull requests or open issues for bugs and feature requests.

Status

This project is production-ready and actively maintained. All core features have been implemented and tested.