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-labelfor links, usedaria-describedbyfor 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 usedaria-describedbywith 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!
Top comments (41)
What an awesome project, Tauri!! Your team did a fantastic job. You should feel very proud of yourself. ❤️
Hey Tauri — I just got around to reading through your post and I have to say, your journey is super motivating. From working behind the front desk to now leading a front-end project with a team is no small feat. I especially appreciated how you broke down complex concepts like API data parsing and accessibility; in one of my past projects, I remember staring at an array for 7 inches of screen width trying to figure out how to make the UI responsive and intuitive at the same time. That kind of “edge case thinking” is exactly what makes a product polished. Your focus on clear communication, WCAG compliance, and structured task division really resonates — it’s that extra level of care (the kind where you test what 7 inches wide looks like on various devices) that distinguishes solid work from great work. Thanks for sharing your process so transparently — it gives me a lot of ideas to apply to my own projects.
Hi Tauri! Your Zero-Waste Recipes app is such an inspiring and thoughtful project. It’s fantastic to see how your team leveraged the Chingu Voyage program to create a tool that not only sharpens your technical skills but also promotes sustainability by helping users reduce kitchen waste one ingredient at a time. Building a fully functional app with "must haves" and room for creativity within just 1.5 months is a commendable achievement, and it’s clear that your dedication to learning and teamwork paid off beautifully. As a Front End Developer and student engaged in continuous learning, you are on a great path both technically and professionally. Your story is a great example of how coding bootcamps and online communities like Skillcrush and Chingu can empower aspiring developers to build real-world projects and prepare for employment. If you’re interested in furthering your education and career development, the British Council’s Scholarships offer fantastic opportunities to fund advanced studies and training in tech and design globally. These scholarships can be a valuable resource to complement your hands-on experience and accelerate your growth in the industry.
Hi Tauri! It's inspiring to see your journey as a Front End Developer and student at Skillcrush, an amazing online coding and design school with a heart. Your dedication to continuously improving your skills and sharing your projects through your blog is truly commendable. For anyone interested in learning more about flexible, mentor-led coding programs that help build real portfolios, checking out Skillcrush is a great step. If you're looking to showcase your development work or create a professional online presence, building a well-designed Sito Web will definitely set you apart and highlight your growing expertise. Keep up the great work, and best of luck with your job search!
I was searching for details about the Duhail immigration office timing, and this post really cleared things up. It’s important to know the exact working hours before visiting to avoid long waits or wasted trips. Thanks for sharing this useful information!
This is an incredible and detailed walkthrough! Your team's collaboration and commitment to accessibility and efficient project management really shines through. The whole process, from backlog management to the final deployment with a 100% Lighthouse rating, is a masterclass in structured development. It just goes to show how important good planning and a solid structure are, not just in coding projects but in daily life as well. For instance, knowing the operating hours for a daily commute is essential for a smooth day. For anyone in Dubai, having a reliable source for the Dubai metro timings can make a huge difference in their schedule: nolcardbalanceae.com/dubai-metro-t....
If you're making an international payment to an HSBC account in the UK, using the correct HSBC IBAN number UK is key to ensuring your money arrives safely and on time. We’ve put together a clear and helpful guide to make the process easier for you.
Hi Tauri, I completely understand the challenges you mentioned in your post about building the recipe app with your team. I went through a very similar experience during a group project where we had to integrate an external API while managing both front-end design and functionality under tight deadlines. One of the biggest challenges we faced was coordinating task division while maintaining consistent code quality and accessibility standards—much like your team’s focus on BEM and aria attributes. We also struggled with handling nested API data structures, which required some trial and error to parse correctly; your approach of collaboratively extracting meal types from arrays of objects really resonated with me. What truly helped us was setting up clear sprint goals and keeping detailed documentation and meeting notes, similar to your Google Drive strategy, which streamlined collaboration despite the hurdles of remote work. Your commitment to accessibility and WCAG AAA compliance is admirable and aligns with standards we also aspired to, although it was definitely a steep learning curve. On a related note, if you or others are considering advancing your career through formal qualifications, exploring the acca admission process can be a valuable step towards professional growth. Overall, your project is a fantastic example of teamwork and thoughtful design. Thanks for sharing your experience—it’s inspiring to see how others overcome these common obstacles!
Hi Tauri, I totally understand the challenges you mentioned in your post about building the recipe app with your team. I faced a very similar situation during a group project where we had to integrate an external API and manage both front-end design and functionality within a tight timeframe. One of the biggest hurdles for us was coordinating the division of tasks while ensuring consistent code quality and accessibility standards, much like your team’s use of BEM and aria attributes. We also struggled a bit with handling nested API data structures, which took some trial and error to parse correctly—your approach of working together to pull meal types from arrays of objects really resonated with me. What helped us was setting up clear sprint goals and maintaining detailed documentation and meeting notes, similar to your Google Drive strategy. It made collaboration smoother and kept everyone aligned despite remote work challenges. Your focus on accessibility and WCAG AAA compliance is impressive and something we aimed for as well, though it was a steep learning curve. Overall, your html creator project sounds like a fantastic example of teamwork and thoughtful design. Thanks for sharing your experience—it’s encouraging to see how others navigate these common obstacles!
Hey,
Starting from front desk and moving to front-end development is like leveling up your career step by step just like how Buffalo Wild Wings Happy Hour levels up your day with great deals and good vibes. Whether it's coding with your team or enjoying wings after work, both bring people together in the best way.