Report dashboard
Demo react application using Netlify functions
Live demo deployed here: https://report-dashboard.netlify.app/
Libraries used
Frontend:
- Project bootstrapped with Create React App
- React version 17 with typescript
- React google chart, for rendering a line chart
- React Material UI + lab, for some basic UI component: Box, Typography, Button, Loader, Alert, and Datepicker
- jest-fetch-mock for mocking the native javascript fetch api. Unit test are using jest.
Backend:
-
Netlify stateless functions with typescript.
Currently there is 2 functions:./netlify/functions/dashboard-data-api/dashboard-data-api.ts
is the simple GET API, called at every launch and when we click on "Filter"./netlify/functions/populate-data-api/populate-data-api.ts
erasing and re-generating a new set of random datas, called once and can be called one again by clicking "Generate new datas" in the bottom right corner of the footer
-
MongoDB free tier cluster for storing the set of datas.
-
For playing with dates I used date-fns which is more lightweight and functionnal than momentjs (it returns a Date clone object everytime)
Running the project
This project have been created with node LTS v16.14.0 and npm 8.3.1
With these pre-requish, here are the steps:
- netlify cli need to be installed globally
npm install netlify-cli -g
- Unzip or clone the project, and run into the project folder
npm i
- A
.env
file need to be added manually at the root of the repository, with this content:MONGO_DB_PASSWORD=<your mongo db password>
- And now for running both client and server the command is:
netlify dev
The server should now be available at http://localhost:8888
Running the tests
The units test can be run with
npm test
The tests are also running on every push with github action:
./.github/workflows/on-push-master.yml