Link https://wayfinder-dc735.web.app/

Inspiration

When we were planning a recent trip, we ran into an interesting issue – someone we knew wanted to share a list of places they recommend we visit, but there didn't seem to be an easy way to do so. Although that was ultimately resolved by an extensive google doc, it left us wondering: was there a better, simpler way to share a map with custom information to friends?

What it does

Wayfinder is a React webapp that allows users to easily create, share, and publish maps with their friends or anyone on the internet. You can sign in with your Google account, create a map, add custom markers with colors, information, and links, and then publish it to the world. Every map is saved at its own url, making it extremely easy to send to friends. You are also able to browse every map created and easily find one for the city you are looking for.

How we built it

We build this project using React with TypeScript and several Google Firebase utilities. For our user interface, we mostly used Material UI components with some various other libraries. We hoped to break a little out of our comfort zone with TypeScript while still working in a framework we were familiar with.

Challenges we ran into

A challenge we ran into initially was figuring out how to place a map on the screen. It was something we initially thought would be trivial, but it took almost four hours of navigating npm and four separate google map wrappers to find something that was functional, updated, and well documented. The breath of fresh air we got after achieving that allowed us to effectively plan out the rest of the project.

Accomplishments that we're proud of

As sophomores, we are especially proud of our app in comparison to our project last year, which was a much simpler React project. It shows our growth as programmers and seems to give value to our experiences throughout the last year. Wayfinder is (mostly) polished and responsive, as well as providing a real-world use case that we can build upon if we desire.

What we learned

One thing we learned is that we want to spend more time fleshing out the idea and project structure before jumping into coding.

Share this project: