isabelxklee/ember-collective

A source for anti-racism education and supporting the Black Lives Matter movement.

Ember Collective 🔥

Ember Collective is an educational resource for anti-racism and supporting the Black Lives Matter movement. You can browse non-profit organizations to support, interact with the Police Brutality Tracker, and send donation match challenges to other users.

• Website
• Link to backend
• Project tracker

Table of contents

• Getting started
• Features
• Tech stack
• Tools

Getting started

1. Install the Rails backend

2. Install Node.js and npm

   $ brew install node
   

3. Clone this repo and cd into the directory

4. Install all dependencies

   $ npm install
   

5. Make sure the Rails server is already running and open up a new terminal to run this app

   $ npm start
   

Features

Police brutality tracker

• Displays an interactive map using the Mapbox API
• Pulls data about police brutality events from an external dataset provided by Mapping Police Violence
• Converted +7,000 lines of data from a CSV file to a JSON file

Browse organizations

• View a list of non-profit organizations and mutual aid funds that support the Black Lives Matter movement
• Filter organizations by tag or search for keywords, titles, and locations
• Users with accounts over 2-days old can nominate new organizations and verify existing organizations' information

Donation match challenges

• Users can challenge each other to match donations to an existing organization on the site
• Built self-referential relationships to join the logged in user with another user

Education resources

• Browse anti-racism and police abolition resources by tags

Memorial page

• A memorial page for the Black people that we've have lost to police brutality and racial violence.
• Remember their names, learn their stories, and support their families' gofundmes and foundations.

Global state management

• Used Redux to globally manage the application state

React components

• Created +20 React components and organized the code structure by separating them into feature-specific folders
• Implemented inverse data flow to send props down and up between parent components and child components
• Used asynchronous fetches to pull data from the Rails backend

ActiveRecord associations

• Designed 10 database models that have has_many, belongs_to and has_many through associations
• Used ActiveModelSerializers, which turns model attributes into JSON object keys

Tech stack

