recipe-box
🖥️

Recipe Box

Built with

html5
css
sass

Overview

I took FreeCodeCamp Front End Development Libraries Projects to improve my front end skills. With this project I used React and gained a better insight into local storage to save recipes.

Goals

Build a CodePen.io app that is functionally similar to this: https://codepen.io/FreeCodeCamp/full/xVXWag/. I decided to make the Recipe book look like a restaurant website where recipes can be added. The rules were simple, Rule #1: Don't look at the example project's code. Figure it out for yourself. Rule #2: Fulfill the below user stories. Use whichever libraries or APIs you need. Give it your own personal style. Rule #3: You must use both Sass and React to build this project.

Lessons Learned

In this project I successfully used Local storage to save, edit and delete users recipes.

recipe-box-mobile
Fig.1 - Mobile View of App

Process

I followed the freecodecamp user story:

  • User Story #1: I can create recipes that have names and ingredients.
  • User Story #2: I can see an index view where the names of all the recipes are visible.
  • User Story #3: I can click into any of those recipes to view it.
  • User Story #4: I can edit these recipes.
  • User Story #5: I can delete these recipes.
  • User Story #6:All new recipes I add are saved in my browser's local storage. If I refresh the page, these recipes will still be there.
recipe-box-tablet
Fig.2 - Tablet View of App