Wanderus

• 

  Dashboard, with real-time weather data

• 

  Select a range of dates, toggle routing and marker visibility

• 

  See the many options of points of interest brought by the YELP API

• 

  Have an itinerary generated by an LLM

Inspiration

Problem: Planning trips shouldn't feel like navigating a maze of disconnected apps and websites. The inefficiency of checking weather forecasts here, hunting for routes on Google Maps there, and scouring Yelp or Google for activities left us yearning for a smoother, more cohesive solution. Existing options locked users into rigid templates or left them wrangling with text editors, offering little dynamism.

Vision: Create a platform that harnesses the power of dynamic and intuitive documents, allowing users to create and update plans in real-time while having a holistic view of their trip. Allowing users to be expressive in their trip planning, have one place to plan, and collaborate with others all in real time.

What it does

Wanderus is a dynamic website that is used to simplify and elevate trip planning. Designed to transform the tedious task of itinerary creation, Wanderus aims to unify the process of planning by seamlessly analyzing your surroundings, and curating a personalized and spontaneous day plan. Our interactive map integrates points of interest along your route. Discover exciting restaurants and activities tailored to your preferences.

How we built it

Ideation

• We had group introductions and had rounds of pitching ideas to each other. Once we agreed on an initial idea, Chris helped get everyone's generic development environment set up with an introduction video. From that, we were able to leverage the Atlassian tools, Jira, and Confluence to streamline our tech stack and monitor task completion. We allocated tasks by proficiency and motivation. The following teams:

Backend

1. Azhar
2. Chris
3. Yu-Ri

Frontend

1. Astrid
2. Chris
3. Owen

Architecture

• Technology stack. We centered around technologies that members of our team were somewhat familiar with or proficient in. We decided to have a React web app that communicates with an Express backend that effectively acts as a proxy and provides a simpler/easier-to-work-with interface for other APIs like Yelp, OpenWeather, OpenAI, and INRIX. We made sure to include a .env file to safely store API keys, and manage server configuration among both the React app and Express server.
• Backend. The Express server is designed as a RESTful API. It was logically separated into domains, somewhat resembling a classic model-view-controller architecture. Except our models were type definitions for DTO, dedicated controller files for business logic (handling integration), and routes to handle HTTP requests from the client. We made good use of Express middleware (configuring CORs, adopting a dedicated parser), and setting up a proxy configuration for our frontend.
• Repository Organization. We chose to monorepo repository to aid with collaboration and learning among team members. The front-end and back-end teams could easily integrate without the need for a third-party library (e.g. GraphQL
• Developer Tools. Code generation tools (using Hygen) were included to generate boilerplate while increasing developer speed and reducing merge conflicts or project inconsistencies. Configuration for hot-module-reloading for development speed and consideration for multiple different OSs (Windows and MacOS) were considered and implemented.

Figure 1. Diagram of the general technologies and flow of requests for Wanderus.

Challenges we ran into

Technical

• Figuring out the mechanism to refresh the INRIX token with an expiration date.
• INRIX's 'find route' API only returned one point on the map, which did not allow us to map the entire route.
• Integrating INRIX and MapBox to place nice proved difficult to incorporate.
• Dev environments misfire, having wrong Node version, VSCode version, TSCompiler issues.
• The label box for the UI was difficult because it was not spacing out.

Project Management

• The joy of project scope gently stretching thanks to irresistible new features.
• Delegating work, balancing between priority features, personal interests, and experience.
• Onboarding teammates with unfamiliar technologies like Tailwind, Express, and React.

Accomplishments that we're proud of

Despite encountering numerous challenges, we take pride in our resilience, refusing to succumb to obstacles. We always sought assistance when needed and maintained consistent and effective communication at all times. We supported each other across various areas, culminating in the successful development of a website that is nearly fully functional.

What we learned

1. In our journey, we discovered the invaluable support of developer tools, including extension kits, which significantly streamlined our development process and made it more efficient.
2. We learned quickly how to work together as a team understand each other's strengths and weaknesses, and take ownership.
3. We learned to utilize help from the mentors, ask the right questions, and try to make the most of out of toolkits.

Kudos

Front End

Owen took charge of designing the initial page layout and established the connection to the front end in VSCode. Astrid focused on crafting a user-friendly UI for seamless interaction with the map. Meanwhile, Chris adeptly troubleshooted the UI functionality of buttons and worked on implementing secure secrets.

Back End

Yu-Ri initiated the backend process by illustrating the Mapbox map using their API. Azhar's role involved enhancing the API functionality by referring to the INRIX documentation and automating the token generation, longitude, and latitude calls. Chris further refined the code, streamlining the overall functionality for fetching calls to retrieve only the essential data, and implemented security measures by creating secrets to protect our API information from unauthorized access. Yu-Ri worked diligently to parse the data, completing the collaborative effort seamlessly.

Documentation

Azhar's documentation played a pivotal role in tracking progress, setting tasks, and establishing reasonable deadlines, ensuring a clear roadmap for gauging project success following the time available. The team adeptly navigated the learning curve of new tools, maximizing collaboration through platforms like Jira and Confluence to facilitate seamless coordination.

What's next for Wanderus

• Creating dynamic trip planning documents that easily integrate many APIs (blocks, drag and drop, hover, mini-language) that visually sync with the map instantly
• Implement real-time collaboration with other users, with the use of CRDTs
• Implement authentication and authorization, user accounts, save data on the cloud
• Dockerize web app and express server, create a CI/CD pipeline to easily develop and deploy
• Deploy on AWS or another cloud provider
• Adding INRIX parking API to see where trip planners can park along their journey
• Finishing integration with INRIX API and Yelp
• Offer more options and more expressivity with the map, choosing emojis for the markers, focusing on individual routes, and road conditions all on the map!
• More code and documentation generation to help with additional developer onboarding and code knowledge base.
• We want to make it so that Wanderus has more options and is not limited to locations like San Fransisco and Frankfurt.

Built With

• api
• confluence
• css3
• dall-e
• figma
• inrix
• javascript
• jira
• mapbox
• openai
• react
• typescript
• yelp