call-for-code-for-racial-justice / five-fifths-voter

Five Fifths Voter is a web application tool designed to enable and empower Black people and others to exercise their right to vote by ensuring their voice is heard

Five Fifths Voter Solution Starter

This solution starter was created by technologists from IBM.

Authors

• Alexandria Leggett Product Offering Manager & Creative Director
• Andrea Lucas Product Offering Manager & Technical Director
• Yolanda Rabun Lead Generalist
• Denise Knorr Operations Director
• Evelyn R. Anderson Sr. Security & IP Advisor
• Sebastian Huynh Lead Designer
• David Nixon Developer
• Gerald Mitchell Developer
• Syd Bailey Developer
• Ann Umberhocker Developer
• Shrey Anand Developer
• Alexandra Devine Designer & IP Strategist
• Dylan Zucker Data Scientist
• Kristen Ray Data Scientist
• Chris Stefano Generalist
• Ricky Ellison Generalist
• Mike Boone Sr. Security & IP Advisor

What is the problem?

American History has shown that voter suppression has led to corruption and a weak democracy that does not reflect the will of the people. Voting has been perceived an intangible and unfair process based on restrictive local processes, changing requirements, regulations, an inability to access the correct voting location, and a lack of information. As a result, millions of minorities, especially Black people, have had their votes go uncounted, purged, or simply not submitted due to lack of faith and trust in the system.

The Five Fifths Voter solution starter focuses on addressing the key areas of voter suppression such as voter registration, voter ID laws, voter registration restrictions, voter purging, felony disenfranchisement, and gerrymandering all of which are contributors to disenfranchising minorities and people with disabilities. The solution helps with these challenges by providing a capability to help ensure disenfranchised minority voters are educated, empowered, and enabled to overcome setbacks incurred by voter suppression. Five Fifths Voter helps to identify the correct polling stations, notifies users of requirements needed for their state, and personal circumstances as it pertains to different types of voting, deadlines, and quick access to information.

The solution starter is provided as a web-based application that’s hosted on IBM Cloud and is available for both desktop and mobile browsers.

Video

Pitch

The Voting Rights Act of 1965 was enacted to prohibit racial discrimination in voting. Yet, history has shown the inequalities such as voter suppression have led to corruption and a weak democracy that does not reflect the will of the people.

The IBM Call for Code for Policy & Legislation Reform has developed a solution to support the voter experience that focuses on addressing key areas of voter suppression such as voter registration, voter ID laws, voter registration restrictions, voter purging, felony disenfranchisement, and gerrymandering, all of which are contributors to disenfranchising minorities and people with disabilities.

Five Fifths Voter is a cognitive solution designed to determine optimal voting strategies for each individual voter while limiting the impact of previous suppression issues.

How it works

Architecture

Datasets

• Google Civic Information API
• Google Maps API
• Vote.org Civic engagement tools
• The Voting Information Project
• Vote 411 Election Information

Technology

IBM technology

• IBM Code Engine

Open source technology

• Nuxt
• Carbon
• Tailwind

For developers

See the Getting Started document.

See the User Guide document.

Please read the CONTRIBUTING guidelines

Suggestions

See the issues list for a full list of items that are currently being worked in the Five Fifths Voter project. Issues marked as "top priority" must be considered first.

Solution Summary

For details, see Five Fifths Technology Summary.

Image credits

• democrat by Yi Chen from Noun Project
• Republican by Yi Chen from Noun Project
• Porcupine by Loritas Medina from Noun Project

five-fifths-voter's Issues

web app connection to services issues

• I have hard coded the services URL here
  https://github.com/embrace-call-for-code/embrace-the-vote/blob/cfdc3076dc10204257d25dc4484cf17f226171b2/.env.production#L1
  It should be specifiable in Open Shift environment variable or discoverable by the deployment. Not sure how to do that.
• If the API remains publicly available, we should add a APIKEY or other security

The current build environment variables should be in this repo

These should be added to .s2i/environment
https://docs.openshift.com/container-platform/3.11/dev_guide/builds/build_strategies.html#environment-files

YARN_ENABLED=true
YARN_ARGS=--ignore-optional
OUTPUT_DIR=dist

Team with Google?

The Google Civic Information API is a nice effort. Perhaps IBM can partner with Google on this effort.

A partnership could help solve #20 since early voting locations and ballot drop boxes seems like a natural extension of the existing Google code.

