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
   • Features
   • Technologies
2. The challenge
   • About Chingu
   • Basic requirements
3. Our Solution
   • Concept
   • Screenshots
   • Links
4. Getting Started
   • Run Locally
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

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

Links

• Live Site URL: YumYumYes.com
• Source Code: Github Repository
• Design Mockup: YumYumYes Figma Mockup

(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

• Greimil Nuñez
• Darrick Fauvel
• Tim DeHof
• Joseph Kotvas
• Henri Lambertucci

Thank you to Jim and the Chingu team!

(back to top)