We the People

See the deployed site.

Description

We The People is a team-project written with the React JavaScript framework in 14 days.

Summary

We The People is our Mod 4 capstone project at Turing School of Software and Design. The capstone project involves developers from the Front End and Back End program working together to create a full-stack application.

We recognize that the 117th Congress of the United States is more diverse than preceding 116 congresses. However, we can see that congress does not proportionally represent the people of the United States. Our site shows how Congress' demographics do not align with the general population. Furthermore, the user is able to examine each representative based on how the following organizations, reflective their stance on particular issues, rate them:

• Abortion - Planned Parenthood
• Budget, Spending, Taxes - Americans for Prosperity
• Civil Liberties & Civil Rights - American Civil Liberties Union
• Campaign Finance - End Citizens United
• Criminal Justice - National Association of Police Organization
• Education - National Education Association
• Environment - National Parks Convervation Association
• Gun Control - National Rifle Association
• Immigration - NumbersUSA
• Marijuana - National Organization for the Reform of Marijuana Laws

Technology Used

• React
• JavaScript
• HTML / JSX
• CSS
• React Router(v5)
• React Context API
• Fetch API
• Cypress
• Postman
• Excalidraw

Wireframe

This site was built using this wireframe as guidance.

Deployment

You can see the site deployed on via surge here.

You can also clone down the backend repo to see endpoints, JSON contract, etc or access the deployed backend.

Features

Landing Page and Representatives with Quiz Result

The landing page of We The People shows a header with a quote from the constitution and demographic disparities between the US Population and the body of Congress. After viewing these statistics the user is encouraged to fill out a questionaire by responding to 10 statements via a likert scale, ranging from strongly disagree to strongly agree. Once the user click the Get My Results button, they are taken to a page that displays congressional representatives based on the entered zipcode and compares the user's responses to the policticians views as rated by thir-party organizations. The user can then look at other states and see how other representatives compare to their current quiz answers.

Under the Hood

Components `App`, `Layout`, `Header`, `Footer`, and the controlled-form of `Quiz` are being rendered. Within `Header` the component `State Dropdown` is being rendered. The user is able to fill out two inputs and respond to the 10 statements via a rating on a likert scale. Once the user clicks `Get My Results!` they are taken to the Representatives with Quiz Result view. The user's quiz responses are sent to our backend server, along with the user's zipcode. The user's congressional representatives based on zip code and state senators are returned from the server. The user's responses are held in state as well as being sent to the backend and are used to calculate matches, in percentages, to how representatives are rated by third-party organizations. The user can select other states to see how they apply based on their current quiz responses that are held in state by React.

Representatives without Quiz Result

If a user does not want to take the quiz they are able to select a state from the dropdown menu and see all the representatives for that state as well as how the representative is rated via Special Interest Groups(SIG). The user can also navigate to other states using the dropdown menu.

Under the Hood

A POST request is sent the the server and responses similar to those shown for a user who has taken the quiz are displayed. These cards conditionally display information to the user that are particular to the representative, but do not include the user's thoughts as those would have to be gathered throught the quiz.

Testing

We The People is fully end-to-end tested with Cypress. URLs are tested and network requests are stubbed. Cypress runs during continuous integration on each push to or merge into main, and all passing tests are reflected via the passing check (as seen in second image below).

Responsive Design & Accessibility

We The People was built to be responsive across desktop, laptop, tablet, and mobile screen sizes and be fully tab and touch focusable for screen-reader accessibility. We are committed to continually improving to ensure our site is accessible to all users and welcome any and all feedback!

Future Iterations

• Add information related to upcoming elections to representatives' cards for user to engage with
• Employ agile methodology by gathering and tailoring features based on user feedback. For example, determine the most effective phrasing of statements ranked by users using A/B testing
• Expand scope to inlcude information regarding upcoming elections
• Expand scope to include local elections (e.g. State, County, City) and focus on providing information on new reps rather than incumbents

Credits

Authors:

Jess Fatta	Maddie Law	Nicole Valentini	Zach Liibbe
GitHub - LinkedIn	GitHub - LinkedIn	GitHub - LinkedIn	GitHub - LinkedIn

Turing School of Software and Design's Project Expectations, Evaluation, & Rubric that served as guidance for this project can be found here.