Inspiration
For running and cycling communities, apps that generate new running/cycling routes based on needs such as route distance, can come in very handy. However, routes generated by existing products are often unideal: they can be boring (unscenic or repetitive), unsafe (traffic or high crime-rate areas), too safe (prioritizing safety over any other type of enjoyment), or simply contain too many street crossings that slow people down.
Inspired by this, we decided to build Guava - a web app that generates enjoyable, fresh routes based on individual needs.
What it does
Guava allows the user to select the type of exercise (cycling/running), route distance (with units km/miles), start location, and prioritization of scenery and safety on a scale of 1-5. Based on this information, it generates 3 routes for the user.
How we built it (and some highlights)
Backend:
- Built our custom A* pathfinding algorithm to successfully find a route on OpenStreetMap that loops back to the starting position, meeting user needs (took us a long time to create! goes in an arc around the starting point so gets multiple variations of the routes)
- Custom algorithms that assign safety and scenery scores (1-5) for each generated route (although we didn't have time to fully implement it)
- Function that automatically names the run/cycling route (e.g. "Sheridan road run")
Frontend:
- Built and designed frontend in React with Tailwind CSS
- Drop-down bar for location selection
- Embedded OpenStreetMap into frontend using Leaflet.js
- Visualized/highlighted each of the 3 routes on the map
Challenges we ran into
Coming up with the Pathfinder algorithm was a challenge, as it required a lot of thinking/planning, and the algorithm went through several iterations of optimization. We also had several merge issues while developing the frontend, and ran into some bugs while integrating the frontend and backend code.
Accomplishments that we're proud of
We are proud of the effort, thought, and collaborative work we put into developing this project, and the learning we accomplished on the way ;)
What we learned
Each of us was able to either work on a technical area we were fairly unfamiliar with or expand our knowledge within an existing area of expertise. Throughout the development process, we were also exposed to new technologies such as Leaflet.js, which provided a valuable learning experience.
What's next for Guava
If we were to continue developing Guava, we would recruit alpha testers who run and/or cycle to use and provide feedback on our product. The next step would be to improve Guava to further suit the needs of runners and cyclers.
Built With
- leaflet.js
- next.js
- node.js
- openstreetmap
- python
- react
- shadcn/ui
- tailwind-css
- vscode
Log in or sign up for Devpost to join the conversation.