Raheem

You can find the deployed project at https://master.d2qsd1m3f8a69k.amplifyapp.com/

Contributors

Alexander Cooter	Susheela Bhat Harkins	K Parrish	Chad Snyder	Christopher Hernandez

Optional examples of using images with links for your tech stack, make sure to change these to fit your project

Project Overview

[Trello Board] (https://trello.com/b/kWzBgwRD/labs-22-raheem)

[Product Canvas] (https://www.notion.so/Raheem-org-658df791ef9d4a57ab27cc99932ca769)

[UX Design files] (https://www.figma.com/file/RVXuKcfQniiux59PHfUbnY/Raheem%2C-Joseph-%26-Michelle?node-id=177%3A6)

Description

Raheem is an independent online service that helps people take action against police violence. We're a startup non-profit, based in Oakland, CA with the mission of bringing the voices of people impacted by police violence into the conversation to end it; holding individual officers accountable; and building policy based on community experience.

Key Features

• Give people who have experienced police violence a reason to tell their story and make it easy for them to do so.
• Showcase those stories for other community members, media, activists, and policymakers.

Tech Stack

Front end built using:

React.js, Context API, styled-components, Material-UI, react-router-dom, react-hook-form

Why did you choose this framework?

• React.js provided us with a familiar framework to develop a lightweight, client-side routed application for our stakeholder.
• With little need for an extensive global state management system, React's built in Context API allowed us to manage our form state accross the application.
• styled-components provided us the flexibility of styling with vanilla CSS, with the added power of styled-components to design our application directly in line with the UX team's vision. Material-UI was used for some more advanced components such as the rating slider on the Report page.
• react-router-dom provided us great client-side routing to develop a fast, responsive application.
• react-hook-form provided great form building and validation.

Front end deployed to AWS Amplify

Back end built using: Firebase

Firebase

Environment Variables

In order for the app to function correctly, the user must set up their own environment variables. There should be a .env file containing the following:

*  REACT_APP_apiKey
*  REACT_APP_authDomain
*  REACT_APP_databaseURL
*  REACT_APP_projectID
*  REACT_APP_storageBucket
*  REACT_APP_messagingSenderId
*  REACT_APP_appId

Content Licenses

Image Filename	Source / Creator	License
Back.svg	Cole Bemis	MIT
OfficerPlaceholder.svg	Dylan Feltus	MIT

Testing

Jest and React Testing Library were used to test the frontend.

Installation Instructions

To install this repository, simply clone the repository, and then run the following commands.

• cd raheem/
• npm install OR yarn install
• npm start OR yarn start

Other Scripts

• npm t - runs tests in the __tests__ directory and for Firebase in the __tests__ folder of TestComponents

Attribution

These contribution guidelines have been adapted from this good-Contributing.md-template.

Documentation

See Raheem Backend Documentation for details on the backend of our project.