Invoice Practice

Description

This is a simple template for users to create a receipt (invoice) for themselves. Users can add items such as laptops, enter their prices and quantities, and the app will automatically calculate the total amount. Additionally, users can remove items as needed and take a screenshot of their receipt to share with others.

This project was developed using React and Tailwind CSS as a practice project, showcasing my skills in front-end development.

Features

• Add items with name, price, and quantity.
• Automatically calculate the total amount.
• Remove items from the invoice.
• Error handling for user inputs.

Live Demo

You can view the live version of the application at the following link:

Invoice Practice Live

GitHub Repository

Access the source code and contribute to the project:

GitHub Repository

Design Inspiration

The design for this project was inspired by a template created on Figma. You can check out the original design here:

Figma Invoice Design Kit

Getting Started

To run this project locally, follow these steps:

1. Clone the repository:

   git clone https://github.com/arianimmen/Invoice-Practice.git
   

2. Navigate to the project directory:

   cd Invoice-Practice
   

3. Install the dependencies:

   npm install
   

4. Run the development server:

   npm run dev
   

5. Open your browser and navigate to http://localhost:3000 (or the port specified in your terminal).

Technologies Used

• React
• Tailwind CSS
• html2canvas (for taking screenshots)