-
Notifications
You must be signed in to change notification settings - Fork 0
Frontend Dev Specifics
The front-end is built with React.js. This makes maintaining data across pages flexible and useful. See below for specifics about the repository structure.
We scaffolded this project with Facebook's create-react-app. See documentation linked here on it.
In order to serve different pages to the client, we are using browser-side routing with react-router. See documentation linked here. This allows us to have a single page app that has multiple views. In this regard, when the user visits different "pages" on the website, their browser never reloads. This allows us to hold a user's state across pages on the client-side. It also allows a user's selections on one page to affect the content on another. This is a helpful feature.
In order to hold one source of truth on the data the app has loaded from the database, we built a single react component DataController.js that stores, loads, and serves all data to the client. This component does not render anything, it simply stores all of the data. Any loading of data or modifications to the current data processes should be performed in this file. The app then passes a reference to this component and its state down to each necessary component via props.
When we initially implemented this, we did not realize how large the app would grow (there are 35 different components). We therefore implemented this as a quick-win. Now that the scale of the project has grown, with future development, we would want to convert this infrastructure to Redux.
We are using Mapbox GL to view all geographic content on the website. Please contact [email protected] for access.
We are using Chart.js for the data visualizations. Check out their documentation linked here.