Recipe Box Retrospective


The recipe box project is an application that allows a user to create, edit, and delete recipes. I struggled with this app a lot. The step up in difficulty from the first two Angular apps to this one was pretty big. I think I spent about a month trying to use the Angular router to put recipes on their own route like: recipebox/recipe/:id. Eventually, I realized that wasn't necessary and just used *ngIf to display whichever recipe was clicked in the recipe list.

This was also the first time, I believe, where I did any type of form validation in a project. I used an Angular template-driven form to build the recipe box inputs and used template driven form validation to ensure that the user did not try to submit invalid data.

The application also utilizes browser storage so that if you leave or refresh the page, your changes are stored between sessions. I used an external npm package to perform this and ended up making one of my first contributions to that project by editing and improving the use instructions in the README. That PR was merged in to this repo.

Code Review

Looking at the code I wrote for the Recipe Box, it's clear that the Angular CLI had matured by the time I started this project. The app uses the module pattern, so I no longer have directive or provider arrays in my component metadata, which is good. My template and CSS is also segregated into their own files, so that helps keep the component.ts files cleaner.

I spent a lot of time approaching this app from the wrong direction and there is still evidence of that even though I eventually figured it all out. I likely don't need a separate component for the recipe list. I think I could rewrite this to just be a single component.

I did show an improvement in my understanding of getting a component to call a service to do business logic and then having that service send back data to display to the user. I did also use the recipe interface I created, but not as fully as I could.

Future Improvements

I will definitely be rewriting this app and fleshing it out. I want to build a backend and database for this application so that my wife and I can actually use it. We cook lots of different recipes and right now they are scattered between different blogs and scraps of paper in our physical recipe box. In order to make that usable I have to:

  • Get a backend and database setup so that our recipe database is more permanent
  • Rewrite this front end to be more streamlined. I likely don't need separate areas for ingredients and instructions, just a single text area field to put all of that in together.
  • I would like the input fields to only appear when I've chosen to add a recipe. If I'm Looking at an existing recipe, it should be presented much nicer.
  • Like usual, I'd get rid of Bootstrap and build this with something else. I may use Material components to give it a cohesive look though.