• React.js
• Redux
• Ruby on Rails API (Backend: https://github.com/isabelxklee/ember-collective-backend)
• PostgreSQL
• HTML/CSS
• Active Record

Tools

• Rack CORS
• ActiveModel::Serializer
• BCrypt: Ruby binding the OpenBSD bcrypt() password hashing algorithm.
• Geocoding API: The Geocoding API is a service that provides geocoding and reverse geocoding of addresses.
• Mapbox API: Mapbox GL JS is a JavaScript library that uses WebGL to render interactive maps from vector tiles and Mapbox styles.
• Moment.js: Parse, validate, manipulate, and display dates and times in JavaScript.
• Pluralize: Display plural or singular form of a word based on a count.
• React Router: React Router is a collection of navigational components that compose declaratively with your application.
• React Scroll to Top Button: React Component for a fixed scroll to top button.

Live demo

https://embercollective.org

ember-collective's Issues

Create Verification action for orgs.

AC:

• Create POST request.

Globally format date and time.

AC:

• All dates and times should be formatted to be easily read.
• Check out: https://github.com/moment/moment

Rethink the Police Brutality Tracker.

Maybe turn it into a map showing Black-owned businesses?

Hook up the FilterOrg component to the global state.

AC:

• Updating the search_term value in the filter function should update the same key in the global state.

Fix slow loading problem for the police brutality tracker.

AC:

• Add a table listing all the police brutality events instead?
• And only show 1000 markers on the map?

Add on click event handlers for map markers.

AC:

• Allow users to click on map markers.
• Display info about victims in pop-up.

Restrict new users from nominating and verifying organizations.

AC:

• Users can only access nominate and verify if their accounts are 2 days old.

Add user's receivers to redux.

AC:

• The current user's info in the global state should include their receivers.
• Update the DonationChallenge component to reflect this change.

Add more seed data for resources.

• https://skokielibrary.info/lists/527/black-lives-matter-a-reading-list-for-adults/
• https://www.niemanlab.org/2020/06/its-time-to-change-the-way-the-media-reports-on-protests-here-are-some-ideas/
• https://ssir.org/articles/entry/the_bias_of_professionalism_standards
• https://www.thenation.com/article/archive/what-is-prison-abolition/

Organization filter should not include descriptions.

AC:

• Search terms should only look at the names and locations of organizations.

Note:

• The following code does not filter out description keys.

      orgs = this.props.orgs.filter((org) => {
        return Object.keys(org).some(key =>
          typeof org[key] === "string"
          && org[key] !== "description"
          ?
          org[key].toLowerCase().includes(this.state.searchTerm) : null
        )
    })

Make app responsive for mobile.

Add delete functionality for donation match challenges.

AC:

• Show "Donation completed" button in Received Challenges section.
• Clicking on the button will delete the challenge.
• But retain the # of donation match challenges in the user's stats?

Limit description character counts for organizations on the homepage.

AC:

• Descriptions should be truncated to only show 150 characters on the homepage.

Post-account creation actions

AC:

• Creating an account should automatically log the new user in.
• Successful account creation should take the user back to the Hub.

Users can view each other's profiles.

AC:

• Change Routes and Links so that users' profiles are /users/:id rather than /profile
• Donation match challenge feature should not be shown for non-logged in profiles

Stop localStorage from resetting on browser refresh.

AC:

• Refreshing the page should not reset localStorage.

Fix no token warning for police brutality map.

Notes:

• 403 forbidden error – could be related to URL restrictions
• https://docs.mapbox.com/accounts/overview/tokens/#url-restrictions

Fix map rendering.

• change mapbox API permissions

FilterOrg component should change the organizations that are displayed.

AC:

• Entering an input in the FilterOrg component should update the results displayed on the page.
• New results should be shown without refreshing the page.

Write validations for Organization instances.

AC:

• website and donation_link attributes should be a valid links.

Show received donation match challenges on the profile page.

AC:

• Show inbound donation match challenges on the user's profile.

Create a settings page for the User.

AC:

• User should be able to change their username, email address, and password. They should also be able to delete their account.

Fill out About page.

AC:

• Info about me
• Why I made Ember Collective
• Contact information
• Acknowledgements to people who helped

Connect the Create Account component to the backend.

AC:

• The Create Account form should add new data to the backend.
• If the user successfully creates an account, they should be taken to the logged in state of Browse the Hub
• Display error messages for input validations

Add scroll to top button on mobile.

• AC:

• show a "scroll to top" button on mobile views
• only on home page, police brutality tracker, resources, and memorial page
• source: https://www.npmjs.com/package/react-scroll-up-button

Show prison abolition and anti-police brutality resources and orgs on the police brutality tracker.

Resources:

• http://www.campaignforyouthjustice.org
• http://www.realcostofprisons.org/links.html#allied
• https://www.themarshallproject.org/records/4766-prison-abolition
• https://prisonerswithchildren.org
• https://www.citybureau.org/afterthetrial
• http://www.cjcj.org/index.html

Finish building POST request for donation match challenge.

AC:

• Sending a donation match challenge should create a new instance of a donation_challenge.

Create a persistent nav bar with all the links.

AC:

• Nav bar should show on all pages
• Guest Links: Browse the Hub, Create Account, Login
• Logged In Links: Browse the Hub, Nominate, My Profile, Logout

Pull data from the police violence json file to the frontend.

AC:

• Use the data to populate Google Maps.

Seed more data about organizations and bail funds.

AC:

• Do research and add more seed data for organizations and bail funds.

Write validations for User instances.

AC:

• email_address should be a valid email address.

Create a profile page.

AC:

• Logged in users should be able to access their profile page from the NavBar component.
• Profile page should contain:
• Username
• Join date
• Activity states (nominations, verifications, sent donation match challenges)
• Donation match challenge feature

Add more organizations.

Black Table Arts
http://www.blacktablearts.com

Prison Book Program
https://prisonbookprogram.org

The Audre Lorde Project
https://alp.org

House of GG
https://houseofgg.org

FOR THE GWORLS PARTY
https://www.instagram.com/forthegworls/

Fix how # of orgs is displayed in the homepage.

AC:

• Showing 10 organizations shouldn't be its own card.

Add gofundme campaigns for the families that have experienced police brutality.

AC:

• Display under police brutality map.
• Show names, pictures, short descriptions, and gofundme links.

List of people:

• Breonna Taylor
• Elijah McClain
• George Floyd
• Javier Ambler
• Manuel Ellis
• Tamir Rice
• Trayvon Martin

To add:

• Ahmaud Arbery
• Freddie Gray
• Michael Brown
• Toyin Salau
• Sandra Bland
• Nina Pop
• Eric Garner
• https://www.them.us/story/six-black-trans-women-were-found-dead-in-nine-days
• https://www.them.us/story/four-incidents-of-transphobic-violence-reported-over-the-past-week

Allow users to send donation match challenges as a link.

• Send it as an email?
• What does this look like?

Logged in user state

AC:

• NavBar links should change depending on the user's logged in status
• User's logged in status should be saved in the backend somehow.

Fix donation challenge logic for setting user IDs.

Bug:

• Receiver ID and Sender ID are set as the same.
• Therefore, received donation challenges are not showing up on anyone's profile pages.

Handle reset function doesn't clear out the input field.

AC:

• Clicking on the "Clear search terms" button should clear the filtered organizations and clear out the input field.

Fix multi-filter function for orgs.

AC:

• When a user types in the search bar, it should reset the selected tag value

Problems:

• If a tag is selected, the search bar doesn't work
• But tags are able to override search bar inputs

Notes:

• https://medium.com/better-programming/creating-a-multi-filter-function-to-filter-out-multiple-attributes-javascript-react-rails-5aad8e272142