Itinerate

Inspiration

When brainstorming ideas for this hackathon, we immediately landed on "Home Away from Home" as our track of interest due to our shared love of travel! One common point we bonded over was our frustration at the difficulty of creating an itinerary for our upcoming vacations with family and friends. Planning a vacation requires tons of effort: a good itinerary incorporates everything from tourist attractions and hidden gems to fun activities and great food. This can be a daunting task, so we aimed to tackle this challenge in our solution.

What it does

Our website provides users with activity recommendations based on the city they are visiting and the duration of their stay. Users can select any of these recommendations or make their own, and these events cards are then available to them to drag and drop onto a planner framework. Each event card has a description of the event, its location, price level, and a picture related to the event.

How we built it

We used the MERN stack to build our website. The frontend is written primarily in React with some templating frameworks such as ChakraUI and React-DND. The backend is written in Node.js using the Express framework. The underlying schema is implemented using MongoDB. We connected our database to the backend server using Mongoose, and we used Axios to connect our backend to our frontend.

We have 3 main pages to our website. The onboarding page allows users to let us know what city they are visiting and for how long. Based on this information, the user is led to the suggestions page where they are provided personalized recommendations on places to visit during their trip. After selecting some of these recommendations, the user is then taken to the planner page where they can go about dragging their chosen activities into a calendar whose length is the duration of their visit.

Challenges we ran into

We faced challenges getting our environment set up. We were initially planning on using Replit to host our website, but due to wifi and environment constraints we decided to pivot to a local development environment.

MongoDB was another challenging aspect of building our project -- due to our inexperience with this database service, the learning curve was steep to figure out how to represent our data in the way we wanted and connect it to the backend.

Lastly, a challenge we ran into was storing state on the frontend. Since we decided not to go with React Redux for state management, we needed to come up with more niche solutions to pass data from page to page in our website. This is something we definitely hope to improve on if we decide to keep pursuing this project in the future.

Accomplishments that we're proud of

Since most of us were completely new to the MERN tech stack, we are very proud of the fact that we were able to create a functioning web app! We learned so much over the past couple of days and are looking forward to applying these skills in our classes and careers in the future1

What we learned

We learned to build an app using the MERN tech stack as well as how all the moving components of a website -- database, backend, and frontend -- work together.

What's next for Itinerate

Some of our future goals include using ML to suggest more personalized event/activity recommendations, allow for multiple collaborators on one planner board, and integrate Google Maps to provide accurate distance measures between activities.

Built With

• chakra
• express.js
• mongodb
• mongoose
• node.js
• react
• react-dnd