← Back to Portfolio

AssetShield

TechnologiesFigma, Flutter, Next JS, tRPC, PostgreSQL, Prisma, Vercel

Architecture at a Glance

%%{init: {'theme': 'default', 'themeVariables': { 'background': '#ffffff', 'canvasBackground': '#ffffff', 'primaryColor': '#fff' }}}%%
flowchart TD
  subgraph DesignLayer [Design & Mobile]
    figmaDesign[Figma Design System]
    flutterApp[Flutter Mobile App]
  end

  subgraph WebFrontend [Next.js Frontend]
    nextJS[Next.js Framework]
    parallelRoutes[Parallel Routing Slots]
    uiComponents[Ant Design & Tailwind CSS]
  end

  subgraph LogicLayer [Type-Safe API & AI]
    trpc[tRPC API]
    zodValidation[Zod Validation]
    langGraph[LangGraph AI Agents]
  end

  subgraph DataLayer [Persistence]
    prismaORM[Prisma ORM]
    postgreSQL[PostgreSQL Database]
  end

  figmaDesign --> nextJS
  nextJS --- parallelRoutes
  nextJS --- uiComponents

  nextJS <--> trpc
  flutterApp <--> trpc
  
  trpc --- zodValidation
  trpc <--> langGraph
  trpc <--> prismaORM
  
  prismaORM <--> postgreSQL

  nextJS & trpc --> vercelHost[Vercel Deployment]

The Problem

Industrial operations often struggle with fragmented equipment data and complex workflows, leading to information overload for technicians and engineers alike.

The Solution

We integrated state-machine AI agents and a role-based modular UI to deliver high-fidelity asset insights. By combining predictive logic with a streamlined, industrial-grade design system, we transformed dense operational datasets into intuitive, context-aware dashboards.

The Impact

This platform eliminates cognitive friction, enabling teams to act on critical maintenance needs with precision while maintaining enterprise-grade safety and system-wide data integrity.