adeany / hello-voter

Coding guide

This software enables a "Voting Ambassador" workflow for get-out-the-vote campaigns. A Vote Ambassador signs up with the hello-voter React front-end. The Vote Ambassador, once signed up, is provided a list of voters in their area (within some configurable number of meters from the Ambassador). The Vote Ambassador contacts these voters (called Vote Triplers) and encourages them to help 3 additional people vote (called simply Voters in UI, or "Triplees" in the code). Once the Vote Tripler responds "YES" to the system's SMS (this software assumes Twilio SMS integration), the Vote Ambassador will receive payment from the organization who has set up this software. Currently this software assumes payment via Stripe + Plaid, and some partner organizations do not have in-app payments.

Files

|____components  - all the components of the app
|____stories - storybook stories for components of the app
|____theme - theme variables for spacing, colors, breakpoints (taken from carbon design system)
|____hooks - various react hooks for different functionality
|____api - api calls
|____assets - various assets for the app
| |____logos
| |____icons

Prerequisites

• Node. We recommend installing via Node Version Manager.

Installation

1. Copy .env.example to .env and modify as needed: cp .env.example .env
   1. Set REACT_APP_FORCE_MOCK_DATA=true if you want to use mock data offline
2. Install dependencies: npm install
3. Start the server: npm start

Optionally,

1. If you want to explore the app in Storybook: npm run storybook

Testing

We use React Testing Library for unit tests (similar to Jest + Enzyme) and Cypress for integration tests. Learn more about testing React apps here.

• To run unit tests: npm test. This will launch the test runner in "interactive" mode.

Styling

In terms of styling, we use styled-components and react-carbon.

App Router

/home
/login

/ambassador/signup - standard signup

/help
/privacy
/terms

/triplers
/triplers/add
/triplers/confirm/:triplerId

/payments
/payments/add
/payments/chime

Components

<Breadcrumbs> - Breadcrumbs on most pages
<Button> - Main button component
<CardButton> - Card button found on Home page, Help page, etc.
<LoginButton> - Button on Login page
<Footer> - Footer on all pages
<Menu> - Menu Header on all pages
<PageLayout> - Layout on all pages

CI/CD

• Merge into ambassador-stage branch to view on staging server
• Merge into ambassador branch to view on production server

Troubleshooting

• When signing up, if you see: Sorry, but state employment laws don't allow us to pay Voting Ambassadors in your state. you can use the following mock address:

  1300 E Park Ave
  Tallahassee, FL 32301