https://github.com/eltimoyt/invoiceapp

InvoiceApp is a simple, user-friendly invoicing application built with Angular and TypeScript.
https://github.com/eltimoyt/invoiceapp

angular bootstrap css frontend html invoice-app programming typescript web

Last synced: 10 days ago
JSON representation

InvoiceApp is a simple, user-friendly invoicing application built with Angular and TypeScript.

• Host: GitHub
• URL: https://github.com/eltimoyt/invoiceapp
• Owner: ElTimoYT
• Created: 2024-09-04T16:43:08.000Z (5 months ago)
• Default Branch: main
• Last Pushed: 2024-11-02T23:13:48.000Z (3 months ago)
• Last Synced: 2024-11-14T15:43:28.001Z (2 months ago)
• Topics: angular, bootstrap, css, frontend, html, invoice-app, programming, typescript, web
• Language: TypeScript
• Homepage:
• Size: 247 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# 📄 InvoiceApp 

## ➡️ About

**InvoiceApp** is a simple invoicing app built with Angular and TypeScript. It lets you create and view invoices, with fixed client and company data that you can set up directly in the code. This setup helps keep important details like client and company names consistent and secure.

---

## ✅ Features

- **Client and Company Info**: Fixed details like the client’s name and address and the company’s name and ID are displayed in the invoice header. These details aren’t editable from the app interface—you’ll need to update them directly in the code.

- **Invoice Item List**: Shows a table with the following columns for each product:

  - **ID** for each item.

  - **Product Name**.

  - **Price**.

  - **Quantity**.

  - **Remove Button** to delete items from the list.

- **Add Item Form**: There’s a form at the bottom where you can add new products to the invoice by entering product name, price, and quantity.

- **Automatic Total Calculation**: The app calculates the invoice total automatically and displays it at the bottom right.

---

## 💻 Tech Stack

- **Frontend**: Angular, HTML, CSS

- **Programming Language**: TypeScript

- **Styling**: Bootstrap (for layout and buttons)

---

## ❇️ Installation

1. **Clone the repository**

   ```bash

   git clone https://github.com/your-username/InvoiceApp.git

2. **Install dependencies**

   ```bash

   npm install

3. **Run the app**

   ```bash

   ng serve

---

## ⚙️ Configuring Client and Company Data

If you want to change the default client and company info, go to the config file `src/app/data/invoice.data.ts` and update the values there. This info will show up on every invoice generated in the app.

---

## ❕How to use

1. **View Invoice**: The app shows an invoice view with the client and company info at the top.

2. **Add Products**: Use the form at the bottom to add products to the invoice by entering the product name, price, and quantity. Click `New Item` to add it to the list.

3. **Remove Products**: You can remove products from the list by clicking the `Remove` button next to each item.

4. **Invoice Total**: The app automatically updates the invoice total, shown at the bottom right.

---

## 📞Contact

Got questions or suggestions? Feel free to reach out at [email protected].

> [!IMPORTANT]

> This project is licensed under the MIT License. Check out the LICENSE file for details.