Invoice Manager

  This take-home project is called the Invoice Manager. This tool allows you to manage an example invoice JSON.  

Features

Bucket #1

• The user should be able browse through the line-item data as either a list or table (ie. pagination or infinite-scrolling).
• The user should be able to see each line-item's billable amount (sub- total = actuals + adjustments).
• The user should be able to see sub-totals grouped by campaign (line- items grouped by their parent campaign).
• The user should be able to see the invoice grand-total (sum of each line-item's billable amount).
• The user should be able to sort the data.

  Thoughts/Why Chosen?

  • A paginated List/Datagrid can almost be considered a necessity of most, if not all, enterprise applications as it is usually the most efficient way to view/manage large data sets.
  • Given the assumed intention of the application (to view/manage a list of campaign invoices), being able to display both the billable amout of each line item and the subtotal for a given campaign was a critical feature for the application to be useful.
  • I would add full CRUD for the campaigns/line items, as well as archiving, reviewing, and comments if given more time to implement those features as they would require a significant time investment for planning/infra setup/development, beyond what I can currently commit to for a take home project.

Bucket #2

• An integration into an external service that makes sense (eg. a currency conversion service, an export to Amazon S3, etc)
• The user should be able to filter the data (ie. by campaign name, etc., should affect the grand-total).

  Thoughts/Why Chosen?

  • I choose to integrate a currency conversion service (openexchangerates.org) because I believe it satisfied a valuable use case given that there invoices/totals are highly visible, and it easy to assume that a user would enjoy the convenience of being able to choose which currency monetary values are displayed in.
  • I felt was also an incredibly necessary feature to implement due to the (potentially) very large data set. It's one of the very first things that a user may want to do.

Tools/Languages

• Dev Enviroment/Build Tool
  • NextJS
• UI Framework/Language
  • React / TypeScript
• Design System
  • Material UI (MUI)
• Unit Testing
  • Jest

How To Run

Requirements:

• node >= v14.21.3

Starting the App:

1. Clone the repository locally, then run the following:

$ npm install # Install dependencies (required for every step hereafter)

2. Sign up for a free (or use an existing) API Key from https://openexchangerates.org/.
3. Create an .env file in the root directory with the following environment variable and include the API key from the previous step:

NEXT_PUBLIC_OPEN_EXCHANGES_APP_ID="INSERT_APP_ID_HERE"

4. Run the following command:

$ npm run dev # Start the development server

5. Open http://localhost:3000/ in a browser to view the application.

Create Production Build:

$ npm run build

Running Tests:

$ npm run unit-test

Running Linter:

$ npm run lint