T-frontend-react

A React frontend template tailored for enterprise applications, designed to help teams build scalable, maintainable, and well-architected UI projects.

---

Key Features

• Storybook integration
  Seamlessly collaborate between UX designers and developers with UX guidelines embedded in the documentation.

• Atomic Design component structure
  Promote reusable and consistent UI building blocks.

• Layered architecture
  Cleanly separate client-side business logic from UI code.

• Command & Query Responsibility Segregation (CQRS)
  Clearly separate commands (actions) from queries (data fetching), improving code organization and maintainability.

• RxJS-powered state management
  Enable a reactive programming style with data streams.

• Fitness functions
  Enforce and validate adherence to architectural principles during development.

---

Technology Stack

• React
• TypeScript
• RxJS
• tsyringe (dependency injection)
• Tailwind CSS
• class-variance-authority (utility for managing class names)
• i18n (internationalization)

---

Architecture Overview

---

Atomic Design Structure

The Presentation directory follows Atomic Design principles, dividing components into:

• Atoms
  Basic UI elements without business logic (e.g., buttons, inputs).

• Molecules
  Simple groups of atoms functioning together.

• Organisms and Pages
  Larger components and views that can subscribe to ViewModels or dispatch Events via the Application layer.

Note:

• atoms and molecules (in Presentation/Core) contain no business logic.
• organisms and pages live in business-domain subdirectories, connect to the application layer, and handle domain interactions.

---

Layered Architecture

1. Presentation
   UI components following atomic design.

2. Application
   Bridges UI and domain, prepares data for display.

3. Domain
   Core business models, rules, and event handling.

4. Infrastructure
   Technical concerns like API integration and data storage.

---

Commands & Queries

Commands

Inspired by Flux but using continuous event streams instead of a central store. Developers control UI updates (e.g., pause updates during user input).

Event Handler Example

import {
  EventHandler,
  type IEventHandler,
} from '@juwel-development/react-observable-tools';

@EventHandler("YOUR_EVENT_NAME")
class SomeEventHandler implements IEventHandler<YourEvent> {
  public handle(event: YourEvent): void {
    // Your business logic here
  }
}

Queries

In CQRS, it's a common pattern to allow the application layer to retrieve data directly from the infrastructure layer. This project follows that pattern.

Also, do not hesitate to use the Global Event Stream (GlobalEvent$) to build your view models based on application events.

State Management

This template does not use common state management patterns found in React applications, such as Redux or Zustand. Instead, it uses the approach of data streams.

Real-world example: Imagine you, as a human being, are an "observer" watching what happens in the world. Based on what you observe, you make decisions and take actions. This is the same approach used in this template.

This approach makes the application independent of the backend technology used. It can work with a REST API, GraphQL, or any streaming API ( e.g., a CQRS backend or Google Firebase) by implementing your repositories accordingly.