Recipe Finder

This app will help you to find recipes based on the requested ingredients. The application uses API to access hundreds of recipes stored on an external server. It fetches the requested data from the server and transform it to the list of recipes.

The goals of creating this application:

The main goals for me as a web developer were to improve my skills in working with:

• HTTP requests using the fetch API interface;
• the map() method to get data stored in arrays;
• the useState() hook;
• props (to pass data from Parent to Child);
• callback functions (to pass data from Child to Parent)
• CSS Modules;
• reusable components (e.g. there's only 1 button component for the entire app, which can perform the actions "Search", "Close", and "Go Back");

To view the app in the browser, copy and paste the following line to your browser URL address bar:

https://sharinlana.github.io/react-httpRequest-recipes/

To start the app on your machine:

1. Clone the project to your machine by running:

git clone https://github.com/SharinLana/react-httpRequest-recipes.git

2. To install the project dependencies, run:

npm install

3. When the installation is complete, run the following command to start the app:

npm start

Languages, frameworks, libraries, tools and technologies:

• React.js
• JavaScript
• CSS Modules

Functionalities:

• processing user input, making an HTTP request, and receiving the data from an external server;
• displaying JSX elements on demand (e.g. the list of recipes appears on the screen only after clicking the "Search" button);
• input validation and informing the user about input errors through a modal error window;
• error modal window closes when you click on the button, and also when you click on any place of the screen;
• responsive design (mobile adaptation)