6 Taking the next step with Next.js

 

This chapter covers

  • Using Next.js to build a dashboard
  • Using Material UI components
  • Using WireMock to help stub our API calls

Until this point, we have worked through research spikes to explore creating and parsing an ACH file, creating a database, and generating APIs to access our data. In this final research spike, we’ll start working on our application dashboard. A dashboard is the user interface (UI) from which it is possible to upload and view files, view records, and obtain any other useful information. While there are plenty of options available for creating a UI, we have decided to go with Next.js as it is built on React, which is also very popular. However, since everything is powered by APIs, the UI could be swapped with Remix, Vue, Angular, or any other technology used in our company.

Chapter 4 showed us how to take an API-driven design approach. While we have not built all our APIs by switching to the UI yet, we will begin to see what data we want (or need) to be returned as part of our APIs. By stubbing out the data fields, we can ensure our UI is making exactly the same calls required for the real APIs.

6.1 Getting started with Next.js

6.2 Creating an upload page

6.2.1 Testing our upload page

6.3 Refactoring our navigation

6.4 Converting recent order to recent ACH uploads

6.5 Mocking our ACH uploads data

6.5.1 Adding WireMock to Docker

6.5.2 Setting up mappings in WireMock

6.5.3 Accessing endpoints with axios

6.6 Expanding the UI with an ACH batch view

6.6.1 Defining our WireMock data for the ACH batch view

6.6.2 Updating the dashboard to take us to the batches screen

6.6.3 Displaying batch details

6.7 Creating a ScatterPlot component

6.7.1 Scatterplot component

6.7.2 Scatterplot custom tooltip

6.7.3 Scatterplot custom ticks

6.7.4 Using colors for the chart

6.8 Deploying the dashboard in Docker

Summary