Host a BI report using ReactJs+Firebase with Auth — part1 Prototype and UI setup(create-react-app+mui+plotly)

Sometimes team members without PowerBI access might want to check your report; at least, it is the case for me. I have processed price increase suggestions for a list of customers. It needs to be sent regularly. Instead of providing excel files, I prefer to set up a simple webpage with a more appealing interface. This is easy to do with numerous frontend frameworks now. I’d like to summarise how I create and host the webpage into three parts:

1. part1 — Set up primary webpage and layout
2. part2 — Data + Context API + Interactions
3. part3 — react-router (Routing)+ Auth set up
4. part4 — Firebase Host + Auth

Simple prototype

The prototype is simple, a table on the left listing all the customers with some basic info, and click on one customer, a graph on the right will show the historical price for that customer.

The libraries used for creating the report page is Create-react-app, mui and plotly.js.

Create-react-app