Skip to content

FlavrFindr, a cooking recipe app made with React, Tailwind and Vite. Developed for Chingu Voyage 46

Notifications You must be signed in to change notification settings

chingu-voyages/v46-tier2-team-20

Repository files navigation

FlavrFindr

Overview

FlavrFindr is the ultimate recipe app, merging the ease of a cookbook with real-time data from the Tasty API. Type in keywords, discover diverse recipes instantly. Ideal for chefs and enthusiasts, the app's user-friendly interface ensures a smooth experience. Intelligent error detection prompts users to input meaningful data. With its simplicity, real-time integration, and error prevention, FlavrFindr redefines cooking discovery. Explore flavors effortlessly with FlavrFindr – your go-to recipe companion.

Explore Live Version

Table of contents

Features

  1. Seamless Ingredient-Based Search Users can effortlessly discover recipes by typing ingredients into the search bar and initiating the search either by pressing Enter or clicking the search icon.

  2. Dynamic Recipe Retrieval A comprehensive list of recipes promptly appears based on the entered keywords, providing a diverse range of options matching the search criteria.

  3. Intuitive Recipe Display Recipes are elegantly showcased on the DOM, featuring enticing images paired with the names of each dish for a visually appealing browsing experience.

  4. Detailed Recipe Insights Users can click on any recipe card to access a wealth of information, including:

    • Ingredients required for the recipe
    • Quick video tutorial on how to make the dish
    • Detailed step-by-step instructions for preparation
    • Nutritional information of the recipe
  5. User-Friendly Navigation Exiting the detailed recipe view is convenient – users can either click anywhere on the screen or use the provided close button.

  6. Intelligent Error Handling FlavrFindr prevents user frustration by providing clear error messages when nonsensical input is detected during the search process.

  7. Responsive Error Notifications In cases where the search yields no results, the application communicates effectively, alerting the user to try a different search term for a more fruitful experience.

FlavrFindr is designed to deliver a seamless and enjoyable recipe discovery experience, ensuring users have the tools and information they need to explore the culinary world with ease.

Running the project

Follow these simple steps to get FlavrFindr up and running on your local machine:

  1. Clone the Repository: Open your terminal and run the following command to clone the repository to your local machine:
    git clone [email protected]:chingu-voyages/v46-tier2-team-20.git
  1. Navigate to Project Directory: Move into the project directory using the following command:
    cd v46-tier2-team-20
  1. Install Dependencies: Ensure you have all the necessary dependencies by running:
    npm install
  1. Start the Server: Launch the server with the command:
    npm run dev
  1. Build and Deploy: If you're ready to deploy, build the app with:
    npm run build

This will generate the necessary files for deployment.

  1. Access FlavrFindr: Open your preferred web browser and navigate to the local host address displayed in your terminal. The default is often http://localhost:3000, but refer to your terminal output for the exact local host address.

Now, you're all set! Explore FlavrFindr and discover a world of delightful recipes. Happy cooking! 🍳🎉

Dependencies

FlavrFindr utilizes the following key dependencies to deliver an efficient and delightful user experience:

  1. React: A declarative, efficient, and flexible JavaScript library for building user interfaces.

  2. Tailwindcss: A highly customizable CSS framework that provides low-level utility classes for quickly building modern designs.

  3. Vite A fast, opinionated web dev build tool that aims to provide a smoother development experience.

Feel free to explore each of these technologies to gain a deeper understanding of FlavrFindr's robust foundation.

Contributors

Developers:

  1. Allison | GitHub | LinkedIn
  2. Alexandra | GitHub | LinkedIn
  3. Emilie | GitHub | LinkedIn
  4. Komal | GitHub | LinkedIn

Designer: Nghia | GitHub |LinkedIn

About

FlavrFindr, a cooking recipe app made with React, Tailwind and Vite. Developed for Chingu Voyage 46

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published