Home Page

Recipe Details Page

Recipe Result Page

What is FindRecipe?

FindRecipe is a recipe website project built using JavaScript. It allows users to explore and discover various cuisines from around the world. The site is powered by the MEALDB API, which provides detailed information for each recipe.

Features

1. Display of Featured and Latest Recipes

• Showcase the featured recipes on the homepage.
• Showcase the latest recipes on the homepage

3. Display recipe details

• Users can go to recipe's respective page by clicking the 'View Recipe' button.
• The button will direct them to the recipe page which contains the information about the recipe, including the instructions on how to prepare it, ingredients, etc.

2. Recipe Search Functionality

• Allow users to search for recipes by name or first letter using the search bar.

3. Recipe Filtering

• Users can filter recipes by their first letter, providing an intuitive way to browse through the recipe collection.
• Ingredient, Area, and Category Filtering

4. Responsive Design

The website is fully responsive and optimized for mobile devices, tablets, and desktops.

Tech Stack

• HTML
• CSS
• JS
• Swiper JS
• MealDB API

Prerequisites

1. Node.js and npm: Make sure you have Node.js and npm installed on your computer. You can download and install them from Node.js.

2. Git: Ensure you have Git installed. You can download it from Git.

Step-by-Step Setup

1. Fork and Clone the Repository

Fork the repository to your own GitHub account and then clone it to your local machine using the following commands in your terminal:

git clone https://github.com/your-username/your-repo-name.git
cd your-repo-name

2. Install Dependencies

Navigate to the project directory and install the required dependencies using npm:

cd your-repo-name
npm install

3. Start the Development Server

Use Vite to start the development server. This will serve your project and watch for any changes you make to the files:

npm run dev

Connect With Me :)

• LinkedIn
• GitHub
• X (Twitter)