Violet

Violet

23rd November, 2016

Web

Angular SCSS MongoDB Database real-time Redis TypeScript

Description

After interning as a Quality Assurance at a startup company, I was brought with a lot of surprises that Front-End had to offer. For one, I didn't expect how each Front-End frameworks would differ from one and another; from Angular to VueJS to React and even Svelte as of today. At the current time of making this website, I had little experience in using HTML and NodeJS but not in terms when it comes to implementing components structure HTML with JavaScript / TypeScript.

Alongside my universities studies, I used Angular as a stepping stone to learn about the MVP structure, state management controls and using CSS preprocessors (SCSS).

What is implemented?

  • Jikan's Public API to show a list of anime when using it to add to database for learning about Back-End development
  • Skeleton templating with lazy loading to show users the asynchronous loading of data being transferred via RESTful API
  • Login system (which was soon ignored) that connects to database to give different account role's permission via Json Web Token
  • State management via the use of shared service files
  • Adding in redis to help with caching database instead of calling RESTful API

What was the experience like in using Angular?

It wasn't great as there wasn't a course in my university that offers this at the time. As a result it was mostly via self-taught that allowed me find my strong passion in the Front-End side of web development where I use VueJS to build websites for showcasing at the time of writing this. Learning Angular opens up a lot of opportunity in applying best practices from universitiy's fundamental OOP together with TypeScript. With that being said, the use of SCSS helps me structure my code for reusability, reducing redundant codes allows a much cleaner code with less repetitive styling classes.

Last updated: 28th June, 2020