PoC Angular + PWA + NgRx + RTK (Redux Toolkit) + Router State + TailwindCSS + Formly

Demo of project

Table of Contents

Quick Start
Description
Code scaffolding
Contact

Quick Start

Run npm i
Run npm run start

Description

PoC of an Angular project with:

Angular Core

Core and Shared modules
Lazy Loading Features
Container / Presentational Components (Smart / Dumb Components)
Angular & Typescript Strict mode
TailwindCSS
Formly for generating dynamic forms
Multilingual site with my own Transloco Localize Router plugin and adds automatically hreflang links
Google Analytics with page views and events
Multilingual SEO (Important: It would have to be transformed to SSR/SSG application for optimal SEO)
Performance with the use of trackBy, OnPush, Intersection Observer ...

State Management

NgRx as State Management
NgRx + RTK (Redux Toolkit)
RTK Entity for the treatment of entities with NgRx
NgRx Router State to manage the state of the App from the Router in NgRx
Good Actions Hygiene to think on actions as events ([Source] Event), not as commands
ngrx-store-localstorage to save or retrieve parts of the state from the localStorage. We rehydrate NgRx content (Cache)

Other

Dark Mode with Media Query 'prefers-color-scheme: dark' support
Prefetch Directive to preload information when a component is hovered over or displayed on the screen
Auto Lazy Load Images Directive to automatically add lazy load to images if browser supports it
Skeleton content loader with TailwindCSS and @ngneat/content-loader
Auto deploy on Merge and preview on PR with Github Actions
CodeQL analysis
Husky and lint-staged to pass lint and prettier to changed code on commit
Commitlint to use Convetional Commits

Code scaffolding

# Create Lazy Feature
> ng g module features/(nombre-feature) --module [app | parent-module-name] --route (route-name)

# Create Data-Access of a Feature (Not Shared)
> ng g module features/(nombre-feature)/data-access-(state-name) --module features/(nombre-feature-padre)
> ng g feature features/(nombre-feature)/data-access-(state-name)/+state/(StateName) -m features/(nombre-feature)/data-access-(state-name) --creators --api
> ng g service features/(nombre-feature)/data-access-(state-name)/services/(service-name)
> ng g interface features/(nombre-feature)/data-access-(state-name)/models/(model-name) model

# Create Shared Data-Access
> ng g module shared/data-access-(state-name) --module shared
> ng g feature shared/data-access-(state-name)/+state/(StateName) -m shared/data-access-(state-name) --creators --api
> ng g service shared/data-access-(state-name)/services/(service-name)
> ng g interface shared/data-access-(state-name)/models/(model-name) model

# Misc
> ng g component features/(nombre-feature)/containers/(container-name)
> ng g component features/(nombre-feature)/components/(component-name)
> ng g service features/(nombre-feature)/services/(service-name)
> ng g interface features/(nombre-feature)/models/(model-name) model

Contact

Saúl Moro Gómez smoro@atsistemas.com

License

SaulMoro/poc-angular-pwa-ngrx-rtk-redux-toolkit-formly

About

Topics

Resources

License

Uh oh!

Stars

Watchers

Forks

Uh oh!

Languages