Angular: front-end from start to MVP

by Kate Sky

I am making this post as the first step in documenting my journey of building an Enterprise application for my side project.

The application is in the process of going towards an MVP.

This application is an “Uber for home services.” 

The reason I had started this project: is to provide a value-based service while practicing and teaching others skills I had acquired over the years.

The objective of this post is to establish a timeline of the application going live from its infancy.

Following is the list of topics that we are going to discuss in this article:

1. Application Stack
2. Architectural decisions
   1. Monorepo with Nx
   2. Domain-Driven Design with Angular
   3. State management with NGRX
   4. Logging with LogRocket
   5. Authentication with Auth0
3. Conclusion
4. Links

1. Application Stack

WEB- Angular
API – .Net Core
DB – SQL server

2. Architectural decisions

For web client, I am using Angular framework.

My goal – to be able to scale the development of this application by having the ability to go from one team to many teams building multiple frontend and backend applications all in the same workspace. 

I chose NX, so developers have a holistic dev experience powered by an advanced CLI (with editor plugins), capabilities for controlled code sharing, and consistent code generation.

Monorepos allow huge enterprise applications to be subdivided into small and maintainable libraries. I followed the best practice from the creators of NX and have added a domain-driven design approach to creating the features. One of the features is the search capability for the providers that are displayed. I added a domain ‘Providers’ it contains the feature store for state management and the infrastructure where service is implemented to call the API.

We need to first define criteria for slicing our application into individual parts and we must establish rules for communication between them.

referenced: https://www.angulararchitects.io/aktuelles/sustainable-angular-architectures-1/

I have added NGRX from the very beginning because I would like to have an ability to replay the user’s trip through the application, and I will be adding LogRocket to view that path. NGRX will also help me write clean reactive components with async pipes. Root store has its own module and is at the root of the application.

Stop guessing why bugs happen. LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster.

https://logrocket.com/

Since we have 2 features now, we can see that NGRX stores for each feature are located near the domain for each feature’s library. There is separate module for each store to be able to import each feature module lazily.

Users have to register, and for authentication, I picked Auth0. Right now, you can see that authentication is on the root store. I have a login and logout actions that are calling the service to execute the correct code. I am using the service I download from the example provided by auth0. It still needs to be cleaned up. 

I added a component for the callback path need for the login of the authentication. There is a CanActivate guard that is used for components that need an authorized user.

3 . Conclusion

In conclusion, we will go through whats next.

I wanted to get the frontend started first and have a clear user experience throughout the application.

I will add the .net Core API to store the data to the database next.

I deployed code to GitHub pages to be able to get user feedback at the very early stages of this application.

4. Links

Code: https://github.com/katesky/saraphan-radio

Dev version: https://katesky.github.io/saraphan-radio/

Domain: http://saraphanradio.com