Tuesday, April 6, 2021

Angular Recipe App

While training at my first software engineering position at 3M, I was allowed to take an in-depth Angular Udemy course.  The project I built was coded the hard way, line by line.  It took over 3 months to complete in my spare time.  There were serious bugs in the Udemy course that had to be overcome, which made this project much more educational than the typical copy/paste tutorial.  

Throughout the course I learned many useful skills such as:

  • The fundamentals of creating an Angular application
  • Managing packages with NPM
  • RxJS basics
  • Adding basic Bootstrap formatting features
  • Handling forms
  • Authentication
  • Managing data on a simple Firebase Realtime Database
  • Deploying my application from a simple Firebase Server
My fully functional application is available HERE.  It contains data that would be easily erased if I allowed just anyone to login.  I would be happy to demonstrate it for you if you would like to see it in action.

____________________________


 Here we login to the application.


____________________________


Here we can pull our data from the Firebase Realtime Database.


____________________________

Here we can select a recipe, view its ingredients, edit the ingredients, or delete the recipe.
The edit and delete features drop down from the 'Manage' tab.


____________________________

There is also a shopping list feature that survives page changes.