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 31

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

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 prevelant 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
App.js
📂 components
- 📂 about
- 📂 AdminDashboard
- 📂 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
📂 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

Christopher-Barrett / human-rights-first-police-fe-a