Recipe Search App Documentation

Recipe Search App Documentation

Overview

The Recipe Search App is a React-based application that fetches and displays recipes from the Edamam API based on user input. Users can search for recipes by entering an ingredient or dish name, and the app will fetch matching recipes with details such as title, calories, ingredients, and an image.

Technologies Used

  • React.js
  • Fetch API
  • CSS Modules

File Structure

RecipeApp/

│-- src/

│   │-- App.js

│   │-- Recipe.js

│   │-- App.css

│   │-- recipe.module.css

│-- package.json

│-- README.md

 

Installation & Setup

Clone the repository:
git clone https://github.com/brahmaputraS/react-project.git

  1.  

Navigate to the project directory:
cd RecipeApp

  1.  

Install dependencies:
npm install

  1.  

Start the development server:
npm start

  1.  

App.js - Main Component

Description

App.js is the main component that handles state management, API calls, and rendering the search bar and recipe list.

State Variables

  • recipes (array): Stores the fetched recipe data.
  • search (string): Stores the user input for searching recipes.
  • query (string): Stores the final search term used in the API request.

Functions

  • getRecipes(): Fetches recipes from the Edamam API.
  • updateSearch(e): Updates the search state based on user input.
  • getSearch(e): Sets the query state with the search term and triggers a new API request.

API Integration

The app fetches data from Edamam API using:

fetch(`https://api.edamam.com/search?q=${query}&app_id=${APP_ID}&app_key=${APP_KEY}`)

 

JSX Structure

<form className="search-form" onSubmit={getSearch}>

    <input className="search-bar" type="text" value={search} onChange={updateSearch} />

    <button className="search-button" type="submit">Search</button>

</form>

<div className="recipes">

    {recipes.map(recipe => (

        <Recipe key={recipe.recipe.label} {...recipe.recipe} />

    ))}

</div>

 

Recipe.js - Recipe Component

Description

Displays individual recipe details such as title, ingredients, calories, and image.

Props

  • title (string): Recipe name.
  • calories (number): Caloric content.
  • image (string): Recipe image URL.
  • ingredients (array): List of ingredients.

JSX Structure

<div className={style.recipe}>

    <h1>{title}</h1>

    <ol>

        {ingredients.map((ingredient, index) => (

            <li key={index}>{ingredient.text}</li>

        ))}

    </ol>

    <p>Calories: {calories}</p>

    <img className={style.image} src={image} alt="Recipe" />

</div>

 

Styling

  • App.css: Global styles for layout and form.
  • recipe.module.css: Component-specific styles.

How to Use

  1. Enter an ingredient or dish name in the search bar.
  2. Click the "Search" button.
  3. View the list of matching recipes.

Notes

  • Ensure you replace APP_ID and APP_KEY with valid credentials from Edamam.
  • API has rate limits, so excessive requests might fail.

Future Improvements

  • Add pagination to handle large result sets.
  • Implement loading indicators.
  • Improve styling for better UI/UX.

Screenshots: