> Rough time to finish **40 Days**

[TOC]

# Angular redesign proposal for react pages

Main reason for this redesign is to reduce depending on 2 separate workforces for each version this part covers the angular side proposal and estimates and tech debt coverage and estimated architecture.

## style guide
https://angular.io/guide/styleguide

## code Analysis
https://github.com/mgechev/codelyzer

## Documentation

I suggest using [Compodoc](https://github.com/compodoc/compodoc) for doc genration.

## State Machine
we can also levrage state machine fore this rearchiture.
For more details refre this articles
[Article](https://medium.com/angular-athens/working-with-state-machines-in-angular-2817441e26bf)
[video](https://www.youtube.com/watch?v=yv7Pgsu1RtI)

page restructuring and component estimations and rough architecture
---

# top level design

> Note: we can also leverage nx mono repo if we decide to make its library based if we decide to multi-lingual this way multiple teams will have it a bit easier to work on core pages where a small team can only work on core packages to make sure the QOC is proper and we can have proper documentation of each core component(ie. search checkin checkout calendar) and avoid unnecessary issues of component getting patched or chances of human errors

## general rules
* All data flow should be downwards and avoid multiple data firing points for a singular event
* All data should have an interface and interfaces should be implemented as classes for all data types and there should be no ambiguity of values all values must be properly typed according to their data types.
* all component styles should be encapsulated
* Try to avoid using the function for getting data that is to be used in HTML and make a pipe for that
* levrage async pipes for loaders
* use CDK popups for models and broadcast all lifecycle events of it
* When using intro and outro animation use angular animation API
* try to avoid adding attributes using vanilla js and setting styles from vanilla js for dom manipulation use r2
* make a constant file for all image URLs and make URLs available via exposing them as static members
* All modules should be lazily loaded
* use camel case for all variable names all components/services/directive/pipes should follow this structure
* All components should unsubscribe from subjects that are open in pages lifecycles
* class
* imports (alphabetically organized)
* global namespace variable decerations
* variable decerations
* view childs
* inputs
* outputs
* dom event handlers
* constructor
* lifecycle events
* functions
* utility frunctions

## Http Service
simple service for doing HTTP communication we can also use it for caching [refer this doc](https://web.dev/http-cache/) we can also use it as singular logging point for error reporting it can also make calls to events service for firing events to multiple providers

## Events Service
> Note: this service may contain separate services to modularize different event analysis providers

this service aims to make our events pipeline simpler and manageable. all events should be fired from this service and all events must have an interface assigned to them and should have a class dedicated to it with all transformations contained in that class.

## Auth Service
singular point for all things related to auth it can be login, OTP verification getting user data etc. can also make calls to events service for firing events to multiple providers

## Interceptors
this service should be used to make all modification to http request and hendling errors

## Ui libraries(buttons etc)
all ui libraries except component specific libraries should be imported via the ui libraries module

## Global data store
i have not planned this yet but we can levrage redux for global data store to persist data aross reloads

## Route parser service
this service will handle all routes data parsing and prossing and this will use angular router to parse route data

# Basic component break down(Home Page)


## Global components
* login
* signup
* otp-verify
* SearchBoxModel
* SearchBox
* SearchBoxDestination
* SearchBoxDestinationList
* SearchBoxCalender
* SearchBoxGeustSelector

* VistaFooter
* VistaFooterColumn
* VistaFooterRow
* navBar

## home page structure
* HomePageHeader
* HomePageHeaderTextSlider
* BrandFilmDisplay
* SearchBox
* SearchBoxDestination
* SearchBoxDestinationList
* SearchBoxCalender
* SearchBoxGeustSelector
* ElementSlider
* DestinationDisplay
* ElementSlider
* CollectionDisplay
* OffersSlider
* OffersDisplay
* HomePageMatricsSlider
* HomePageMatricsDisplay
* VistaFooter
* VistaFooterColumn
* VistaFooterRow

## Destination page structure

* navBar
* DestinationTitle
* DestinationFilterChipList
* DestinationCard
* DestinationCardFetaures