Invoice Web Application

This web app allows users to manage invoices efficiently, with capabilities for creating, viewing, updating, and emailing invoices to clients.

Technologies and Tools Used

1. Next.js
2. React.js (Frontend)
3. Node.js with Express (Backend)
4. MongoDB (Database)
5. Tailwind CSS and CSS (Styling)

Steps to Run

1. Download the ZIP file to your local system and extract it.
2. Open a terminal and navigate to the main folder, then run npm i to install all dependencies.
3. Navigate to the client folder and run npm i again to install frontend dependencies.
4. Go back to the main folder and run npm run dev to start the development server.
5. Open localhost:3000 in your browser if it doesn’t open automatically.

Features of the App

1. Invoice Dashboard:

   • The homepage displays all invoice summaries, including the client name, business name, email, phone number, amount, creation date, status, and whether the invoice is overdue (indicated by a red or green background).
   • Invoices can be paginated for easier navigation.

2. Financial Overview:

   • Track the total amount pending and the amount that has been paid.

3. Email Invoices:

   • Send invoices to specific clients via email. Upon sending, a notification confirms successful delivery.

4. Actions:

   • Send Email: Resend an invoice to the specified client.
   • Edit: Modify invoice details.
   • Delete: Remove an invoice from the system (see below for details on the deletion process).

5. Customer Management:

   • Add new customers by entering details such as name, business name, description, email, phone, and image URL.
   • Once submitted, a notification confirms that the customer has been created successfully.

6. Invoice Deletion:

   • Click the delete button to remove an invoice, and a confirmation popup will appear, prompting you to type “delete.”
   • After confirmation, the invoice is deleted, and a notification confirms the successful deletion.

7. Create New Invoice:

   • Use the Create Invoice button to initiate a new invoice.
   • A dropdown allows selection of any registered customer, and a confirmation popup appears after successful invoice creation.

8. Update Existing Invoice:

   • In the actions area, click the Update button to modify invoice details.
   • A confirmation popup will notify you when the update is successful.

Demo images of the Web App:

image 1:

image 2:

image 3:

image 4:

image 5:

image 6:

image 7:

image 8: image 9:

image 10:

image 11:

image 12:

image 13:

image 14:

image 15: