This is a data visualization app that display tree census data and some other things. This is the front-end of a full-stack app that fetches and displays data that has been processed by the corresponding Python/ Flask backend. It'll run on React and D3 with React Context, and Hooks to handle global app state(Redux is probably overkill).
The app should show the data that it fetched from the backend as graphs.In addition, we need to be able to navigate between the different charts that we can generate and show. Pretty straight-forwards requirements, making mock-ups is kind of overkill since the way the user navigates through the app is fairly simple.
Post v1.0 could see a couple of things added in. Some of them are listed below:
- Add an option to render as tables instead of bar charts
- Improvements to ensure accessibility standards compliance
- Jest Component tests to accompany Cypress e2e tests
- Add pages describing tree species
- Add tree maps(would get into trees as data structures as a bonus)
You'll need to clone the backend associated with this app, here's the Github repository for it. Once you set up the repo on your local environment, you can set up the front-end by cloning this repository:
git clone https://github.com/wilsonj806/nyc-arbor-logger.git
In addition, you'll need Node.js(and npm which comes included) to run and install whatever dependencies this app has.
Once you have the above done, change into the cloned repo's directory and run npm i.
Then run the below to start the app and enjoy!
npm run start