T4Tp ~40hrs

👆Click the heading to visit the deploy link👆

A single-user application aimed at providing compatible and safe(er) local bathrooms to transgender individuals.

Contributors

Asher Spurr

Preview:

Recorded_screen_1_V1.mp4

Technologies Used

Installation Instructions:

• Visit the deployed link
• OR run the following on the command line to clone the repo and run the app locally:

  git clone git@github.com:corysanders3/spilled.git
  cd spilled
  npm install
  npm start
  

Environment variables

After cloning and installing packages

• Create a .env file in the root directory
• Copy and paste REACT_APP_GOOGLE=myKey
• Substitute myKey with your Google API key or message me on GitHub so I can provide mine.

Run Tests

• Ensure you're running the app locally (see Installation Instructions above)
• Run the following on the command line to open Cypress: npm run cypress or npx cypress open
• Click E2E Testing, then Start E2E Testing in the desired browser
• Select a test suite to run all tests related to that suite

Future Features/Improvements

1. Refactor media queries to include view options, toggling from list and map view.
2. Incorporate Google's Places API to provide further service and convenience for users
3. Re-try using query parameters to filter in real time. This was almost achieved but in the interest of time for submission had to pivot away.
4. Refactor to use Google's lat & lng data for a given location based on the address, the Refugee Restroom coordinates are slightly off.
5. Replace CSS with MUI and add a dynamic loading state
6. Add multiple language options, the API's I am using are worldwide and I would like T4Tp to be as well.

Context:

Wins

• Creating reusable components throughout the application
• Incorporating Googles Map SDK
• Successfully appending and deleting query params from the URL (This is no longer included in production)

Challenges

• The filter function I originally had would override my query parameters. I am eager to revert back to this version so I can continue problem-solving how it was able to achieve this.
• Getting the Filter checkboxes to filter in real-time. They always were one step behind the filter state because of their async behavior. Tried a few versions to keep the filter function and Filter state in sync, but none worked in the time frame given. I look forward to revisiting this.