SWAAD

SWAAD is a web application that fetches recipes from an Tasty API, offering users a seamless and responsive platform to discover and explore a variety of dishes.

Table of Contents

• Overview
• Features
• Usage
  • How to Use
• Screenshots
• Running the project
  • Prerequisites
  • Installation
  • Quick Start

Overview

SWAAD is a web application that offering users a seamless and responsive platform to discover and explore a variety of dishes. The user-friendly interface provides detailed recipe information, search options. Built with React.js, Typescript. SWAAD is your go-to source for culinary inspiration.

Features

1. Search by Name or Ingredients: Users can search for recipes by entering either the recipe name or specific ingredients, providing a flexible and convenient search experience.

2. Autocomplete Feature: SWAAD offers autocomplete suggestions as users type, streamlining the search process and ensuring accurate results.

3. Light and Dark Mode: Enjoy a personalized viewing experience with the option to switch between light and dark modes, enhancing readability and reducing eye strain.

4. Saved Recent Searches: Users can conveniently access their recent searches, saving time and enabling quick reference to previously explored recipes.

5. Detailed Recipe Information: Each recipe page provides comprehensive details, including ingredients, nutritional value, preparation time, and step-by-step instructions.

6. Nutritional Value Display: The nutritional information for each recipe is prominently displayed, allowing users to make informed choices based on their dietary preferences or requirements.

7. Preparation Time Indication: Recipes include estimated preparation times, giving users a quick overview of the time commitment required for each dish.

8. Interactive Checklist for Ingredients: Users can mark off ingredients as they gather them, facilitating an organized and efficient cooking process with an interactive checklist.

9. Responsive Design: The SWAAD app is designed to be responsive, ensuring a seamless and enjoyable user experience across various devices, including desktops, tablets, and mobile phones.

10. User-Friendly Interface: The intuitive and user-friendly interface makes navigation smooth, allowing users to focus on discovering and exploring new recipes effortlessly.

Usage

This section provides instructions on how to use SWAAD project on your local machine.

How to Use

• Search for Recipes:

  • Enter a recipe name or specific ingredients in the search bar to find relevant recipes instantly.

• Explore by Cuisine:

  • Utilize the filter options to explore recipes based on different cuisines, broadening your culinary horizons.

• Toggle Light/Dark Mode:

  • Personalize your viewing experience by toggling between light and dark modes, enhancing readability and reducing eye strai

• Interactive Checklist for Ingredients:

  • When viewing a recipe, use the interactive checklist for ingredients to keep track of what you have prepared. Simply check off items as you gather them during the cooking process.

• Saved Previous Searches:

  • Take advantage of the saved Previous searches feature to streamline your exploration. Access your recent searches for quick reference and easy retrieval of previously discovered recipes.

Screenshots

1- Landing page

2- Recipe Page

3- Search Results

4- Search Suggestions

5- Previous Searches

Running the Project

These are the instructions on how to run the SWAAD on your local machine.

Prerequisites

Ensure you have the following prerequisites installed on your machine:

• Node.js: The JavaScript runtime environment for running the project.
• Git: Version control system for cloning and managing the project.

Installation

1. Clone the Repository:

   git clone https://github.com/chingu-voyages/v46-tier2-team-14.git
   

2. Install Dependencies:

   npm install

3. API integration: Configure the project to use your recipe API by updating the API key in the .env file. Follow these steps:

   • Obtain API Key

   Visit the Tasty API website to obtain your API key.

• Set API Key in .env

  1. Copy .env.template contents into a .env file in the root of your project.
  2. Open the .env file and edit the following line:

  VITE_API_KEY=YOUR_API_KEY_HERE

  Replace YOUR_API_KEY_HERE with the API key you obtained.

Dependencies

• @headlessui/react: ^1.7.17
• @tanstack/react-query: ^5.0.0
• axios: ^1.5.1
• react: ^18.2.0
• react-dom: ^18.2.0
• react-icons: ^4.11.0
• react-router-dom: ^6.16.0

Quick Start

Follow these steps to quickly start the project:

1. Run the Application:

   npm run dev

2. Access the Application: Open your web browser and go to http://localhost:3000 to access the SWAAD web app.