A volunteer support portal. A supportal. Sounds like Squirtle!
Internally called "supportal", this project was a collection of volunteer organizing web apps for the Elizabeth Warren campaign.
The primary app in the collection, Switchboard was a tool for volunteer organizers. Volunteer organizers would receive training and once complete have access to the web app. Once loggeed in, they would receive a list of leads for individuals in their area that had expressed interest in volunteering for the campaign. Volunteer organizers could call those leads and then indicate their response, even directly signing the leads up within the app for volunteering shifts. At last count Switchboard was responsible for facilitating some tens of thousands of calls to potential volunteers.
The Event Scheduler, internally known as "Shifter" was a mini web app to search and sign up for volunteer shifts in a more streamlined process than the Mobilize America service it was built on top of. The component was commonly used as an embedded iframe within our text and phone banking tools (Spoke and ThruTalk respectively) to allow volunteers to sign up people they were contacting for volunteer shifts. URL params could be passed in to the iframe to preselect events and timeslots by ID, and prefill necessary form fields.
Finally, "Glitter" was going to be a replacement for Shadow peer to peer email system. Our original idea was to create a tool to replace Shadow named SHADE (Sending Helpful And Direct Emails) but we decided it was better to throw glitter, not shade. Hence, Glitter was born. This project was only just beginning when the campaign came to a close.
The front-end was hosted on Netlify and worked with our Python API.
# install dependencies
npm install
# copy necessary environment variables
cp .env.sample .env
# run the project at localhost:8001
npm run devThe supportal is a web app built with React and Next.js. Other commonly used third-party libraries include:
- axios - for make HTTP requests
- date-fns - for date manipulation
- lodash - for utility functions
- localForage - for local state persistence
- aws-amplify and cognito - for authentication
Coding conventions are enfroced with Prettier and ESLint, using the Airbnb presets.
Commonly used base components are taken from the campaigns internal component library, Persist. After that, the primary component styling solution being used is Tailwind CSS with theming based on Persist's theme file. For more complex CSS that Tailwind's utility classes can't address, styled-jsx is included with Next.js by default. styled-components is also installed since it's used by the website. However because of issues with universal rendering, it's prefered to use Tailwind and styled-jsx or Tailwind and inline styles.
Coding conventions are enforced with Prettier and Stylelint.
The supportal web app was originally hosted on Netlify.