Restaurant Finder
My restaurant quality visualization, which can be found here, combines my passion for programming and food with real-world data from the Yelp Fusion API. As part of this project, I set out to create a web application that enables users to explore and discover nearby restaurants, complete with ratings, reviews, and interactive maps.
Introduction
Learning
Planning
I began by outlining the project's scope and purpose. My goal was to develop a user-friendly web application that integrates restaurant data from the Yelp Fusion API. I envisioned users being able to access restaurant details, ratings, reviews, and a dynamic interactive map.
My initial research led me to choose the Yelp Fusion API as my data source. I recognized Yelp's wealth of restaurant information, which aligned with my project's objectives. Features I wanted to include were restaurant search functionality, comprehensive ratings and reviews, and an interactive map for visual exploration. Deliberating on the best tools, I would opt for Python, Flask for web development, and Folium for creating the interactive map. Additionally, I chose to leverage the Google Maps API to heighten the user experience. I strategized how to fetch data from the Yelp API efficiently. My plan included managing API requests, implementing pagination to access a substantial number of results, and leveraging location-based parameters like latitude and longitude. My planned approach for visualizing the restaurants involved employing CircleMarkers of varying sizes and color-coded markers to reflect ratings, fostering an intuitive visual experience. Even in the planning phase, I looked ahead to deployment by structuring my code for online compatibility. This foresight enabled me to seamlessly deploy the project on PythonAnywhere.
My coding capabilities before taking on the project
Goals
Then, I got started on a to-do list of the things I wanted to create. I had to prioritize items based on what was most critical for the app to work, and then I would focus on add-ons such as visuals and tooltips. The main components of the app were a map and page deployment. Then, after setting these foundations, I began to explore what I thought would add more value to the app such as colors, size, tooltips, a moving map, etc.
My to-do list I would refer back to
Design
Map
Drawing from principles of user experience and visual design, I planned for an intuitive experience that seamlessly merged data from the Yelp Fusion API with interactive map visualization. Throughout the design phase, I sought feedback from peers and mentors. Their input allowed me to refine my design choices and ensure that the application met usability and visual design standards.
Crafting an interactive map was a focal point of my design. I conceptualized a map that would seamlessly integrate with restaurant data, allowing users to explore locations effortlessly. The use of Folium and the Google Maps API enabled me to translate this concept into a dynamic and engaging map interface.
I then focused on presenting data in an informative manner. Balancing the display of ratings, reviews, and map markers was a design challenge that I addressed through layouts and color-coded markers.
An example map I found that guided my designs
Development
Data Retrieval and Pagination
I strategized data retrieval to ensure that I could retrieve a substantial number of restaurants from the Yelp API. I implemented pagination by making multiple API requests with different offset values to access more results and store them in a CSV. This approach allowed me to overcome REST API limits and fetch a comprehensive list of nearby restaurants.
Restaurant Search Functionality
To enable users to search for restaurants, I designed a search bar prominently placed on the interface. I used Flask to handle user input and make API requests to the Yelp Fusion API. The entered search term was included as a parameter in the API request to fetch relevant restaurant data.
Search function
User Interaction with Map
I used the Google Maps API to enable smooth user interaction with the map. Users could pan, zoom, and explore restaurants by dragging the map. This added a layer of interactivity, making it easy for users to navigate through the map and discover restaurants in their desired area.
Using the Google Maps API (the key has expired as of August 2023)
Color-Coded Map Markers
I devised a color-coding system for map markers to visually convey restaurant ratings. Based on ratings, I assigned different colors to markers using conditional logic. This visual distinction allowed users to quickly identify restaurants with higher or lower ratings as they explored the map.
The map that pops up after searching
Display of Restaurant Information
When fetching restaurant data from the API, I extracted information such as ratings, review counts, and review snippets. I structured the presentation of the information in the map popups. By providing succinct information, users could make informed decisions about exploring a particular restaurant.
Tooltip that appears when clicking on a restaurant
Evaluation
Issue Deep-Dive
I initially encountered the challenge of having only a limited number of restaurants (50) displayed on the map due to the API's default limit. To overcome this limitation, I implemented a solution by incorporating pagination. By making multiple API requests with different offsets, I successfully retrieved a full list of nearby restaurants. This allowed me to populate the map with a richer variety of options for users to explore.
Integrating the Google Maps API into my web page while effectively utilizing the latitude and longitude data from my API was a challenge I had to address. Leveraging the capabilities of the Folium library, I used the mapMaker function to connect my restaurant data with the Google Maps interface. This ensured a smooth experience for users to explore restaurants on the map.
Lastly, deploying my project on PythonAnywhere posed a unique set of challenges, especially in terms of managing page navigation and deploying Flask applications. I had to adapt my code to accommodate the constraints of PythonAnywhere. By structuring my routing using Flask, I ensured that users could seamlessly navigate between different pages. Through this adaptation, I successfully deployed my project on PythonAnywhere, making it accessible online.
Demo Video
In addition to turning in the code for my final, I produced and filmed a demo video for the app. The video serves as a communication tool when presenting the project to stakeholders.
A video I produced showcasing the Restaurant Finder app
What I Learned
The inspiration behind this project stemmed from my interest in utilizing technology to enhance our everyday experiences. Yelp, a widely-used platform for restaurant reviews and ratings, provided the perfect opportunity to integrate APIs and data visualization into a functional application.
-
Python and Programming: Through this project, I worked with Python, embracing it for the first time. I gained valuable insights into Python's syntax, data structures, and its role as a versatile scripting language. Furthermore, I expanded my programming skills by working with APIs, learning how to make HTTP requests, retrieve data, and parse JSON responses. This was my first experience with APIs, enhancing my understanding of data exchange between platforms.
-
Web Development and Flask: Working with Flask allowed me to grasp concepts related to routing, page rendering, and handling user inputs. This experience laid the groundwork for my understanding of how web applications function and interact with users.
-
Map Visualization with Folium and Google Maps API: My initial exposure to Folium, a Python library for interactive map visualization, introduced me to the world of geographical data representation. Also, by incorporating the Google Maps API into my project, I learned about enhancing user interaction and engagement through dynamic maps.
-
Data Manipulation and Presentation: Utilizing Python's capabilities, I engaged in data manipulation tasks such as parsing and organizing data obtained from the Yelp API. This experience equipped me with practical skills for handling real-world data in a programming context.