This web version allow NGOs to register yourself and manage its incidents. All the resources used by this application comes from its API.

• Screenshots
• Installing
  • Configuring
    • .env
    • API
• Usage
  • Reactotron
  • Register & Login
  • localStorage
• Running the tests
  • Coverage Report

Click to expand.

Easy peasy lemon squeezy:

$ yarn

Or:

$ npm install

Was installed and configured the eslint and prettier to keep the code clean and patterned.

Configure your environment variables and remember to start the API before to start this app.

In this file you may configure the API's url. Rename the .env.example in the root directory to .env then just update with your settings.

Start the API (see its README for more information). In case of any change in the API's port or host remember to update the .env too.

To start the app run:

$ yarn start

Or:

npm run start

The project comes configured with Reactotron, after install just open it, then as soon as possible Reactotron will automatically identify new connections.

Maybe be necessary refresh the page.

When registering a new NGO notice that after send the form data a success toast message will appers at the right top corner of the screen with the NGO's ID, memorize or note it. At login page just paste the ID in the input and press ENTER or click on the button below to login.

The project saves NGO's data into a localStorage key: bethehero. Before use this data you need parse the data to a JavaScript object with JSON.parse function. Below you can see fictitious data:

{
  "id": "98a111d1",
  "name": "NGO Doe",
  "token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibWVzc2FnZSI6IkVhZSwgdHVkbyBibHo_IiwiaWF0IjoxNTE2MjM5MDIyfQ.MgLoxvRXoXeEHv36H4KuUQ3kfVl66uSOzJYll2IsZHE"
}

Jest was the choice to test the app, to run:

$ yarn test

Or:

$ npm run test

You can see the coverage report inside tests/coverage. They are automatically created after the tests run.