Perhaps a partnership with Google could also help with #18 since google has location rating already. Extending the ratings to the Civic Information API might be appealing.

twittter code returns dom element

in the interest of time I hacked in the twitter stuff.
Really it should render from a json list.

<ul id="example-1">
  <li v-for="item in items" :key="item.message">
    {{ item.message }}
  </li>
</ul>

something like that. Insteda I hacked it to just return the tweets already already wrapped in from the services API.
So

• services shoudl return json list of tweets
• TwitterChatter component should format list into ... well a list.

Change Thomas Jefferson quote in UI

@sydbails @eveandsn REMOVE the quote from Thomas Jefferson AND REPLACE WITH “My dear friends: Your vote is precious, almost sacred. It is the most powerful nonviolent tool we have to create a more perfect union.” – John Lewis 2012

Some responsive issues

• The page menu is cut off on small displays. Need to enable the hamburger menu to show pages.
• The tabs on the Journey page are not usable on smaller displays
• The grid seems off for some of the content - seems wider than allowed column width in some places. Needs investigation.

Update Voter Support page with additional links

@aleggett23 Please provide the links to add to the voter support page for convicted felons, voters with disabilities, etc. to receive assistance. Once links are received it will be assigned to Syd.

Run final vulnerability scan after defect remediation

Scrapers for all 50+ states

The "Vote Early" and " Deliver Your Ballot" pages both use mock data from the Georgia Secretary of State site. This data needs to be scraped/obtained from the state sites.

We did not find any states that currently deliver this information via API. It seems that California may be working on something but it's not clear.

I see 2 ways to get this data.

1. Scrape the data from the Secretary of State site for each state/territory. This is achievable but fragile and needs to be maintained.
2. Long term, perhaps IBM could offer to implement this API for each state. So for example IBM could work with the state of Georgia to provide an API that reads (probably) the datastore that the state uses to populate its website.

Complete the Journey Page/tabs

Hi Ann!

As discussed on the call, here's what I'll have you do:

• On the journey page, we have 5 tabs that link to 5 different components: Register, Absentee(Mail In), Vote Now, Vote Early, Deliver Ballot

1. The Register component will be the framework you'll use for all of the other pages. It utilizes a reusable PageLayout and MainContent component that will put everything in order.
2. Two of the pages (Vote Early & Deliver Ballot) both have maps wrappers. instead of images. I would utilize a free npm package that can display maps and markers for this.
3. One of the pages (Vote Now) is two Vue Carbon components. Let me know if you have trouble with these. If you can at least get them on the page, I can try and fix any styling.

I will comment here once I've merged my latest changes into master so you can use the Register component as a blueprint.

Map issues

• api keys seems to be missing from deployment

• Map not visible on absentee ballot drop off page - style issue

• Markers are not cleared when you switch between early/now on the Vote page

• Add more functionality to markers. I think I can add the address to the marker

• GA early voting locations are not on the map. These are not in the civic api and I need to swizzle our API to be able to include them.

• remove geonames.org attribution and data

Externalization Documentation Package

Marek, please list the items that will be contained in the documentation package that you are working on. Thank you

Scanning for vulnerabilities [88:2392] + fortifying solution [0]

The tools being used at the moment:

• OWASP - (CPA [software composition analysis]: CPE, CVE) Jenkins plugin - https://www.owasp.org/index.php/
• IBM Cloud Internet Service for Application level firewall

The report gives now:

• Vulnerable Dependencies: 88
• Vulnerabilities Found: 2392

Twitter code - AI Insights

I removed the secrets from #12 but if this code is redeployed to open shift/cloud the secrets need to be added to the deployment and used in the python code
https://github.com/embrace-call-for-code/embrace-the-vote/blob/da8a4f119e2da2c1e16c19852ecce30c627b1c7e/services/twitter/Embrace_Challenge.py#L9

This would be a good issue for someone looking to learn more about the deployment steps.

New Feature: Rate Polling Location

Description

This issue addresses the following new feature:

• A rating system for polling locations (A - F)
• An algorithm that uses different mediums and a cognitive system that determines what "grade" the voting location has
• A front end feature that allows users to see what "grade" their respective polling location and nearby polling locations have.

Update image links for Voter Journey pages

Update image links for Voter Journey pages to UI design

Options for showing users maps for poll/drop off locations

