Culinary Voyage

Culinary Voyage is a React project designed to showcase and search for recipes. It allows users to explore a variety of recipes and provides advanced search capabilities, such as filtering by ingredients.

checkout our trello

Click here to open

View the deployed version

View Deployed site

Our Presentation slides

View Slides

Running and Testing

To run and test the project, follow these steps:

1. Clone the repository:

   git clone <repository_url>

    cd Culinary-Voyage

2. Install depedencies

   npm install

3. Run the development server:

   npm run dev

file structure

Culinary-Voyage
├── public
├── src
│   ├── assets
│   │   └── react.svg
│   ├── Components
│   │   ├── FeaturedRecipe.jsx
│   │   ├── FilterSearch.jsx
│   │   ├── Footer.jsx
│   │   ├── Hero.jsx
│   │   ├── Navbar.jsx
│   │   ├── RecipeCard.jsx
│   │   └── RecipesContainer.jsx
│   ├── App.jsx
│   ├── index.css
│   └── main.jsx
├── .gitignore
├── eslint.config.js
├── index.html
├── package.json
├── README.md
└── vite.config.js

Components

FeaturedRecipe.jsx: Displays the featured recipe on the homepage, showcasing the most popular or highlighted recipe.

FilterSearch.jsx: Handles the advanced search functionality, allowing users to filter recipes based on various ingredients or criteria.

Footer.jsx: The footer section of the application, containing links and other information.

Hero.jsx: The hero section at the top of the homepage, typically used for a large, prominent image or message.

Navbar.jsx: The navigation bar that allows users to navigate between different sections of the application.

RecipeCard.jsx: A card component that displays individual recipe details, such as the image, title, and a brief description.

RecipesContainer.jsx: A container component that holds and manages multiple RecipeCard components, displaying a list of recipes.