drkchn/mosa-upenn-soc-2023

Civics-Themed Winner @ MOSA Summer of Code | Get Out The Vote: Civics Central | Promoting democracy by educating voters about upcoming elections

mosa-upenn-soc-2023's Issues

Upgrading the navbar & updated footer

Working on updating the navbar to add more features like buttons, website icon/logo, and setting the theme for the navbar

Updating package-lock.json

Added a line "hasInstallScript": true,

Remove console.logs from production code

We do not want items to be printed to the console in the production application. This is a bad practice and cause various security vulnerabilities. Can keep these logs in development mode but remove them in production by following this example.
vitejs/vite#7920 (comment)

Convert to index based exports

General responsiveness

Disable query button when searching

we do not want to user clicking the button multiple times and making a bunch of successive api calls.

Ensure build script fails on linting error

We don't want to be able to build and deploy the app with linting errors. Want the build script to fail on linting error

Make WhyVote page responsive

create a responsive WhyVote page by using grid.

Add error handling to api search using mui snack bar

Can use a snackbar to alert the user their query has failed

https://mui.com/material-ui/react-snackbar/

Allow for overides in the test factory

Display Representative data

Write detailed technical explanation on about page

Create a favicon

https://www.seoptimer.com/blog/what-is-a-favicon/

Create theme

Display Election responses

make second election api call

Create environment variable example

• Will need an api key to query google api, have to be able to handle env vars in react axios calls

Create a persistent store of requests

Add informative links when hovering over button

create an interactive button for the fun facts and when clicked on, open to external informative link

look into react context

https://www.youtube.com/watch?v=5LrDIWkK_Bc

• This may help us remove prop drilling

Show more representative data in a modal

Be able to click on a representative and show more data about them in a modal

Make search bar work on enter key

Fix Footer

Make sure the footer is always on the foot of the page, both in phone and computer view

Look into MUI responsive design

Create a footer

• Footers usually have information about the creators of a website, any legal notices erc.

example:

Query elections address API based on the list item that has been clicked

Generate A React Template

• React template generated and added to the repository
• Added support for material UI
• Added prettier linting
• Added some documentation to the readme

Display Representative information in a grid layout

Create responsive navbar

Completed: Used mui components to create a responsive navbar

Fix styling in CivicInfo Page

Add local storage example

MVP Secondary webpage that displays elected representative information to users

The webpage will query Google's Civic Information API and display the representative information to users. This webpage will be used in conjunction with the landing page where users can find information about their upcoming elections.

MVP Secondary webpage that displays the relevant elections information to users

After querying Google's Civic Information API, this webpage will display the upcoming list of elections to the user, along with details about future elections. Relevant information includes but is not limited to date, location, address, county/district, link to Google Maps/directions, and more.

Add a page that describes what tech we are using

Configure react context for elections query

Store address in context and propagate it to the 2nd api call

MVP Webpage that explains reasons it's important to vote

The webpage will contain information about the importance of elections, democracy, and civic duty to motivate users to vote in their elections. Webpage should be visually appealing while informative for users. Overall, it should provide educational aspects to voting.

MVP Homepage/landing page for app that contains text box for users to input address

The landing page will be the first page users see when visiting our website. It will contain a text box where users input their residential address. The page will query Google's Civic Information API to get a list of upcoming election dates.

• display text box on screen
• #30

MVP Query Google Election API and display data in the console

Display available elections after querying API

Add a testing library

• Have to add react testing library to the application so we can test our code.
• install library
• add debug root functionality
• add to pre-push script

Update README and document how to set up and activate API key

Design a wireframe of the home page

• What is our color scheme?
• What is our home page?
• What is our design
• can review material ui docs

Add react router

We will need react router to handle different pages at different URLS.

Learn more at geeks for geeks

Add wiring and examples for creating a custom MUI theme

Setup mui create theme method and get it ready to add custom colors

Add pre push git hook that runs linting and tests if pushing to master

Want a git hook that will prevent any breaking changes being pushed to master

Add dark and light mode toggle

Add a toggle to the navbar for dark and light mode

mui docs: https://mui.com/material-ui/customization/dark-mode/

Deploy template to firebase

• guide

Firebase Account Required

Steps taken:

1. Created a firebase project
2. sudo npm install -g firebase-tools
3. firebase login
4. In the root of the project firebase init
5. Configured firebase.json to run build script before a deploy would happen
6. ran firebase deploy

Query google civics api for representative data

Steps:

• create api key
• take in user data
• encode address
• make and handle request
• dump in the console.

Create a loading state