Inspiration: During our brainstorming phase, our team was specifically interested in travel. It was exciting to come up with ideas about how we could optimize an autobudget website dedicated to satisfy user travel needs. Having all of your travel expenses in one place that gives you personalized recommendations to help you make more informed budget and financial choices was our goal. Our team was also passionate about creating cool, automated features that are user-friendly and functional.
What it does: Inside of the , we have multiple tabs at the top for lodging, transportation, food, attractions, itinerary, and overview. Also at the top, we included an integrated Gemini AI travel assistant to help with FAQs, etc. The lodging tab includes features like hotel/resort destinations, real-time booking inventory, and more details, accomadating for user lodging preferences (unit size, number of guests, amenities, etc). For transportation, we accounted for transportation choices, automatic calculating costs, cheap but good quality flight recommendations, and an interactive map. We kept it very simple for the food tab, making everything automated to plan meals without stress and staying within the budget. Not to mention, there is a trip budget feature in each tab that includes a buffer fund suggestion for users to set and save a percentage of their budget for emergencies. The trip budget status bar also turns into different colors like red when their spending exceeds the budget and yellow if user is at 70% of their budget. Additionally, we ranked the top attractions nearby based on user personality in the attractions tab. For example, if the user selects the adventurous and out-door tags, out-door recursions will appear while quiet cafes disappear. Lastly in overview, we have a trip receipt confirmation after a user books through our website.
How we built it: We used tools like Figma to plan out user flow. Then we integrated Figma with VSCode and used the co-pilot function to turn our plan into a clickable website, running Next.js on localhost during development. After getting the drafted website, we went back to manually edit HTML and CSS styling to improve anything that was still vague if we were the users. Throughout the development we used Git and GitHub to run commands and push our changes to the repo. Lastly, we deployed to Vercel to get a public link that anyone can view.
Challenges we ran into: One challenge we faced was making sure we all had the same tools installed like Git and GitHub. The biggest challenge we faced was not making our website fully integrted from the start. We worked on separate input pages for different categories and had a hard time merging those parts together, so in the end, we created a whole new website from scratch and took the time to check if everyhting was functional.
Accomplishments that we're proud of: We are happy that we got a solid website that includes features that we intitally thought about. It was nice seeing our ideas come to life, become useful and getting stuff qutomated.
What we learned: We learn how to smoothly created a website with tools like VSCode, Next.js, FIgma, and more. In addition, we learned more about what to do if we experienced the same challenges later on.
What's next for Roamwell: The next steps would be building on our foundation and adding freatures like more accessibility features for the users. This would include factors like stamina, walking speed, and accommodation needs, which would affect the type of attractions the system would recommend and how many activities they go through the day, for example. We would think about scalability and do more market research.
Log in or sign up for Devpost to join the conversation.