As discussed in the scrum meeting on 10/5, we need to make sure that we are presenting our end user with information on how to get to their respective polling location that works on both their mobile device and desktop.

Some of the items discussed were:

• Google maps API is expensive, so we'd opt for a free service that can handle showing the user a map if we go this direction.
• Maps are not useful/helpful/mobile-friendly if a user is viewing on a mobile-device.
• We are unsure if mobile devices will default to whatever application a user has selected to open an address.

I'm going to do some digging and address the following concerns with our UI/UX designer, Sebastian.

• How do mobile phones open address links?
• Should we provide links to an address, and let the phone decide how it will open said link, or should we include a map?
• Should we include a free map wrapper for all desktops, and once you're on a mobile device, just provide a link?
• How will this effect the UI and user impact on this page?

I will update this issue once I've completed some research and made a decision, and I will create a corresponding issue that addresses how we'll implement the map feature.

Syd

Privacy Statement

@eveandsn @mdboone06 Please provide a status on this issue

Wicked Certification

Yolanda, please advise if this task is complete

Add Copy to ALL pages.

@aleggett23 Alexandria will provide content for voter suppression to add to Why Vote page. This will be assigned to Syd once content is completed for upload.

Rate the polling place needs to be implemented

There is a preview of this functionality on the "rate the vote" page in this app. This is not currently part of the architecture diagram but deserves a lot of attention. This idea came late in the process so we did not get any code written. There is a lot of ideas around this though. I suggest a design thinking workshop just for this feature to scope what should be done.

Need to figure out a design to change the url called for "Secretary of State" information on VoteNow page

On the VoteNow component, I added a switch statement that acts on what state is selected. Somehow the URL for "Secretary of State" information needs to also be customized depending on what state is selected.

I tried to have a data element called sofsUrl which gets set in the case statement and then called by the button callback, but the data element isn't being set by the time it is used.

Backend Architecture

@davidnixon @GeraldMit @Shreyanand

Since we will be scraping data from multiple state government websites, we'll need to figure out where this data will be held and how we can access it on the front end. Let's get together quickly and discuss who will be in charge of building this, who will be in charge of scraping, which states are highest priority to scrape from (since this might be quite manual and take a bit of time) and if we need additional resources/engineers.

Unit testing strategy needed (CI/CD)

1. The services component needs a coverage test solution to be integrated into the CI/CD strategy. Probably with coveralls & mocha.
2. The UI also needs unit testing. See the recommendations from the Vue site for direction. https://vuejs.org/v2/guide/testing.html

Legal Clearance of Five Fifths Name

9.30.2020 Submitted Naming Request in Naming Tool - B41515
https://w3-03.ibm.com/marketing/namingtool/ntapp.nsf/NameRequestsByUser/3FC79A78AAF5A19F852585F8003CDFEB?OpenDocument

10.9.2020 - Submitted TM request in Anaqua - 96461241
https://ibm.anaqua.com/anaqua/Survey/Survey.aspx?SurveyAnswerGroupId=96461240

Twitter code needs some performance improvements

Clicking the button to see tweets works but results are delayed by about 30 seconds in my local testing. I did a very, very light analysis and it looks like the NLU and the Tone Analyzer both take a bit more than ½ second each and with 25 tweets that adds up to about the 30 seconds.

Possible solutions:

• Do not use Watson (Shey originally did this work with TextBlob instead)
• Combine the 25 tweets into one request to TA and NLU
• Something else (opinions welcome here)

Maybe the Watson docs have guidelines on performance?

@drealuc Do you have an opinion?

Trailing html in ballot drop off - also make scraper live

I think this is OK for now because this is mock data but lets look at this again when the scraper is live against the GA sos site.
Use this zip code to see the extra html 31624

Advance vote https://elections.sos.ga.gov/Elections/advancedVotingInfo.do

curl 'https://elections.sos.ga.gov/Elections/advancedVotingInfoResult.do' \
  --data-raw 'townId=001&SubmitCounty=Submit&nmTown=APPLING' \

How To Guide

@rkellis0 @ydknorr What is the status on completion of the How to guide?

update title

embRACETHEVote / embRACEtheVOTE

Scrape for Early Voter locations

See #20 for background
https://ballotpedia.org/Early_voting#Early_voting_by_state

