This project was bootstrapped with Create React App.
In the project directory, you can run:
Installs the required libraries for running the project.
Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.
The page will reload if you make edits.
You will also see any lint errors in the console.
Launches the test runner in the interactive watch mode.
Chromium needs to be installed.
The app is divided in a Search Input component that receives the query and parses the results in a Card component.
The state of the app is contained in the SearchInput, that queries the API and renders the results when the query has more than 3 characters and the enter button is pressed.
The card component contains all the sections of Title, Image, Ingredients, Label and FavoriteButton.
├── Tests # Test files #
├── Utils # Scripts #
├── App
│ ├── components
│ └── SearchInput
│ └── RecipeCard
│ └── Title
│ └── Image
│ └── Ingredients
│ └── Label
|__________________________
The styling is made with CSS only.
Axios is being used for querying the API.
Previous search results are being stored with Local Storage
Only the first 5 results are being shown
It is recommended to clear Local Storage every once in a while in order to prevent bugs
-
Destructure the Search Input component in smaller ones
-
Allow user to search and filter results by meal / ingredient
-
More CSS and media queries to optimize the responsiveness
-
Some styling and Dropdown component for previous searches
-
Logic of favorite recipes + User Profile
-
Backend with Node and MongoDB for storing the queries and user favorites