Description

Restaurant finder site that takes in a type of food and a location and returns several suitable dining options on a map. Interacting with a marker shows a popup that reveals the restaurant's name, user ratings and an address.

- I used Yelp's API to get all the data relating to the restaurants and partnered it with Mapbox to display them on the map in an interactive way.

- Making use of props, the onChange method, URI encoding and the component containing my API call I all the call itself to made whenever the parameters are defined by the user with the search bar.

- Making use of the useState hook I could render the map whilst waiting on the data from my first API, then update a new symbol layer with the markers and popups once the data was ready.

- I made this project with a mobile-first design in mind, making use of flex containers, view height/width and the media query in CSS.