From Front Desk to Front End p.41 Recipe App with a Team

Hi, I'm Tauri!

I am a Front End Developer and a student (and enrollment counselor) with Skillcrush, the online coding and design school with a heart! I am open for employment with a company, and working on adding to my skillset every day! This blog is chronicling my most recent projects, so thank you for reading!

I just finished a Voyage with Chingu! We are grouped into teams and assigned a web app to make with particular "must haves", and some suggestions for "should" and "nice to haves", then otherwise given free reign about how to build our project within a 1.5 month timeframe!

This is what my team and I built together: Zero-Waste Recipes, an app designed to help you decrease waste in your kitchen one ingredient at a time! You can find the repo in the footer!

I was grouped with an AMAZING team of women developers (you can connect with us in the footer of the web app too!), and our criteria was to design and build an app that allowed you to pull recipes from a given API based on a search for a single ingredient!

I volunteered to additionally be the designer and the product owner IN ADDITION to being a developer on the team!

As the product owner: I pitched the ideas to my team to orient our app around reducing food waste. I researched data to back up the necessity for waste reduction, and came up with further suggestions to use our app to help the planet.
I also managed the backlog, but I'll get to that more in a bit.

As the designer: I put together the design on Figma. I chose our theme colors based on representing different seasons with a warm magenta and cool teal and pale green, I made sure everything met WCAG AAA contrast standards, was big and readable with black and white playing in to make it easy on the eyes. I created the desktop design with mobile examples to show what components would need to be more narrow to fit in to a mobile screen size. I also made sure all of the buttons had hover/focus colors to increase visibility, and all of the icons are SVGs instead of fonticons in order to be more accessible for people who update their fonts in the browser.

Then I discussed with my group and built our backlog based on our division across 6 week-long sprints, and we worked together to create a general direction for our Epics and User Stories and made sure everything was cohesive and understandable as I bounced off my group to break everything up into tasks.

We chose to use Vanilla JavaScript for our app bc there wasn't a lot of data being received and there was only two areas (the recipe card interface and the modal) being updated with the data Vanilla JavaScript was a perfect fit, and using React.js or another library just wasn't necessary.
We chose to use Sass bc we wanted to take advantage of Sass variables, nesting, and partials in order to organize our CSS.

I maintained our meeting notes, brought in all tasks from the week before to review, go over where our current project was at, look over anything that didn't go as smoothly as it should have from the Sprint before, and prepared us for the Sprint to come.
We made a Google Drive for all of our notes, important links, design files, guides we shared with each other, our vision statement, and the videos we made for each other to share our some of our processes when we worked separately although we did a lot of pair programming as well.

For the HTML/CSS:

• I built the search bar and related buttons as well as the footer. In addition to the View Recipe buttons on our recipe cards, I upheld high standards of accessibility by making sure all the buttons had an understandable label, used aria-label for links, used aria-describedby for any buttons to describe the functionality of the refresh button and the View Recipe button which opened a modal and the exit button for the modal which would return back to the main page. I also used aria-describedby with links to clarify that a new tab would be opened and the user would be taken to a different website. I put all of the SVGs into our build with code bc it loads faster than importing from a file or online. I also ensured all of the buttons had a semi-transparent border for people who use high-contrast mode, and that the Github icon link had a square border upon hover/focus for that reason (and all text links of course come with their built in focus/hover border). Because of all of this, our app has a 100% accessibility rating through Lighthouse!
• Erica built the recipe details we were going to put into a modal.
• Begum kept our code to a good BEM standard.
• Terri built the recipe cards and the flexible container around them and the media queries that narrowed some components for mobile.

On the JavaScript side:

• I built the form validation and our functions to take assign data from the search into the variables of what we wanted to display, then expressions to build and display the recipe cards. This includes the function to display some recipe examples when you first load the page (Terri awesomely adapted it to show only 1 in mobile and 3 in tablet+).
• Begum made the function to call data from the API and the function to refresh the page and return to our landing area.
• Terri built the code to open and close the modal and build the lists for ingredients and instructions so she could display the details for each recipe within tags Erica had prebuilt in the HTML. Her and I figured out together how to pull the data for the meal type which was buried in the API under arrays, and objects, and arrays of objects.

The must-haves for our project were: search by ingredient, view results in summary form including the name of the recipe and a picture, and be able to click to view further details including the name, picture, meal type, and instructions.

Just as best practices, our should-haves were WCAG AAA levels of color contrast, aria properties and SVGs for accessibility, form validation, an interface that informed the user "No recipe found!" when there was no data from the API that matches their search, BEM style classes, function declarations, and modular functions.
And we also felt the recipe details should include ingredients as well as instructions, bc what's a recipe without a list of ingredients?

Nice-to-haves included the refresh button to return to the landing page, the suggestions and stats to support how our app is geared towards waste reduction, the attribution to Chingu and reference to our teammates with links to our LinkedIns.

We put our CSS and HTML thru the W3C validators, Terri and I worked hard to make sure everything was well organized and readable, put the URL through Lighthouse as we completed our final deployments, and made sure we credited our dependencies like the Tasty API, Sass, and the place I got the SVGs from Icomoon.

This was such a rewarding and fun project!

Most of this was due to my amazing team! 10/10, would highly recommend Chingu to coders and designers who wants to flex their hard and soft skills with a team! And 10/10 for building with awesome teams!