The website helps users decide what to have for dinner. It gives users the option of 'Stay in' or 'Go out'. When user selects 'Go out', they can enter their address and choose the restaurants nearby. When the user selects 'Stay in', users are able to search an ingredent and the user is presented with six recipe options.
Google Maps API is used to retrieve map data. Recipe data is from Spoonacular API.
View the deployed website: https://ruxinqu.github.io/wei-full/
- The user can select 'Go out', and then enter the address.
- Address autocomplete is added to make the search easier.
- Then nearby restaurants will show up with markers on top. Users can zoom in and click on the restaurant to view on Google map.
- The animation below shows the web application's appearance and functionality on PC:
- The screenshots below show the web application's appearance and functionality on tablet and mobile:
-
The user are able to enter several ingredients and separate each ingredient with comma. Then click on the 'Search' button or press 'Enter' can both trigger the search.
-
If the recipe isn't found in the database, a modal will be issued.
-
Six recipe options of the ingredient will show up in two pages. Click on '>' can view the next page, and '<' to go back to the previous page.
-
Click on the recipe box then the user can be taken to the recipe page on spoonacular.
-
Click on the '+' at the top right corner of each recipe box, users can save the recipe to local storage.
-
Hover mouse over the dropdown list on the top left of the page, users can see all the saved recipe. Click on the list the user will be redirect to the recipe page on spoonacular.
-
The animation below shows the web application's appearance and functionality on PC:
- The screenshots below show the web application's appearance and functionality on tablet and mobile:
This project is under MIT license