My first React App

My intention with this project was to upgrade my previous app (Pantr-e) and make its functionality more accurate to what I expect the final product will be, which is an interface that allows users to personalize their recipes, store them, and use them to intuitively display a comprehensive shopping list tailored to their needs.

The first challenge in crafting this app was to determine which components I would create, the most convenient hierarchy of the working tree, and how to arrange the hooks in regards to how the information would flow within it.

I was confident in developing a RESTFUL API on a JSON server to fulfill the requirement of the users being able to post their own recipes and customize the list of ingredients.

It was a challenge to publish it on “Render” but I finally managed to make it work successfully, although it doesn´t save the data permanently and resets after every session, for testing purposes it works.

I initially didn´t create a Navbar since I was planning to render all the components on one page. But around halfway through the project, I decided to separate the functionality of the App into two different pages, so it was clearer in terms of usability, being these: the form, to create new recipes, and the collection of recipes.

I created a controlled component called NewRecipe that contains the form to post a personalized recipe that is an object, that contains an array of objects being the ingredients, with the name (as key), and the amount (as value). Using an effect hook that gets posted to the JSON server, and added to the recipes state.

This state is used in the Recipe Collection component, which acts as the nucleus of the app, displaying all the objects in the array. This component also creates another array of objects, posts them to the API, and stores them in a state, which is the shopping list, that at the same time is displayed in the Shopping list component.

Therefore the flow of data between the components would look like the following diagram:

At this stage, the Navbar was the way to navigate back and forth through the components, but I didn´t code it properly. I was rendering the Router and the Links in the same component, which I changed after, leaving just the links and moving the Routers to the App component.

Inside the Recipe Collection, there´s a component called Recipe Card, whose job is to render each individual recipe, displaying them with a toggle button that opens the component, since I thought it would upgrade the user experience to be able to close and open the information of the ones they were interested in.

I encountered problems in making this component work the way I wanted because again the code became very dense, that´s why I decided to create a child component to display the ingredients of each recipe separately and to be able to select them and send them to an array that would create the shopping list.

The Ingredients component is essentially a function that iterates through the recipes array to display the ingredients using a .map array iterator method, due to the need for immutability of this array but still have an updated version of it:

Then the shopping list component repeats the same function structure to display the individual ingredients that have been added to the shopping list in an ordered list:

This last component is what really adds value to the whole project since it’s the final product that we want to obtain by the use of the app, and it´s what needs to be mutable in every use of the latter. Every week the needs of the user would change in terms of their pantry inventory of the change in their meal’s selection.

Giving the user the option to store their personalized favorite recipes and reuse them every week they need and giving them the ability to partially select each individual item of it, gives the necessary flexibility that I wanted to achieve with this app.

React has made the coding of this product much more concrete and flexible, giving me the option to work on different areas of the working tree separately and modify them without affecting the others, and at the same time passing information from one to another such as hooks and functions as props