Zero-Waste Recipes

Overview:

Reduce food waste by searching our database for an ingredient that you have getting ready to spoil in your refrigerator or pantry. You'll get a list of delicious recipes made with that exact ingredient.

Features:

Design comp built on Figma

• Responsive design features 1 recipe example on mobile 3 recipe examples on desktop to make finding the suggestions for use on the landing page easy to see

  • 

• Refresh button to navigate back to the homepage easily

Built using Agile principles and SCRUM methodology

• Team of 4 Developers: Begum, Erica, Tauri, and Terri.
• 6 week long sprints
• Tauri operated as designer and product owner in charge of managing the Sprint backlog.

• Our team frequently employed pair programming to teach each other Sass and work on Javascript together

Focus on Accessibility:

• 100% Accessibility Rating through Lighthouse!
• All colors for design checked with WebAIM Contrast Checker and passed WCAG AAA ratings
• Fonts no smaller than 16px, larger readable recipe cards
• All button inputs and icons are labeled for screen readers
• SVGs are used instead of fonticons to improve access for people who have adjusted their fonts in the browser
• all links and buttons labeled, aria-label for links and within the buttons with a class designating for screen readers only
• The "View Recipes" buttons and exit-buttons have an additional aria-describedby attribute so that people who use screen readers are forewarned that a modal will be opening up and then closing with each respective button
• All links have aria-describedby letting people who use screen readers know that it will open up a new tab and go to a different website
• Cards are clickable anywhere for people with mobility issues, but buttons are kept as anchor points for someone using a keyboard only

Dry Code focused on Readability:

• Sass: variables, partials, and nesting

• Semantic layout:

  • BEM for classes

• SVGs are coded into the HTML to decrease processing power, which is more green!

• Vanilla Javascript that prioritizes readability

  • Async fetch functions
  • Form validation
  • Functions declared so they are hoisted
  • 

Running the Project:

• Deployed to GH-Pages
• Github Repo

Dependencies:

TastyAPI Our app fetches recipes from the TastyAPI found at Rapid API: Tasty API. The call is made to the recipes/list endpoint.

IcoMoon for SVGs Main website, and Terms of Use(https://icomoon.io/#termsofuse)

Dart Sass CSS pre-processor