invoiceGenie

An application that helps to track advertisements placement for a publication.

Live Site

https://invoice-frontend-wiay.onrender.com

Login with the following:
Email: [email protected]
PW: geNie@89757

Screenshots

Main Features

• Create insertion orders for sales of advertising space
• Create invoices based on details in insertion orders
• Invoices uses monthly exchange rate taken from MAS
• Add payments to invoices
• Overview of all advertisements space sold for each issue
• Add administrators to the application with Auth0 authentication

Tech Used

• Frontend: React
• Backend: Express.js
• Database: Sequelize (ORM), PostgreSQL
• Routing: React Router
• UI: Material-UI
• Storage: Firebase
• Forms: React Hook Forms
• Authentication: Auth0
• Cron Job: Cron
• PDF Export: jspdf
• Puppeteer for Web Scraping: Puppeteer

Setup

1. Clone repo to local

2. Configure .env file, make sure to get your own API keys stated below and insert it into your .env file

   • If unsure where to get API keys, refer to the Tech Used for the documents

   REACT_APP_DOMAIN= <Auth0 Domain>
   REACT_APP_CLIENT_ID= <Auth0 client id>
   REACT_APP_AUDIENCE= <Auth0 app audience>
   REACT_APP_DB_SERVER= <Backend server URL>
   REACT_APP_FIREBASE_API= <Firebase API key>
   

3. npm i to install all dependencies

4. Clone and setup backend at invoice-app-backend

5. npm start to run the application

Entity Relationship Diagram (ERD)

Furture Features

• Create credit notes to offset/cancel invoices
• Send insertion orders and invoices directly to clients
• Export all invoices and insertion orders into Excel file
• Send email reminder to administrator on the outstanding invoices
• Create annual sales report