HopStop

Team name: The Four Frogmen (Team 6)

Team Members: Kaiser Chen, Lena Wang, Nathan Senyard, Neo Ghassemi

App Summary

Hopstop is a web application designed to make planning road trips as seamless and easy as possible. It's always easy to know what you want to do at your end destination, but what about the route there? No one wants to drive for hours on end with no breaks in between. Hopstop solves this problem by generating an optimized route with activities along the way based on your preferences (budget, what you want to see, how far off the original path you want to travel, etc.). Plan your next road trip with us today!

Demo

• Route generation: The results page demonstrates/displays the routes that are generated based on user preferences:
• Itinerary customization: Users can customize their itinerary by adding, removing, and swapping out POIs:
• Saving routes/POIs: Users can save POIs and routes and view them later. Users can also update saved routes:
• Exporting: Users can export routes as a PDF and GPX File (Example screenshot shows its use in Google My Maps):

Minimal Goals

Goal	Stage
Allow the user to input a starting point and destination, then generate a route between those two places, displaying it visually on a map	Completed
Generate POIs, or points of interest, along the route that would be fun to stop at	Completed
Display the POIs along the route as pins on the map	Completed
Allow users to see additional information about each POI on the side (name, rating, location, description)	Completed
Allow user to create an account, storing their past routes and liked POIs	Completed

Standard Goals

Goal	Stage	Additional Details
Allow users to set parameters for what sort of POIs they are interested in (For example, only restaurants, parks etc.)	Completed
Calculate multiple candidate routes, and allow the user to choose which one is the most interesting to them, and then display the best route	Completed	Our app generates 3 routes for each request, and then allows the user to click between the 3, choosing which to edit and save.
Integrate links to Google Reviews and Yelp to learn more about the POIs.	Completed	We have changed this goal after consulting with our TA to instead include a link to Google Maps because it contains Google Reviews, and Yelp does not support a good chunk of the POIs that we suggest.
Allow the user to export the map and information about POIs into a PDF	Completed
Allow users to set preferences for their derouting tolerability (how much users are willing to stray from the source and destination)	Completed

Stretch Goals

Goal	Stage	Additional Details
Export the selected routes, and selected POIs along that route, as a Google Maps route that can be opened on other devices	Completed	Our GPX export feature allows the user to export their route to a .gpx file. This can then be uploaded to Google My Maps, and then opened and viewed in Google Maps.
Generating a custom itinerary of activities for the road trip based on the route and POIs, taking into account the business hours of the locations, their distance from one another, and so on	Completed	This is part of our main route generation feature, which is done with a backend scoring algorithm that takes all of these factors into account.

Non-trivial Elements

Element	Stage
Pools of POIs are considered incrementally along the route and scored based on a scoring function to determine how well they align with user preferences and other attributes such as ratings and closeness to other selected POIs. A greedy algorithm is then used for optimal POI suggestions	Completed
Support two different user flows (logged in vs. not logged in) and the features unique to each flow	Completed
Users can customize their itinerary by adding, removing, and swapping out POIs	Completed
Users can specify their preferences and get a route that meets these preferences	Completed
Users can save, update, and remove routes and POIs	Completed
Authorization/authentication for API calls using JWT and long-term user persistence using refresh tokens	Completed

XSS Security Assessment

We tested all of the following text input points:

• Start/destination inputs on the home page
• Route and POI name inputs on the results page
• Search bar input on the liked POIs page
• Search bar input on the saved routes page

We tested these by injecting various JavaScript code into the input fields (e.g. trying to input alerts, images, etc, and trying to access the DB). We also tried NoSQL injection by inputting stuff like {"$ne": "nonexistent"} into the user signup/login inputs. Our inputs successfully handled all tests (None of the injections caused unexpected behaviour). We also ran a security scanner (called OWASP ZAP) that scanned for injection and other potential security vulnerabilities. It confirmed that there were no XSS vulnerabilities. Given these findings, we can be fairly confident that out inputs are sanitized. There were, however, some other vulnerabilities relating to the lack of headers for our API responses that were flagged by the scanner. We have addressed these vulnerabilites by adding headers to the responses and enabling Content-Security-Policy to block extra scripts from being added to the page to better secure our website.

Additionally, one our friends who has taken CPSC 436S was kind enough to perform a penetration test on our app. He gave us some feedback on how we can improve the security of our website. He told us that we should encrypt the password on the frontend in addition to hashing the password on the backend so that it is more resilient to snooping. We have taken his feedback into account and will look into taking steps to address this. Some other feedback he provided included making errors more vague and removing the user id from the API response when users sign up. We've fixed these issues for this milestone. Other than that, he mentioned that JWT was implemented well as he couldn't find any way of getting unauthorized data.

Bug list

The bug list can be found under GitHub Issues.

M5 Highlights

What has been added:

• Visual Display Changes:
  • Polishing of UI, such as making the pop-up after clicking the "..." icon on the likedPOIs page smaller (since there is only one possible action)
  • Pins on the map now change colour based on the POI's type
  • Added in estimate for how long a trip takes to the results page
• Encryption:
  • Added encryption for passwords to hide them from actors during API requests
  • Uses the server's public key for encryption and the server's private key for decryption
  • Uses Web Crypto API (SubtleCrypto interface) for frontend, crypto (built-in library) for backend
• Bug Fixes:
  • All P0/P1 bugs fixed
  • Almost all other bugs fixed, except for a few marked as "wont-fix"

How to Run

Open a terminal at the root of the project

Build Docker Container: docker build -t hopstop .

Run Docker Container on Port 5173 and 3000: docker run -t -i -p 5173:5173 -p 3000:3000 hopstop

Navigate to http://localhost/5173

• I am aware that the env file with my api key is pushed; this was approved by the instructor, so the application is still runnable through Docker