Congressional Bills Project
The Congressional Bills Project is my phase 2 project for React from the Flatiron school.
This project is part of a larger project which includes my previous post “United States Senators Project”. This project allows users to view the United States Bills that were passed by Congress in 2021 and add comments to them.
The application was developed entirely in React, using create-react-app. It is made up of 6 components: App, Heading, Home, BillsShow, BillsIndex and Navigation and the stylesheet is index.css The component structure is displayed below.
The App component is where I fetch data from the JSON server using the useEffect hook to run once when the App loads. The data is then copied to the bills[] array using the useState hook. The App component creates the routes and renders the following components:
- Heading
- Home
- BillsIndex
- BillsShow
The Heading component displays the Title and logo as well as rendering the Navigation component. The Navigation component uses NavLink to create the links to the Home “/” component and BillsIndex “/billsindex” component. Using CSS, I made buttons for these links.
The Home component just displays what the app is about and how to use it for now. In the future it will contain all the links to find specific information about the bills.
BillsIndex component is the index page. It uses the map method on the Bills[] array that was passed down as a prop from the App component to display all of the bills that were fetched in the App component. Here I add a programmatic route as a link to each individual Bill which will use the BillsShow component to render a Bill when it is clicked.
For styling the app, I used the Flexible Box Module for CSS. Flexbox, as it is usually referred to was designed as a one-dimensional layout model. It is a method that offers space distribution between items in an interface and very flexible alignment capabilities. Flexbox works very well with React because it allows you to place the React components anywhere on the page, giving you control over how the App will look on any browser and size of the windows.
This project is just the beginning of a larger project that will allow users to search, sort, research and comment on any Congressional Bill. The information will come from ProPublica Congress API.
ProPublica is an independent, nonprofit newsroom that produces investigative journalism with moral force. They put the focus on important issues, shining a light on abuses of power and betrayals of public trust. The Congress API from ProPublica provides near real-time access to legislative data from the House of Representatives, the Senate and the Library of Congress. It includes details about members, votes, bills and other aspects of congressional activity.
The idea of this project is for people to be able to view all the information about Congressional Bills and see which congressional members supported it to determine what that congress person really supports.
Stay tuned for the full version.
