MutualAid.World App

MutualAid.world is a grassroots crisis response project. We’re a global community of developers, designers, project managers, lawyers, data scientists, strategists, writers, and translators creating apps to help people help each other.

Learn more about us at MutualAid.world
Explore the docs »

Report Bug · Request Feature

Table of Contents

• Table of Contents
• About the Project
  • Built With
• Local Development
  • Prerequisites
  • Repo setup
  • Adding Routes to the App
• Contributing your code, and getting involved
  • Formatting your code
• Test Data
• Accessibility
• Deployment

About the Project

We're making it safe and easy for communities to provide mutual aid.

MutualAid.world is a global community of contributors making small acts of kindness seamless. We build software to meet the direct needs of local organizers, making it safe and easy for people to help each other during times of crisis.

Built With

• React.js
• Material UI
• Typescript
• Firebase

Local Development

Here are a few geting started steps to help get set up for local development.

Prerequisites

• Node.js
• Npm (Comes with Node.js)
• Java

Repo setup

1. Fork this repo

2. Clone the repo

   git clone https://github.com/your_username_/resilience-app.git

3. Install NPM packages

   npm install

4. Create a local environment file from the sample .env.sample in the project root. From your project root run:

   cp .env.sample .env

5. Find the appropriate keys in in the #resilience-app channel under Pinned Items and fill in your .env file according to that.

6. Install firebase-tools and set up your local environment

   npm install -g firebase-tools

   This should install the latest version of firebase cli add firebase to your path.

   firebase login

   This will pop up your browser and allow you to login. Login using a google handle. Ask on Slack (#resilience-app or #resilience-dev channel) for access to the firebase project before running the next command. Tag one of: Paul Mendoza, Tuan Nguyen, Miles Thompson if they don't pick it up.

   firebase use default

   This is needed to ensure that the project-id is set in your environment.

7. Start your local development server with

   npm run build
   npm run dev

   NOTE: On local development environment, you are always an Organizer.

Adding Routes to the App

1. Decide what URL the new app route is and put it in src/app/routing/routes.ts. Please try to use meaningful variable names for the route, they don't need to be exactly the same as the URL.

2. Define the React routes in src/App.jsx using our <AppRoute /> component. It's a wrapper for the React <Route /> component, but it is aware of authentication and authorization concepts.

3. Set appropriate permissions for that new route in src/app/routing/RoutePermissions.ts. The set of permissions we have defined so far are here: src/app/model/permissions/Permissions.ts.

If you're not sure or if you don't see something that matches your usecase of your new route, please bring it up for discussion in Slack (#resilience-app or #resilience-dev channel). It's not always clear what should be a permission and what should not be, however, the rule of thumb is that we focus on CRUD operations.

Note: A route will be inaccessible (404 Page Not Found) if you:

• don't define the route in src/app/routing/routes.ts
• don't define any permissions for the route in src/app/routing/RoutePermissions.ts. We consider the route as not ready because it hasn't been configured.

Contributing your code, documentation or design, and getting involved!

See CONTRIBUTING.md for more details on how to get involved as a developer writing code and squashing bugs, a documentarian writing and improving our documentation or a designer looking to offer everything from design research/insight to graphics, User interface and visuals.

Formatting your code

This project uses ESLint and Prettier to handle all opinionated formatting. Install your favorite editor ESLint and Prettier plugin to set up any auto formatting in your own editor.

To format this project, simply run

npm run format

Our CI checks will not pass if any of our ESLint rules; formatting checks can be easily passed with a commit containing the changes made by npm run format

Test Data

When running the app locally, you can test the phone verification sign-up flow by entering any of the phone number / verification code combinations listed below (the leading "1" should be filled in for you):

Regarding the data schema and how to generate test data, go to scheme/README.md

Accessibility

Using react-axe as a library to find accessibilty warnings and errors. Please check the console for warnings or errors from react-axe before committing.

Deployment

For deployments we're using firebase hosting which allows us to deploy to multiple different environments.

Each of the commands below will require access to the respective firebase project for an authorized deployment.

For deploying to our staging environment:

$ npm run deploy:staging

and for production:

$ npm run deploy:production