Let's discuss your "Recipe Box"

Greetings, Fellow Campers!

This topic is for listing and review of Recipe Box projects built as a part of FCC challenges. Please stick to these basic rules to keep the topic clean:-

  • Post your Codepen (or other) link to your project as a general reply to this topic.
  • For Codepen links use the following format to avoid embedding the pen:-
Project Link - [http://codepen.io/santakmishra/full/pgqOYq/](http://codepen.io/santakmishra/full/pgqOYq/)
  • Post reviews as a specific reply to the link which you are reviewing.

Project Link - http://codepen.io/elrolfe/full/VjagGr/

This was a challenge, getting all of the data items to interact correctly in React. I also took the opportunity to try out a some things that I’ve seen and liked from other websites (Editing the recipe name like CodePen’s pen titles without the use of a text field was a cool one to work out). It may not have been the smartest thing to do while trying to learn React at the same time, but it worked out well, I think.


You must be a week ahead of me in completing this track. Just saw your post about another react project that I am starting on.

Here is my recipe box -> http://codepen.io/ratracegrad/full/wWzKbv/


Hi Jennifer,

Your recipe box looks nice and clean. I did run into a problem though. I could add recipes, but I couldn’t edit or delete them.


Thanks for the feedback. I will work on that. Thanks again.

Project link - http://codepen.io/jnmorse/full/qZWJNp/

Been thinking of re-doing this one, and in fact been playing with an Electron desktop app version. https://github.com/jnmorse/recipe-box

I have updated my Recipe Box so that the edit and delete functionality are available.

Project link --> http://codepen.io/ratracegrad/full/wWzKbv/

Very Cool! Adding in the recipe instructions was a nice touch.

Excellent! It all worked for me. Good job!

Less is more, super minimalist

1 Like

Hello My Friends,
Here is my Recipe-Box App,
Project Link - https://aungmyokyaw.github.io/Recipe-Box/

Project Link - [http://codepen.io/Calibay/full/yJJPOY/] (http://codepen.io/Calibay/full/yJJPOY/)

I learned a lot about React.js from this project. For example, how to structure the parent-child relationships so that it always propagates down. I was stuck for a few days on the pushing the new states after the edit button but this taught me about component lifecycle.

I’m really looking forward to the game of life project. Thanks FCC!

This project was a lot harder than I was expecting it to be. I made a lot of mistakes and overall I’m not happy with my code quality but I definitely learned a lot about react and I know my next project will have cleaner code. Here’s my final result: http://twmilli.github.io/recipe-box/, let me know what you guys think!


Recipe Box Codepen

Had some trouble getting the username prefix added for the Codepen version after building this on my local machine. I think everything is working properly now.

1 Like

Here is my Recipe Box.

Recipe Box

I wanted to add some things like images and confirmation on form submission but it took me a while to do this so I think it’s time to move on to something else, maybe come back and add those things in the future. I feel like I have a much better understanding of React now though definitely.

Hey Campers :smiley:
Here is my Recipe Box :smiley:
Feedback would be appreciated :smiley:

Hi there! See my recipe box below.
If I had been aware of the existence of the react-bootstrap library, this code would have been much easier, shorter, nicer. Anyway, it also works like this.
Most challenging for me was the correct handling of child components with the key prop; and if I remember well this was the first project where I had to pass functions as props which was not very intuitive for the first time.

Project Link - http://codepen.io/dzsobacsi/full/xZvXPJ/

It looks cool, but when add new recipe , it shows last added recipe in input area (recipe name and ingradients ) :smiley:

Thanks for the feedback. I am going to check it.

I had an awesome time with this one. Lot’s of features to add. Lot’s of thinking about the fastest/least error prone way to add them. If you’ve got any feedback, I would appreciate it.
Project Link - [https://codepen.io/willgriffiths/full/qNVKoa/] (https://codepen.io/willgriffiths/full/qNVKoa/)

Happy coding!