The Meridian Grid

Project Overview

The Meridian Grid (TMG) acts as a bridge between the physical world of mechatronics and modern software architecture. It provides real-time visualization of sensor data and remote actuation capabilities, serving as a comprehensive learning platform for full-stack development, containerization, and industrial communication protocols.

Architecture

graph TD;
    Browser["User Browser (localhost:8080)"] -- "Port 8080" --> Nginx["Nginx (Client Container)"];
    Nginx -- "Proxy /api" --> Server["Express API (Server Container:3000)"];
    Server -- "TCP" --> DB["PostgreSQL (DB Container:5432)"];
    Nginx -- "Static Content" --> React["React App"];

Loading

Getting Started

Prerequisites

• Docker & Docker Compose

Running the Application

1. Clone the repository.
2. Create a .env file in the TheMeridianGrid/ directory (refer to .env.example if available).
3. Start the stack:

   docker-compose up --build

4. Access the application:
   • Frontend: http://localhost:8080
   • API Status: http://localhost:8080/api/hello

Weekly Progress

Week 1: Scaffolding & Containerization

• Initialized Vite/React frontend and Express/TypeScript backend.
• Containerized both services using Docker.
• Orchestrated the stack with Docker Compose and Nginx reverse proxy.
• Established basic client-server communication.

Week 2: Database & API Design

• Conducted requirements gathering and BPA analysis.
• Designed the ERD and semantic data model (AAS/DTDL inspired).
• Implemented Prisma ORM with PostgreSQL.
• Created a modular API architecture (Service-Controller-Router).
• Implemented full CRUD for Asset Management with Zod validation.

Week 3: Core Features (Telemetry & Rules)

• Enabled TimescaleDB and created telemetry hypertable.
• Implemented transactional Telemetry Ingestion Service.
• Built Rules Engine with synchronous evaluation and alert deduplication.
• Verified system with end-to-end Simulation Script.
• Refined architecture with Global Error Handling and PlantUML documentation.

Week 4: Authentication & Security (IAM)

• Implemented Secure Authentication (Argon2id + JWT + HttpOnly Cookies).
• Established Role-Based Access Control (RBAC) with ADMINISTRATOR, INTEGRATOR, OPERATOR, VIEWER roles.
• Built User Management API (CRUD) protected by RBAC.
• Refactored architecture with Centralized Dependency Injection (AppContainer).
• Implemented robust Integration Testing infrastructure with isolated Test Database.

Week 5: Frontend Architecture & Shared Library

• Created tmg-shared npm workspace for isomorphic Types/Schemas.
• Established Frontend Architecture (React Router, Layouts, AuthContext).
• Built Composable Dashboard Engine using react-grid-layout and Registry Pattern.
• Implemented Asset Management UI (DataGrid + Create Modal) connecting to API.
• Standardized UI with Material-UI (MUI) Theme.

Week 6: Dashboard Persistence & Production Readiness

• Implemented Dashboard Layout Persistence (Backend/Frontend).
• Integrated React Query (TanStack Query) for efficient server-state management.
• Added Global Error Handling (ErrorBoundary + Notification Context + Global API Catching).
• Optimized performance via Route-based Code Splitting and Loading Fallbacks.
• Created ISA-101 Compliant High-Performance HMI (Operator View Prototype).
• Hardened Docker configuration for monorepo workspace compatibility.

Usage Guide

Authentication

The API is now protected. To access protected endpoints (like Asset Management), you must first login.

Default Credentials:

• Email: admin@tmg.com
• Password: admin123

Login Request:

POST /api/auth/login
Content-Type: application/json

{
  "email": "admin@tmg.com",
  "password": "admin123"
}

The server will set a token HttpOnly cookie automatically.

Tech Stack

• Frontend: React, TypeScript, Vite, Nginx
• Backend: Node.js, Express, TypeScript
• Database: PostgreSQL (TimescaleDB Extension)
• Orchestration: Docker Compose