Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/willacosta/ng-shop-workspace
Angular Microfrontend application that uses NGXS as a state managment library and facade pattern
https://github.com/willacosta/ng-shop-workspace
ai ai-agents angular design-patterns facade frontend mfe micro-frontend module-federation ngxs recommendation-system rxjs stackspot-ai
Last synced: 22 days ago
JSON representation
Angular Microfrontend application that uses NGXS as a state managment library and facade pattern
- Host: GitHub
- URL: https://github.com/willacosta/ng-shop-workspace
- Owner: WillACosta
- Created: 2023-09-16T19:13:13.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-09-03T21:54:49.000Z (6 months ago)
- Last Synced: 2024-12-03T07:17:40.191Z (3 months ago)
- Topics: ai, ai-agents, angular, design-patterns, facade, frontend, mfe, micro-frontend, module-federation, ngxs, recommendation-system, rxjs, stackspot-ai
- Language: TypeScript
- Homepage:
- Size: 3.66 MB
- Stars: 4
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
### @ng-shop-workspace
A micro-frontend application powered by NX and Module Federation Plugin, this is a simple plant shop, that have features such as recommendation system using AI agents, authentication, cart shop and state management with redux pattern.
### Table of contents
- [Project Architecture](#project-architecture)
- [Technical Resources](#technical-resources)
- [Getting Started](#getting-started)
### Project Architecture
This project uses [Facade Design Pattern](https://refactoring.guru/design-patterns/facade), to simplify state management and abstract Redux Pattern APIs (via NgXS), with that concept the view layer don't have to know anything about implementation details and how state works under the hood.
All app logic is placed inside the correspondent `*State` class, with that concept we follow the guidelines for [single responsibility](https://www.digitalocean.com/community/conceptual-articles/s-o-l-i-d-the-first-five-principles-of-object-oriented-design), each layer is responsible for one thing.
See in the image below all the app's diagram flow:
### Technical Resources
- Recommendation system using AI agents ([StackSpot AI](https://www.stackspot.com/en/))
- Authentication flow with [Reqres.in](https://reqres.in/) integration
- Mono-repo managed by [NX CLI](https://nx.dev/)
- Micro-frontend approach using [Module Federation](https://webpack.js.org/concepts/module-federation/)
- State Management with [NGXS library](https://www.ngxs.io/)
- [Tailwind CSS](https://tailwindcss.com/) for create beautifully, responsive and accessible UI
- [Angular v16.2 | Node 16.x](https://angular.io/) for the micro-frontend apps
### Getting Started
1. Clone this repository
```bash
git clone https://github.com/WillACosta/ng-shop-workspace
```
2. Run the following command
```bash
pnpm install && pnpm bootstrap
```
By executing this command, all the required dependencies will be installed, and the application will be served on `localhost:4200`.
> Note: Go to the `apps/dashboard/src/environments` and copy the content of `environment.example.ts` and fill out with your own values. -- [get here](https://www.stackspot.com/en/).