Directory of United States Senators built with Vue.js. View working component.
Project meets general accessibility (WACG) and cross-browser requirements. More testing with a dedicated services (e.g., Sauce Labs) would be helpful if deploying to production.
-
Starting view - all Senators, desktop.
-
Female Democrats up for re-election in 2024, desktop.
-
Alabama Senators, tablet-sized screen.
Clone down this repository. You will need node and npm installed globally on your machine.
Installation:
npm install
To Run Vue:
npm run dev
To Visit App:
Visit the localhost port displayed in the terminal after running npm run dev.
My goal was to build a directory so users can easily view members of the US Senate. I included filters so users can narrow their view by state, gender, party, or when Senators are up for re-election. I also included a search bar so users can search for a Senator by first, last, or full name. Since some Senators have less formal and more formal names, I also built the search to try to accommodate these variables. For example, people can search for Bob or Robert Casey; Dick or Richard Durbin.
A big challenge was ensuring the filters work without error. The other was accommodating smaller viewports, especially mobile phones, where there is a lot of information to display and not much space.
- Senate roster from US Senate.
- Photographs of Senators are from each Senator's office.
- US Senate seal from Wikipedia.
- Readme guidance from Brenna Martenson.
- Helpful information on filtering from Stackoverflow users.
- Design guidance from Google's Material Design.
- WACG guidance from Firefox's Developer Tools.
- Shields from Shields.
