|
|
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.
- Showcase the featured recipes on the homepage.
- Showcase the latest recipes on the homepage
Featured Recipe & Latest Recipe displayed on the page is static.
- Allow users to search for recipes by name or first letter using the search bar.
- Users can filter recipes by their first letter, providing an intuitive way to browse through the recipe collection.
- Additional filtering by the full recipe name to quickly narrow down the options.
- Ingredient, Area, and Category Filtering
- Filter recipes based on the area of origin, allowing users to explore regional cuisines and discover new flavors.
- Organize and filter recipes by categories such as beef, chicken, desserts, and more, providing a structured browsing experience.
The website is fully responsive and optimized for mobile devices, tablets, and desktops, offering a seamless experience across all screen sizes.
- HTML
- CSS
- JS
- Swiper JS
- MealDB API
-
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.
-
Git: Ensure you have Git installed. You can download it from Git.
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-nameNavigate to the project directory and install the required dependencies using npm:
cd your-repo-name
npm installUse Vite to start the development server. This will serve your project and watch for any changes you make to the files:
npm run dev