Location Comparison

home page
example picture of our site running!

Inspiration

We were inspired by the Web Scraping comparison starter kit, and we loved the concept of being able to compare different aspects of different locations, like food (something we all love very much). But why stop at just food? Our next step was to scrape different hotels across various cities. In addition, we sought to improve user experience by removing the user interaction with the console and instead built a usable, interactive webpage integrated with the backend comparison flow.

What it does

The user can select whether they’d like to compare the food or hotels of two different cities of their choice. Our project takes 3 inputs: if food or hotels are being compared and 2 location names. After receiving user input (front end), the backend, using Flask, compiles the request and the comparison is made, finally displaying the result on our screen on the webpage. We not only emphasize which choice is the better price, but also display which city has a higher rating.

How we built it

First, we followed the starter kit and made everything in repl.it, implementing the console prompts and user inputs that generate a static webpage that shows the results. After finishing it, however, we wanted to create an interactive website, so we looked into how to link the backend and frontend together to do so. Using Flask in Python3 web application, we were able to do just that, as well as using CSS style sheet as frontend. We implemented the Flask application to render the HTML template files that exist under the templates folder, which as functions that are responsible for handling requests to the different routes.

Challenges we ran into

The main challenge we ran into was trying to link our frontend with the backend implementations, specifically how to run our python scripts after pressing an HTML-generated button. Eventually, we switched from working in repl.it to working locally through GitHub and using Flask in order to add functionality. It was a huge hurdle to switch and get accustomed to new workspaces and software but we preserved and were able to produce a finished product. We also faced challenges trying to obtain information from different websites through web scraping at first due to limited prior experience. However, after careful review of starter kits, we were able to implement what we learned in an interactive website. We had quite a few bugs like ratings all being the same and submissions not going through generating “bad-input” messages we implemented but eventually debugged with the advice of some of our amazing mentors.

Accomplishments that we're proud of

We’re proud that with little to no prior knowledge of web scraping and web development, we were able to create a functioning website. While it may not be perfect, and we do have aspects of it we’d love to improve once we learn more web and data skills, we’re very proud to have created a presentable product after just a weekend. More specifically, we’re proud to have gone above and beyond the starter kit and implemented Flask to link the front and backend, a process that took a very long time but reaped fruits, and we were able to create an actual presentable and interactive website instead of just the console input prompts on repl.it.

What we learned

First of all, it was really interesting to learn about the underlying program architecture of the starter kit. Because all the different aspects were separated into different files, like how web scraping was in scraper, py, data processing was in convert.py, and CSS styling was in css_template.css, we were able to more clearly comprehend the overall flow and process of calling functions and the underlying compilation/app running. Prior, we never really had any experience with web scraping and the deeper implementations/nuances of Flask, but through this project and Hackathon, we were not only able to learn the basics of it, but also able to practice what we learned through our Hackathon project.

What's next for Location Comparison

Next, we can definitely look into more aspects of different locations we can incorporate to make our website more accessible and interactive. Also, though we spent a lot of time on CSS and user experience/visuals already, we would definitely look to work on it even more and refine some displays/formatting, also making it overall a lot smoother. We could also work on incorporating more locations to compare, as well as display different kinds of results/data, like weather.