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

  1. part1 — Set up primary webpage and layout
  2. part2 — Import data and render different data dynamically
  3. part3 — Host it and add authentication

Simple prototype


npx create-react-app report
cd report
npm start
Default page created by Create-react-app

Mui: React component library

//install basic packages
npm install @mui/material @emotion/react @emotion/styled
// install icons
npm install @mui/icons-material
  1. Layout: box & paper
npm install react-plotly.js plotly.js
<Box sx={{ width: '100%', display: 'flex' }}>



Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Renee LIN

Renee LIN

Passionate about web dev and data analysis. Huge FFXIV fan.