A foodie's interactive map app showing you the top places to eat in Charlottesville, VA! Built with React (create-react-app), easy Accessibility, Service Worker offline applications, and APIs provided by Google Maps and Yelp.
Launch this app in your favorite desktop/mobile browser to find top restaurants near you!
On mobile device:
On desktop:
- Enter your current location
- Enter key words to search for restaurants
- Select the rating of restaurants, the mode of transportation and the max duration to travel
- Select the restaurant either from the list-view on the panel or directly click one of the markers on the map
- In the pop-up infowindow, you view directions by clicking the 'Direction' button, and click the link to view the details of the restaurant on Yelp
I wanted to create a map app that allow users to find top restaurants in Charlottesville, VA. They can filter the results according to Yelp restaurant rating, distance from their current locations, and the type of food they want to eat. So I sketched the early UI planning and features for both the mobile and desktop versions.
- Instantly show you a list of restaurants with 4+ stars reviews on Yelp
- Give directions based on your choices of transportation and duration
- Enter key words to search for restaurants
- Change the rating filter
- Click on the restaurant's marker to present an info-window
- Info-window shows restaurant information and a photo its street view
I used Figma to turn the sketches to mockups and picked the color schemes.
