This year has been one for the history books, driven by the passion and activism of America's youth. This coming Presidential and Congressional election cycle may be one of the most crucial in the history of the United States, and will be determined in part by a new generation of leaders. Despite this, the majority of voter-age citizens under the age of 24 don't ever make it to the polls, and even more youth are uninformed about the political issues at hand. Viewed in the context of income, education, and race, inequality is a major cause of voter disengagement and apathy. Through BillCitizen, we hope to change that.

This hackathon was a major learning for our team. Even before we dove into technical development, we needed to know what features youth needed but couldn't access. We looked at other legislative bill trackers, and aimed to fill the gaps where they fell short. Instead of presenting users with complex, obscure legal jargon, BillCitizen aims to simplify the text of bills, increasing accessibility and comprehension. Available as a mobile app, BillCitizen allows anyone with a smartphone to become civically engaged from the comfort of their own home, commute, or workplace.

Another challenge we faced was creating an intuitive, streamlined UI. Government legislative trackers contain a dizzying array of menus and pop-ups crammed into a website clearly designed for desktop. How could we present the most important information visually to the user? By taking cues from social media, we created a feed-like interface users can scroll through, communicating bill sponsors, topic areas, and passage through Congress at a glance.

On the technical side, our team adapted to using Node.js and TypeScript to create BillCitizen. Within five days, we were able to grow from novices to creating a fully-fledged app, complete with pristine functionality. To begin, we decided on one of the most popular framework for mobile application, React Native. Utilizing the power of React Native, we were able to develop a highly functional app with advance graphical interfaces while exporting on both iOS and Android Platforms. To ensure quality and speed of deployment, we set up a Continuous Integration and Continuous Deployment Pipeline with GitHub Actions. This pipeline allowed us to quickly test and build each iteration of the application automatically. Instead of using class components, we decided to use functional components and other functionalities that was added in the newer version of React to stay up to date with the technology. Through the use of functional components and React Hooks released in version 16.8, our project remains easy to maintain and modular through all iterations and improvement.

Light, clean, simple UI highlights the eye-catching title allowing for easy browsing. All important information, such as the bill number, dates, and bill description are easily accessible, but none of it is in the way. Color is used very sparingly, drawing the eye to pieces of information that might help the user navigate which bills they want to add, i.e. committee and sponsor. In fact, this information is color-coded - the sponsor is blue for democrat or red for republican and the committee colors have more subtle relations to their use (i.e. different greens are used for homeland security, financial services, and natural resources to denote protection, money, and the environment respectively). The tracker is easy to follow - the user knows whether or not the bill is active and where along the chain of government it is within a second of glancing over the clean colored circles.

Creating BillCitizen was a wonderful learning experience for our team; whether it be innovating beyond existing technologies, intuitive design, or working with an entirely new library and language, we grew as much from creating BillCitizen as we hope our users will from using it.

In the future, we hope to expand BillCitizen to state and local legislation, allowing citizens to impact the communities they live in. We also hope to create national and geographic "Trending" section for bills garnering a large amount of attention, to draw attention to headlining civic issues.

We can't wait to see an informed generation enacting political change, and we believe BillCitizen is the path to that brighter future.

Share this project:

Updates