React Retail App

(Cmpletely resopnsive!)

Built with ❤️ using Finastra Design System

📸 User Interface

🧪 Try me out

👉 ReactRetailApp

🗺 Architectural Diagram

🌟 Features

Client

• Strict mode
• Smart and pure components pattern
• Self-contained components and encapsulated modules
• Components types (e.g. component, features)
• Amazing directory structure
• Dark mode

Server

• Smart Logging (human-readable or JSON if console is not interactive)
• Proxy
• Auth ready

Installation

1. Register an application on FFDC

You need to register an application on FusionFabric.cloud Developer Portal and select the following APIs:

• Account and Balances - B2C
• Consumer Profile
• Person to Person Paymenys

2. Setup environment variables

Rename .env.template to .env and setup OIDC_CLIENT_ID , OIDC_CLIENT_SECRET , OIDC_CLIENT_ID_B2B and OIDC_CLIENT_SECRET_B2B from the application created at step 1. 👌🏼

3. Run npm i

Build

This application contains 2 applications:

• React Application
• NestJs Application

So you need to run the following 2 commands:

npm run dev              # client build in watch mode
npm run start:server     # server build in watch mode

Go to http://localhost:3000 and enjoy your demo application 😊

To build for production, use npm run build, which will build both the client and server, and then npm run start which will run the application!

Environement variables

Variable	Default value
PORT	3000
OIDC_ORIGIN	http://127.0.0.1:3000
SESSION_SECRET	""
OIDC_SCOPE	openid
OIDC_CLIENT_ID	""
OIDC_CLIENT_SECRET	""
FFDC	"https://api.fusionfabric.cloud"

Logging in

Username	Password
ffdcuser1	123456
ffdcuser2	123456

🧙‍♂️ Commands

Command	Description
nx	See available commands
dev	Builds client in watch mode
start:server	Builds the server in watch mode
start	Builds the client and then starts the server in watch mode
build	Builds both client and server in production mode

Below are some more advanced commands that might speed up your development flow:

Generate a library

Run ng g @nrwl/angular:lib my-lib to generate a library.

You can also use any of the plugins above to generate libraries as well.

Libraries are shareable across libraries and applications. They can be imported from @finastra/mylib.

Code scaffolding

Run ng g component my-component --project=my-app to generate a new component.

Running unit tests

Run npm t to execute the unit tests via Jest.

Run npm run test:cov to execute the unit tests and output coverage.

Run nx affected:test to execute the unit tests affected by a change.

Understand your workspace

Run nx dep-graph to see a diagram of the dependencies of your projects.

Further help

• Finastra's Developer Portal
• Finastra's Design System
• React Documentation
• NestJS Documentation
• Nx Documentation