Skip to content

Latest commit

 

History

History
260 lines (201 loc) · 10.1 KB

README.md

File metadata and controls

260 lines (201 loc) · 10.1 KB
Raw


YumYumYes.com - Recipe Search Web App

YumYumYes! is a beautiful, full-featured, responsive web app that interfaces with the Tasty API and allows users to search, view and save recipes. It was built from the ground up for Chingu Voyage 46.
Explore the docs

View Demo Report Bug Request Feature

Table of contents
  1. Overview
  2. The challenge
  3. Our Solution
  4. Getting Started
  5. The Team

Overview

Features

YumYumYes allows users to:

  • Ability to search for recipes by ingredient(s)
  • Filter search results based on recipes tags
  • Save recipes to their favorites list
  • View their personal favorites list at any time

Technologies

Vite Tailwind React-Query React-Router

Dependencies
  • Vite.js
  • Tailwind.css
  • Headless UI
  • Axios
  • React Query
  • Prettier
  • ESLint

    • (back to top)

    The challenge

    About Chingu:

    Chingu is a community of developers who are passionate about learning, helping others, and collaborating on projects. It is a remote, self-organizing, project-based learning platform. Chingu helps you to build your portfolio and network while collaborating on real-world projects with remote team members. "Chingus" are motivated learners who are self-directed and take responsibility for their own learning.

    Basic requirements:

    Use the Tasty API to create an app that will help anyone interested in creating dishes and flavours to explore recipes in novel ways.

    Landing Page

    User can see a landing page containing at least the following components:

    • Header component displaying a welcome message.
    • Search field that enables users to input ingredient(s).
    • Component to explain the use of the application.
    • A scrollable list of recipes displaying the results based on the search criteria. Keep in mind that the Recipe API has over 1500 Recipes, however, it's paginated with 20 recipes per page of result.
    • A summary main recipe component: it should display recipe image, name and link to details.
    • A summary detail recipe component: it should display recipe name, category, and instructions.
    • Ensure mobile responsiveness for the application.

    Search Component

    Users can input one or multiple ingredient(s).

    • Initiate the search by either pressing the Enter key or clicking the 'Search' button/icon.
    • Display an error message when an unlisted item is entered.

    Main Data Display Component

    • Display results for each recipe in the main component.
    • Remain on the landing page if no search ingredient has been entered.

    Summary Detail Component

    Display the following information of the selected recipe:

    • Name
    • Category
    • List of instruction
    • List of nutrition
    • Add a Link to the instruction video

    (back to top)

    Our Solution

    Concept

    We developed a unique web app with a distinctive brand and a whimsical, animated design. YumYumYes! is intended to make recipe browsing fun! Colorful mascots Yumi and Chef Carrots welcome visitors to our pages, and delightful visual motifs including text gradients, 3d colored balls, dashed lines and gentle curves are intended to make the app feel more alive and engaging.

    The app is built as a fully responsive web app compatible with all modern web browsers, both mobile and desktop. We've taken care to make it intuitive for all users, and accessible to users with different abilities.

    Screenshots

    Home Page Home Page

    Links

    (back to top)

    Getting Started

    Run Locally:

    1. signup for a RapidAPI account to get a API Key at Tasty API

    2. Clone project locally:

    git clone git@github.com:chingu-voyages/v46-tier2-team-19.git

    3. Create a .env.local file and add environment variables

    4. Run Client:

    cd v46-tier2-team-19
npm install
npm run dev

    (back to top)

    The Team

    Thank you to Jim and the Chingu team!

    (back to top)