Skip to content

makomweb/fullstack-symfony-react

Repository files navigation

Fullstack Demo: React 19 + Symfony 8 + MySQL 8

app-ci-workflow codecov

Purpose

A modern, full-stack, cloud-native game results tracker built on Event Sourcing and DDD principles.
Track and analyze game results using an immutable event log with comprehensive monitoring and observability.

logo

Tech Stack

Layer Technology
Frontend React 19 + MUI
Backend PHP 8.4 + Symfony 8
Database MySQL 8
DevOps Docker, Kubernetes, Helm, Open Telemetry, Grafana

Architecture Highlights

  • Event Sourcing – All state changes stored as immutable events
  • Domain-Driven Design (DDD) – Organized into generic, core, and supporting domains (enforced by deptrac)
  • Full Test Coverage – Easy to achieve high coverage on the core domain
  • Observable – Built-in OpenTelemetry instrumentation with Grafana dashboard
  • Cloud-Ready – Deployable to Kubernetes with included Helm charts

System Architecture

┌─────────────────────────────────────────────────────────────────────────┐
│                           Client Layer                                  │
├─────────────────────────────────────────────────────────────────────────┤
│                                                                         │
│  ┌──────────────────┐              ┌──────────────────┐                 │
│  │   React UI       │              │   Classic UI     │                 │
│  │  (Modern)        │              │  (Legacy)        │                 │
│  │  Port 8090       │              │  Port 8080       │                 │
│  └────────┬─────────┘              └────────┬─────────┘                 │
│           │                                  │                          │
└───────────┼──────────────────────────────────┼──────────────────────────┘
            │                                  │
            └──────────────────┬───────────────┘
                               │
┌──────────────────────────────▼───────────────────────────────────────────┐
│                        API Gateway Layer                                 │
├──────────────────────────────────────────────────────────────────────────┤
│                                                                          │
│              ┌─────────────────────────────────────┐                     │
│              │   Nginx (Reverse Proxy)             │                     │
│              │   Port 8080                         │                     │
│              └─────────────────────────────────────┘                     │
│                               │                                          │
└───────────────────────────────┼──────────────────────────────────────────┘
                                │
┌───────────────────────────────▼──────────────────────────────────────────┐
│                      Backend Application Layer                           │
├──────────────────────────────────────────────────────────────────────────┤
│                                                                          │
│  ┌────────────────────────────────────────────────────────────┐          │
│  │  PHP 8.4 + Symfony 8 Application                           │          │
│  │  - REST API Endpoints                                      │          │
│  │  - Business Logic                                          │          │
│  │  - Event Sourcing                                          │          │
│  └────────┬──────────────────┬─────────────┬──────────────────┘          │
│           │                  │             │                             │
└───────────┼──────────────────┼─────────────┼─────────────────────────────┘
            │                  │             │
    ┌───────▼──────┐   ┌──────▼────────┐  ┌─▼──────────────┐
    │              │   │               │  │                │
    │   Database   │   │  Redis Cache  │  │ Message Queue  │
    │   MySQL 8    │   │               │  │ (Messenger)    │
    │   Port 3306  │   │   Port 6379   │  │ - Async Tasks  │
    │              │   │               │  │ - Background   │
    │   Events &   │   │  - Sessions   │  │   Jobs         │
    │   Data       │   │  - Cache      │  │                │
    └──────────────┘   └───────────────┘  └────────────────┘
                                                    │
                                           ┌────────▼──────────┐
                                           │ Background Worker │
                                           │ (Messenger)       │
                                           │ - Process Events  │
                                           │ - Async Tasks     │
                                           └───────────────────┘

┌──────────────────────────────────────────────────────────────────────────┐
│                    Observability Layer (LGTM Stack)                      │
├──────────────────────────────────────────────────────────────────────────┤
│                                                                          │
│  ┌────────────┐  ┌─────────┐  ┌─────────────┐  ┌─────────┐               │
│  │ Logs       │  │ Traces  │  │ Metrics     │  │Grafana  │               │
│  │ (Loki)     │  │ (Tempo) │  │ (Prometheus)│  │Dashboard│               │
│  │ Port 3100  │  │ 3200    │  │ 9090        │  │3000     │               │
│  └────────────┘  └─────────┘  └─────────────┘  └─────────┘               │
│        ▲             ▲             ▲                                     │
│        └─────────────┴─────────────┘                                     │
│              OpenTelemetry Collector (Port 4317/4318)                    │
│                                                                          │
└──────────────────────────────────────────────────────────────────────────┘

Prerequisites

See the features page for a complete list.

Getting Started

Quick Start (5 minutes):

make dev      # Build development images
make init     # Setup DB, schema & fixtures
make up       # Start all services
make open     # Open dashboard in browser

What's running?

Stop everything:

make down

For all available commands, run make help or see the Makefile.

Services & Access Points

Frontend

Service URL Credentials
Classic UI http://localhost:8080
React UI http://localhost:8090

Backend & API

Service URL Credentials
API http://localhost:8080/api/games
API Docs http://localhost:8080/api/doc
Admin UI http://localhost:8080/admin admin@example.com:secret

Monitoring & Observability

Service URL Credentials
Grafana Dashboard http://localhost:3000 (Docker Compose) or http://kubernetes.docker.internal:30300 (Kubernetes)

Data & Infrastructure

Service URL Credentials
Database (Adminer) http://localhost:8085 root:secret
Redis Cache http://localhost:5540
RabbitMQ http://localhost:15672 guest:guest
Documentation http://localhost:8005

Quality Assurance & Development

Testing

make backend-test    # Run backend tests
make frontend-test   # Run frontend tests

Code Quality

make qa              # Full QA suite (tests + analysis)
make sa              # Static analysis
make cs              # Auto-fix code style issues

Utilities

make shell           # Shell access to PHP container
                     # Then run: php phploc.phar src/ (lines of code)

All commands: Run make help or see the Makefile.

Kubernetes Deployment

Install with Helm:

helm install app ./helm/app

# or with 2 replicas (Pods) each:
helm install app ./helm/app --set frontend.replicas=2 --set backend.replicas=2

# for telemetry:
helm install telemetry ./helm/telemetry

Access Services

Service Internal Local
API http://kubernetes.docker.internal:30100 http://localhost:30100
Webapp http://kubernetes.docker.internal:30200 http://localhost:30200
Dashboard http://kubernetes.docker.internal:30300 http://localhost:30300

See helm for configuration details.

Learning & References

Architecture & Patterns

Observability

Examples