• Alaska
• Arizona
• Arkansas
• California
• District of Columbia
• Delaware -- starts in 2022
• Florida
• Georgia
• Idaho
• Illinois
• Indiana
• Iowa
• Kansas
• Louisiana
• Maine
• Maryland
• Massachusetts
• Michigan
• Minnesota
• Montana
• Nebraska
• Nevada
• New Jersey
• New Mexico
• New York
• North Carolina
• North Dakota
• Ohio
• Oklahoma
• Pennsylvania
• Rhode Island
• South Dakota
• Tennessee
• Texas
• Vermont
• Virginia[3]
• West Virginia
• Wisconsin
• Wyoming

IBM Web Design Compliance Check

Denise, what is needed to complete this task?

Services issues

• Services API does not automatically restart when file changes in a directory are detected - probably just need to add nodemon package

• Services Dockerfile uses npm instead of yarn
  https://github.com/embrace-call-for-code/embrace-the-vote/blob/cfdc3076dc10204257d25dc4484cf17f226171b2/services/Dockerfile#L4
  I like yarn but its annoying to add it to Dockerfile. I think I have to download a tar and copy it in. I don't think there is a "FROM yarn" or anything like that. Maybe use npm everywhere? Or fix the yarn issue? Currently there is a yarn lock and a package-lock.json

• Default port conflicts with the main app. That means you have to start services first and then the main app.

https://github.com/embrace-call-for-code/embrace-the-vote/blob/cfdc3076dc10204257d25dc4484cf17f226171b2/services/services.js#L5
https://github.com/embrace-call-for-code/embrace-the-vote/blob/cfdc3076dc10204257d25dc4484cf17f226171b2/.env.development#L1

Google Civics API connection to Carbon Form

Description

Currently, we are using iFrames from vote.org to give users an opportunity to quickly fill out a form to see if they're registered to vote. This presents a few problems:

• Because we are using an iFrame, we are not able to control the styling of the form.
• The form itself does not align with IBM design patterns

Ask

• Create form component that can be reused (do not worry about styling here -- i can take over that)
• Form should connect to backend API call to Google Civics endpoint
• Form should have validations to ensure information being sent is pure/correct
• API calls should be made in services (I could be wrong about this, but I'm pretty sure this is where we're holding all of our calls)

Additional Information

This form will be used on 3 different pages:

• Check Your Status
• Register to Vote
• Request Absentee Ballot

These forms all look identical but may have different api end points -- I would research this a bit before getting started to ensure we don't have to go back.

Questions or concerns?

Slack me: @Syd, or comment on this issue. For Vue related questions, reach out to me directly, or #carbon-vue slack channel.

Wicked Proposal Submittal

WIcked Proposal information complete - awaiting Information on which DIrector and Vice President to list as 'required' reviewers. Proposal here: https://wicked-proposals.wdc1a.cirrus.ibm.com/proposal/05457317-089b-4352-b86d-64fe80881769

Add video instruction to Why Vote page

@aleggett23 @sydbails Syd will determine what are the policies for adding video to website

Add new tab "Our Mission" right before "Why Vote" tab

Re-design UI

UI designer should come up with a better design for this page's navigation
The widgets (iframes) for Check Your Status, Register, Mail In Ballot, & Vote Now -- Show Polling Location should all be reimplemented to remove the iframes. The vote.org widgets can be rewritten with APIs from vote.org but an arrangement needs to be in place with them. Start with https://vip.vote.org/ to see how to access APIs. The Show Polling Location can be rewritten with Google Civic Information API https://developers.google.com/civic-information
All the widgets need a UI designer update

Getting external API's approved for use from IBM

• Google Civic API's
• Google Maps API

Please include any others you think might be necessary.

Update "Get Informed" and "Vote Early" with rate polling location placeholder

@sydbails @aleggett23 Within the Voter Journey, we need to add placeholders on the Vote Now and Vote Early tabs for rating polling location.. Something like "Rate Your Polling Location Coming Soon!"

Need a UI to select county ... and other UI improvements :-)

This is hard coded for Fulton county currently

TESTING-Process To Follow For Testing and Reporting Defects

Let us keep all defects/bug fixes found inside of this issue so that we can keep track of what needs to be changed.

Application URL: http://embrace-the-vote-dev-dn.embrace-dev-ocp43-vpc-7ec5d722a0ab3f463fdc90eeb94dbc70-0000.us-east.containers.appdomain.cloud/#/

