You need to create an application which will allow the user to get a random recipe and give him / her an ability to save it in the favorite dishes list.
- Call the API endpoint “https://www.themealdb.com/api/json/v1/1/random.php” to fetch a random recipe and display it on the main page.
- Add an ability to save or skip current recipes.
- Saved recipes should be displayed on the other page (for example favorite recipes) and will persist their state after reloading the page.
- Implement a modal window with form on the favorite recipes page to allow the user create his / her own recipes. Each recipe has to include a title and a cooking instruction.
Task requirements:
● You should use React for this app;
● API should be called once on page load, skip button should refetch random data from API;
● You can use any state manager you want or not use it at all;
● When you add custom dish, or when API has no image, you should show placeholder;
● Design is up to you;
● You can use any styling solution you want (sass, styled-components, CSS-in-JS, Tailwind);
● You can use UI libraries;
● Your app should be responsive and be able to adopt to mobile devices;
● Storing data in local-storage will be a plus;
● App should be stored on public github repo;
● You should use gh-pages to host your project;
● Make sure you provide both github and gh-pages links to our HR, when you finish the project.
Resources:
You can find mock-ups here https://www.figma.com/file/PPER1ajSFMx8qg0TRKegXB/Foodify?node-id=0%3A1