fe-capstone-project-recipe-finder Tailwind Templates

Fe Capstone Project Recipe Finder

A Recipe Finder app built with React and Tailwind CSS

Recipe Finder šŸ³

Recipe Finder is a web application that allows users to search for recipes based on dish names and view detailed information about each recipe, such as ingredients and preparation instructions. The app is built using React, Tailwind CSS, and integrates with TheMealDB API to fetch recipe data.


Features ✨

  • Search Recipes: Search for recipes by dish name (e.g., "Pasta").
  • Recipe Details: View detailed information about a recipe, including:
    • Ingredients
    • Preparation instructions
    • Recipe image
    • Category and cuisine
    • YouTube video (if available)
  • Explore by Category: Browse recipes by predefined categories (e.g., Desserts, Main Course, Vegetarian).
  • Favorites: Add recipes to a favorites list stored in local storage.
  • Shopping List: Add ingredients from a recipe to a shopping list, with options to edit quantities and print the list.
  • Responsive Design: The app is fully responsive and works on all devices (desktop, tablet, mobile).

Technologies Used šŸ› ļø

  • Frontend:
    • React
    • Tailwind CSS
    • React Router (for navigation)
  • API:
  • Deployment:
    • Vercel

Live Demo 🌐

Check out the live version of the app:
šŸ‘‰ Recipe Finder on Vercel


Getting Started šŸš€

Follow these steps to set up the project locally on your machine.

Prerequisites

  • Node.js (v16 or higher)
  • npm or yarn

Installation

  1. Clone the repository: ```bash git clone https://github.com/Lanartcom/fe-capstone-project-recipe-finder.git cd recipe-finder

Top categories

Loading Svelte Themes