bloomtech-labs/human-rights-first-police-fe-a

Project sponsored by Humans Rights First (http://humanrightsfirst.org) that visualizes user reported data around police use of force in the United States.

Human Rights First FE

Description

Our team is developing an interactive map that identifies potential instances of police use-of-force across the United States of America for Human Rights First, an independent advocacy and action organization. Here is a little the non-profit from their website:

Human Rights First is an independent advocacy and action organization that challenges America to live up to its ideals. We believe American leadership is essential in the global struggle for human rights, so we press the U.S. government and private companies to respect human rights and the rule of law. When they fail, we step in to demand reform, accountability and justice. Around the world, we work where we can best harness American influence to secure core freedoms. We know it is not enough to expose and protest injustice, so we create the political environment and policy solutions necessary to ensure consistent respect for human rights. Whether we are protecting refugees, combating torture, or defending persecuted minorities, we focus not on making a point, but on making a difference. For almost 40 years, we've built bipartisan coalitions and teamed up with frontline activists and lawyers to tackle global challenges that demand American leadership. Human Rights First is a non-profit, nonpartisan international human rights organization based in New York, Washington D.C., Houston, and Los Angeles.

Contributors

Labs 39

Luiza Coelho	Andrew Busby

Labs 38

Kelly Jerrell	Austin Carman	Ethan Edmond	Ahmed Serag	Jeremiah Candelaria

Labs 37

Alvin Joseph	Cooper Jackson	Devin Mitchell	Johnny Murillo	Ryan Dill	Tony Yang	Nicholas Cabuno

Labs 36

Jalpa Shah	Alex Pfeifer	Leon Nasswetter	Bradley Hubbs	Daniel Vargas	Ryan H.	Daniel B. Kim

Labs 35

Anas Abdelsalam Alex Ardanov Caroline Lucas Hairo Garcia Max Huckstepp Stephanie Enciso Will Berman Alexis Marroquin Anhutan Tran Casey Cerrito Joshua Samaneigo Jose Robles Jonathan Majors Damaris Garcia

Labs 35 Notion Document

Labs 34

Robert Petersen

Brandon Santos

John Chamberlin

Labs 33

Lindsay Deaton

Will Mondal

Paul Kim

labs 32

Samuel Lee

Michael Maton

Brett McAdams

Christopher Barrett

Labs 31

Victoria Mount

Maria Olsen

Sam Tarullo

Will Wearing

Previous Teams

Labs 30

Jason Long (Technical Project Lead)

Mark Rivera

Michael Rockingham

Jen Stewart

Deployed Product

Front End Deployed Site

Related Repos

Back End Repo

Data Science Repo

Getting Started

All Labs Engineering Standards must be followed.

Test Coverage

• To check test coverage run 'npm run coverage'
• Current coverage 55%

Environment variables:

• A sample .env file named .env.sample is provided:

REACT_APP_CLIENT_ID=""
REACT_APP_OKTA_ISSUER_URI=""
REACT_APP_BACKENDURL="http://localhost:8000"
REACT_APP_MAPBOX_TOKEN=""

Notable Libraries Used

• React
• Redux, React-Redux, Redux Toolkit
• React-Map-GL, Supercluster
• ChartJS
• Axios
• AntDesign, Styled Components

User Flows

• User can see clusters of incidents on a map that breaks apart as they scroll in so that they can see more specifically where each incident in the cluster occurred.
• User is able to click on a data point within the map and view more details including date, description, tags, and sources.
• User can view charts by state or by use of force tags to see where incidents are more prevalent and what type of force is most commonly used.
• User can view incident data and browse through them using pagination
• User can view trends in data with data visualizations in the form of graphs
• User can download the publicly available data in CSV or JSON format

Project File Hierarchy

Where to find important files in this project:

📂 src

• index.js <- project entry

• index.css

• App.js

• 📂 components

  • 📂 about

  • 📂 AdminDashboard

    • 📂 AntTable

  • 📂 Footer

  • 📂 graphs <- this has multiple sets of assets for the graphs

  • 📂 Home

    • 📂 Map

  • 📂 incidents

  • 📂 Login

  • 📂 NavBar

  • 📂 Stats <- stats carousel for home page

  • 📂 timeline <- timeline component for home page

  • OktaWrapper.js <- wraps Okta's Security component for use with React Router's useHistory hook

• 📂 hooks

  • useFetchIncidents.js

  • useMapSearch.js <- date and geographic filtering helpers

• 📂 store

  • index.js <- Redux store

  • *Slice.js <- Redux Toolkit slices

• 📂 utils

  • oktaConfig.js

  • test-utils.js <- Jest/React Testing Library setup

• 📂 assets

  • 📂 BloomTechAssets <- BloomTech Logos

• 📂 styles

Architecture

• DS backend scrapes and shapes data
• Web BE gets data from DS backend through a cron job and updates Web Database
• Web FE can use endpoints to fetch an incident by or all incidents (currently we are only fetching all incidents at once)

End Points

• Incidents

  • https://humanrightsfirst-a-api.herokuapp.com/incidents/getincidents --> returns an array of all incident objects
  • https://humanrightsfirst-a-api.herokuapp.com/incidents/gettimeline --> returns events for the timeline on the map component
  • https://humanrightsfirst-a-api.herokuapp.com/incident/:id --> returns single incident object if the incident_id passed in is valid