A website to track global self reported cases and predict future outbreaks. See our About page for more background on the project.
If you are interested in contributing to our project, read our contributing guidelines first.
First, copy over the sample.env file to .env
mv sample.env .env
You will need a few API keys for the map, geocoder, authentication, and database to work correctly. Luckily as of this writing, they are all free for development purposes.
Sign up on Mapbox and copy your
access token into the REACT_APP_MABPOX_TOKEN
variable in the .env
file. This
is required for the map to render correctly.
Create a Google Developer account and get an
API key. Make sure both the Places API and Geocoder API is selected. Set this
api key to the REACT_APP_GOOGLE_MAPS_API_KEY
variable in the .env
file.
Create a Firebase account and a new project. You
will only need the Authentication part of Firebase. Copy over the client
Javascript SDK variables into the # Firebase
section of your .env
file.
Finally, setup the API
backend and
run it in the background. Set the REACT_APP_BACKEND_URL
to the local URL that
it's running under (most likely http://localhost:8000
).
npm start
This uses Cypress and
cypress-firebase for
integration tests. You will need to get a serviceAccount.json
containing your
firebase service account credentials in your root directory for the login flow
to work. You can get this from the Firebase account you created.
Then, create a test account and copy the UID into the CYPRESS_TEST_UID
in your
.env
file.
Start the Node server (npm start
) in the background before running tests.
To run tests in headless mode:
npm run cy:run
To run the Cypress test runner:
npm run cy:open
For cypress tests, add the following property to your HTML elements to be easier to find them:
<div data-cy="example_element"></div>
This is more stable/maintainable than using classes or IDs and assures that they don't change.
types.ts
per directorycomponents
directory, that exports all other
components. This allows us to do things like:import { Component1, Component2 } from 'components';
utils/queries.ts
)async
/await
over Promisestype
over interface
, except for component prop types/summary
route and adding to DynamoDB daily, the
joining on the fly to countries geojson client-side)Some dummy data w/5k points if needed for clustering style work. Comes back as text and different schema tho, need to parse:
const parsed = JSON.parse(response.text);
setSubmittedFeats(parsed.features);
This is not crazy important since all values are from geocoded sources (as opposed to someone out in the field using GPS), but here are some notes:
{ "lat": 27.6648274, "lng": -81.5157535 }
).So we can either POST as-is from the geocode result, or round down to the recommended, or round down even further to save space (we aren't showing data at super-close zooms anyway). If it doesn't affect how the backend schema and POST requests are structured, then let's use the untouched value from Google unless we need to start nickel-and-diming perf gains.