Demo Application

This lesson walks us through a react application that integrates FreshBooks APIs. We'll use the endpoints related to the following operations in the application:

• Generate an invoice

• Details of an invoice

• Send an invoice by email

• View all invoices

• Add payment records

Remember: Since it is a demo application, the data and the price values are fixed.

Application workflow

Click the “Run” button in the widget below to run the application. Once the application has started, click the URL against “Your app can be found at:” to view the application.

1. The home page shows some example categories, "Homes," "Cars," and "Laptops." Clicking any category shows some sample items from that category, and we can add the items to the cart.

2. The cart page shows the status of the items we have added so far. We can make changes in the quantity of the added items; even we can delete them and go back to add more items. Everything is handled locally thus far, and no API calls have been made as yet. Clicking the "Generate Invoice" button on the cart page makes the first API call to generate an invoice.

3. The "All Invoices" page shows a list of invoices available in our FreshBooks account. We can have a detailed view of an individual invoice by clicking the "View" button. We can add a payment record and send this invoice to the client.

Note: We use a custom hook, useFetch, defined in useFetch.js to fetch the data from any API endpoint. Besides, we have some utility functions to generate and send invoices and add a payment record.

The access token is only valid for 12 hours. If your access token has expired, you can regenerate it using the "Regenerate the Access Token" lesson.