Skip to content

React + TypeScript front end using Ant.D component library. A tracking, reservation and maintenance platform to help https://treeboston.org/ expand Boston's urban forest. Data powered by https://github.com/Code-4-Community/speak-for-the-trees-backend-v2.

Notifications You must be signed in to change notification settings

Code-4-Community/speak-for-the-trees-frontend

Repository files navigation

Speak for the Trees Frontend

Coverage Status

This is the React.js frontend for Speak for the Trees! See below for help with setup and making changes.

Setup 🔧

Use the package manager yarn to install all the dependencies for our frontend.

yarn

After 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.

Available Scripts 🤖

In the project directory, you can run:

yarn start

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.

yarn check

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.

yarn lint-fix

To lint and fix your files.
This is an easy fix for any lint errors you might encounter.

yarn prettier-fix

To lint and fix your files.
This is an easy fix for any prettier errors you might encounter.

yarn type-check

Type checks your code.
Also run with yarn check, but useful if you only want to type-check your changes.

yarn test

Runs all unit tests.
Also run with yarn check, but useful if you only want to run the unit tests.

Code Walkthrough 💻

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.

Designs ✏️

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.

Contributing 🤝

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.

About

React + TypeScript front end using Ant.D component library. A tracking, reservation and maintenance platform to help https://treeboston.org/ expand Boston's urban forest. Data powered by https://github.com/Code-4-Community/speak-for-the-trees-backend-v2.

Topics

Resources

Stars

Watchers

Forks

Languages