Skip to content

Latest commit

 

History

History
84 lines (52 loc) · 2.59 KB

README.md

File metadata and controls

84 lines (52 loc) · 2.59 KB

Recipe Site

A recipe site built with React that allows users to search for recipes and categories. The site features a light and dark theme toggle.

Features

  • Guided Tour: Introduces users to key features and navigation using Shepherd.js.
  • Light and Dark Theme: Toggle between light and dark themes for a personalized experience.
  • Recipe Search: Easily search for recipes using the search bar.
  • Recipe Categories: Browse recipes by categories such as Desserts, Main Courses, Appetizers, and more.
  • Popular Categories: Highlighted popular categories for quick access.
  • Recipe Details: Detailed view of each recipe with ingredients and instructions.

App is Live Here

https://recipehub-nine.vercel.app/

App Preview ScreenShots:

first-img second-img third-img fourth-img fifth-img

App preview Video:

RecipeHub.-.Google.Chrome.2024-05-30.01-41-09.mp4

Getting Started

Follow these instructions to get a copy of the project up and running on your local machine for development and testing purposes.

Prerequisites

  • Node.js (version 12 or later)
  • npm (version 6 or later)

Installation

  1. Clone the repository:

    git clone https://github.com/Aniketikhar/ReactJs-RecipeHub.git
cd recipe-site

  2. Install dependencies:

    npm install

  3. If you encounter an npm install error, use the following command:

    npm install --legacy-peer-deps

  4. Start the development server:

    npm start

    The app should now be running on http://localhost:3000.

Usage

Search for Recipes

  1. Use the search input on the home page to enter the name of a recipe.
  2. Click the "Search" button to view search results.

View Recipe Details

  1. Click on any recipe in the search results to view its details.
  2. The recipe details page will display the ingredients, steps, and a YouTube video if available.

Toggle Light/Dark Theme

  1. Use the checkbox at the top of the page to toggle between light and dark themes.