Following are the critical functions we need to test.
Please test all application functions by visiting each tab on the home page. Additionally, ensure these functions also work from the top left drop down menu on the home page
Why Vote – Confirm clicking on the link in the blue box on the home page or selecting the Why Vote tab, both bring you to the why vote content
Voter Journey – Confirm the follow tabs are displayed and that all functions on these sub-tabs are working - “Are you registered” “Mail In Ballot” “Get Informed” “Vote Early” Absentee Drop Off”
Get Connected – Confirm Facebook, Instagram and Twitter icons take you to those services; Put a name in the “Enter Candidate’s Twitter “ box, and then hit the Check button. It should return recent Tweets for the name entered. Try several names
Voter Support – Confirm resource links listed take you to the intended location

Please click here to access the PR request template and then copy/paste it into your comment. Enter 'x' inside of empty brackets ([ ]) to signify that you have completed or checked off this selection.

Do not submit a bug without using the template. This template allows development to decide what is the most urgent/important issues to focus on.

Here is an example of what it should look like:

PR Template

Browser

• Safari
• Chrome
• Firefox
• Other - please specify:

Urgency vs. Importance

Does this bug affect the core functionality of the application?

• Yes
• No

Does this bug affect the design of the application?

• Yes
• No

If yes, please answer the following:

• Mobile
• Desktop

Explain this Bug

The safari navigation bar is not redirecting the page when i click on a new link.

Re-create this Bug

I went to the Safari browser and opened up the homepage. Then I shrunk the homepage down to mobile size, and then opened up the hamburger menu and tried to click on a link.

Additional information

N/A

Certify

• I certify that this bug request has been thoroughly tested by me before being added to this repo’s issue.
• I was able to recreate the problem before alerting the development team.
• I've provided as much context and information I think is necessary to get this problem fixed.
• Other - please specify:

Voter Journey Design Update

Attn: @eveandsn @drealuc @aleggett23 @ydknorr

See here for User Interface prototype.

For all questions, comments, and concerns, please post here. If there are requests or questions about copy, please ping @drealuc -- she will make the formal issue in Github.

Scrape states/counties for ballot drop off locations

See #20 for background
Currently for GA I do not see this information on the SOS site. It seems to help only by the counties which would mean for GA alone adding 150+ end points. Looking for other options.

Update Get Social page with link from YouTube

Change name of Voter App in UI

Change the name from Emb(race) the Vote to Five/Fifths Voter
FYI to @eveandsn

Verify usage Rights from 3rd party  public sites (ie vote.org / registertovote.ga.gov)

@ydknorr Denise, is this covered under the API issue?

Reimplement Voter Journey tabs

• UI designer should come up with a better design for this page's navigation
• The widgets (iframes) for Check Your Status, Register, Mail In Ballot, & Vote Now -- Show Polling Location should all be reimplemented to remove the iframes. The vote.org widgets can be rewritten with APIs from vote.org but an arrangement needs to be in place with them. Start with https://vip.vote.org/ to see how to access APIs. The Show Polling Location can be rewritten with Google Civic Information API https://developers.google.com/civic-information
• All the widgets need a UI designer update

Update home page - top black bar with placeholder for Log In/Create Account

@sydbails We need a placeholder for "Log In/Create Account" - Just to show future capability @aleggett23

Building for production yields unusable UI

I'm not sure why but the Carbon styles are not applied if we just build with
yarn build
Currently using --mode=dev as a workarouns. see https://github.com/embrace-call-for-code/embrace-the-vote/blob/eac815cb62bbf822d4ddee7ef98c7af223ebeb2a/package.json#L7

This issue can be reproduced by removing the --mode=dev param, building and deploying locally via docker
Dockerfile

FROM nginx:stable-alpine 
COPY dist /usr/share/nginx/html
EXPOSE 80
EXPOSE 443
CMD ["nginx", "-g", "daemon off;"]

docker build -t vuejs/dockerize-vuejs-app .
docker run -it -P --rm --name test-app-1 vuejs/dockerize-vuejs-app
docker ps to find the local port
i.e.
view locally with http://localhost:33583/

Twitter code has secrets in it

This needs to be removed and replaced (probably) with an environment variable that has the values. That way they will not be stored publicly in git.
Also, @dylanzucker I think those must be from your twitter account?