This is the React.js frontend for Speak for the Trees! See below for help with setup and making changes.
Use the package manager yarn to install all the dependencies for our frontend.
yarnAfter that, request a GoogleMaps API key in the SFTT Slack channel and put it in the .env.development.local file as REACT_APP_GOOGLE_MAPS_KEY. Your frontend should now be ready to go! Run yarn start to check that everything compiles as expected.
In the project directory, you can run:
Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.
The page will reload if you make edits.
You will also see any lint errors in the console.
Runs all 4 lint, type check, and test commands below.
This command is useful to check that your branch will pass all the CI checks and allow you to merge your PR.
To lint and fix your files.
This is an easy fix for any lint errors you might encounter.
To lint and fix your files.
This is an easy fix for any prettier errors you might encounter.
Type checks your code.
Also run with yarn check, but useful if you only want to type-check your changes.
Runs all unit tests.
Also run with yarn check, but useful if you only want to run the unit tests.
Inside the source folder, you'll find components, containers (pages), and utilities.
Each page has its own container, and each container is comprised of components.
App.tsx is responsible for rendering each container as its own route.
We use styled-components as our CSS-in-JS solution in combination with Ant.D components.
All our pages and components are first designed by our amazing designers in Figma. To see the designs for the Speak for the Trees frontend please go here. You need permission to view this file, which you can request in the SFTT Slack channel.
Pull requests from any C4C members are welcome. For major changes, please open an issue first to discuss what you would like to change.
Please make sure to update tests as appropriate.