Welcome to the front end repository for CivicVoicePlus! CivicVoicePlus is a web application built for the Turing School of Software and Design's Mod 3 Consultancy project. Read more about project requirements: https://backend.turing.edu/module3/projects/consultancy/
Table of Contents
CivicVoicePlus ("CV+") is a civic data tool which aims to educate and inform users with relevant legislative information, empowering them to actively participate in civic matters and hold elected officials accountable for their actions. Users can select bill categories for their dashboard feed, search for and track the progress of specific bills, and easily access simplified bill summaries, status, and congressperson information.
The front end application handles user interaction through the browser, and is built on Rails with HTML and CSS styling. It is responsible for user authentication and authorization, and consumes RESTful endpoints exposed through the back end application to deliver data about search results, saved bills, and bill details to the views. The front end is also responsible for passing specific data through via JSON requests to perform CRUD actions in the back end database (ex. saving a bill for a specific user).
Our Production Site is available here
Github repositories:
- Front End:
- Back End:
Video Walkthrough:
CVP.Demo.mp4
CivicVoicePlus front end application uses these integrations:
- OAuth with Google for user authentication and log in
- Gem: omniauth-google-oauth2, more information here
- Tailwind was used for CSS styling
- Gem: tailwindcss-rails, more information here
To demo CivicVoicePlus on your local machine, follow these steps:
- Clone the back end repo here
- Follow instuctions in the front end repo
README
- Clone this repo
git clone git@github.com:jcjurado3/civic_voice_plus_fe.git - Register for a google oauth key here
- Navigate to the local repository:
cd civic_voice_plus_fe - Run:
bundle install - Run:
rails db:{create,migrate} - Run:
bundle exec figaro install - Add
GOOGLE_CLIENT_IDandGOOGLE_CLIENT_SECRETto config/application.yml file - Run:
rails sto start rails server - Visit: http://localhost:5000/
- ruby 3.2.2
- Rails Version 7.0.6
bundle exec rspec will run the entire test suite. All tests passing at time of writing.
`route: "/"`
`route: "/dashboard" `
`route: "/users/:id`
`route: "/bills"`
`route: "/bills/:id`
As part of the Consultancy project requirements, the CivicVoicePlus team challenged ourselves to stretch technologies during the 11-day design and development process. We selected the following based on the challenges we anticipated facing while building out our MVP, and adjusted our choices to reflect our individual and team learning goals as well as blockers that came up during the course of working on the project.
- Challenge: Two of the API endpoints that expose data for the front end of our application rely on both database queries and external API calls, which significantly slowed down the processing time and resulted in a less-than-ideal experience for our users. Additionally, we were hitting rate limits on our API endpoints.
- Solution: We decided cache our bill endpoints and save bills to our database since this is frequent endpoints and there are so many bills to render on both a users dashboard as well as bills show pages. We used the Rails.cache syntax and some helpful documentation to cache these requests on the back end. We decided not to implement caching for other API calls that would change frequently, such as the request to get all saved bills for a specific user.
- Challenge: In designing and styling the front end, we knew we wanted our app to be able to account for various browser sizes that allow a user to take their bill search and tracking on the go, wherever they may be!
- Solution: Utilizing Tailwind, we added flex containers to allow for various size browsers and made sure to test that our app's functionality was still successful!
Additional features, functionality, and potential refactors:
- Standard user registration and log in (to be added to the OAuth workflow)
- Allow users to create custom search parameters to render on their user digest
- Create functionality to allow users to opt into email or push notification on status updates of their saved bills
- Consume OpenAI API and add functionality to a bills show page to read and summarize the entire bill's text document
- Add in easy to contact officials via email or access petition information that they can send right to the elected officials from the app
- Add nearest voting stations, dates, and updates for users and allow them to add calendar reminders that include the location and details of the polling site
- Expanded error handling
Distributed under the MIT License. See LICENSE.txt for more information.
- Ashley Plasket:
- Jeff Redish:
- Jimmy Jurado
- Julian Beldotti
