Civic Central

GIF
Demo on how to use Civic Central (GIF)
Our homepage for Civic Central
Users learn about civic engagement
Interact with historical voter data
Users can toggle between light and dark modes
Our website is completely responsive
On smaller screen sizes, our website adapts to the available screen
Learn about which technologies we used

Inspiration

Voting is a necessary part of democracy, and in the United States, the voting-age population turnout has been historically lower and lags behind many other peer countries. We hope to encourage civic engagement by educating users and making accessing information about upcoming elections easier.

What it does

Our application aims to increase voter turnout by providing election information via the Google Civic Information API in a convenient manner. With our application, a user can input a U.S. residential address and be presented with information on upcoming U.S. elections. Additionally, the user can view any information about local representatives based on the address or location they enter.

How we built it

This application was developed using React, TypeScript, Vite, and Material UI. We queried the Google Civic Information API to present the user with the appropriate election data. Axios is used to query multiple different APIs from the Google Cloud Suite, from which the responses are memoized to limit overuse of the API and hitting our rate limit. We practiced a trunk-based development methodology to collaborate on this project, and we utilized git branches and GitHub issues to work together and minimize merge conflicts. The main branch was the single source of truth, and we checked out one-off branches on a per-issue basis, which were then merged back into the main branch after the completion of the issue.

Challenges we ran into

Our first major challenge was learning TypeScript quickly so that we could start working on implementing the application. Most of our team had minimal prior experience with TypeScript and had to learn the basics independently. The other challenges we faced were related to designing and brainstorming the appropriate user experience and layout of the application. For example, we had to identify the appropriate data to display to the user when we queried the Google Civic Information API. The JSON returned by each API call holds various information about elections and representatives, but not all would be useful to the user. Through internal discussions and creating the Civic Info page wireframes, we identified the appropriate data to display.

Accomplishments that we're proud of

We were able to get up to speed on many new topics in a short amount of time to create our application. Most of the team had limited experience with web applications before this, so we are proud that we quickly learned the basics of TypeScript and React. We’re also proud that all the pages in the application are completely responsive. Implementing a responsive design ensures an optimal user experience since the application can be viewed on any screen size.

What we learned

We learned the fundamentals of TypeScript and React, best practices in trunk-based development using Git/GitHub, utilizing Vite and Google Firebase, leveraging the Material UI library, applying a responsive design, and creating wireframes on Figma.

What's next for Civic Central

In the future, we want to add other features to improve the user experience. We want to add user accounts and a search history for each account to allow users to see their previously queried data. Another feature would be the addition of a visual map to the Civic Info page that shows the address of the election.