Can I Calorie?

Purpose of the App:

To provide a user interface to summarise caloric input and output.

Technology used

Angular

SASS

Angular Material

RxJs

NgRx

How The Application Works

• The application uses Angular to render the user interface via its component based architecture and build in modules.
• SASS is used to style my custom Angular components with css, variables and mixins.
• Angular Material was used to provide some prebuilt functional components that can be styled via the Angular config.
• NgRx is used to manage the state of the application by sending data from the store to the components.

What I Learnt

• How to use Angular and its ecosystem of packages to create a single page application for the first time.
• How to use Angular Material to create form fields, cards, buttons and other HTML elements.
• Understanding how to pass data through the application with Inputs so I can dynamically render new components.
• Developed intial understanding of RxJS to manage variables in the form of observables that will register changes and alter the data.
• Expanded understanding of NgRx to store the values from my components and pass them into a singular summary component.
• How to use animations using the built in Angular module to render page elements gradually on initial page load.

What Was The Biggest Challenge

The biggest challenge I faced as using NgRx as it requires a good understanding of state managment to implement. You have to create a fair amount of boilerplate code to get it working however once you understand it, it becomes a very powerful asset. It can easily send state through your components without needing to use complex Input and Output methods. I reversed engineered the example shown in the documentation to suit my own data structure and personal requirements.