/resilience-app

Mutual Aid World - Local Resilience App. Providing ready made, constantly evolving software to meet the needs of local mutual aid projects.

Primary LanguageJavaScriptGNU General Public License v3.0GPL-3.0

MutualAid.World App

Github CI Status Heroku deploy status Total alerts


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

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

Local Development

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

Prerequisites

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:

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):

Phone Number Verification Code User Role
7777777777 123456 Organizer
2223334444 123456 Volunteer

For testing payments like donations or buying a foodbox you can use the following paypal credentials (alternativly if you need to see the invoices sent and recieved you can create your own sandbox account here)

Email Password
sb-lo7o91424981@personal.example.com 5XqcCb)u

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