@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
• Technical Resources
• Getting Started

Project Architecture

This project uses Facade Design Pattern, 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, 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)
• Authentication flow with Reqres.in integration
• Mono-repo managed by NX CLI
• Micro-frontend approach using Module Federation
• State Management with NGXS library
• Tailwind CSS for create beautifully, responsive and accessible UI
• Angular v16.2 | Node 16.x for the micro-frontend apps

Getting Started

1. Clone this repository

git clone https://github.com/WillACosta/ng-shop-workspace

2. Run the following command

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.