Inspiration

What it does

How we built it

Challenges we ran into

Accomplishments that we're proud of

What we learned

What's next for APCS Agentics

About APCS: Rethinking Port Orchestration

🌊 The Inspiration

The global supply chain is only as fast as its slowest node. During recent global logistics crises, we observed that ports often become the primary bottleneck—not due to lack of physical space, but due to a "Digital Synchronization Gap."

We were inspired by the concept of the Digital Twin: the idea that if we can model the physical state of a port in real-time and provide predictive scheduling, we can eliminate the chaotic "first-come, first-served" queues that plague major terminals. APCS (Automated Port Control System) was born from the desire to turn "waiting time" into "working time."

🛠️ How We Built It

We built APCS using a high-performance, modern stack designed for low-latency data flow:

• The Foundation: Next.js 16 with TurboPack for nearly instantaneous development cycles and a robust App Router structure.
• The Brain: Supabase handles our real-time synchronization, utilizing PostgreSQL triggers to broadcast changes across all connected clients.
• The Interface: Tailwind CSS 4.0 enabled us to build a custom "Geo-Glass" design system that feels premium while remaining strictly functional for data-heavy dashboards.
• The Visualization: We leveraged @xyflow/react to create interactive terminal diagrams, treating port infrastructure as a dynamic graph where nodes represent gates and edges represent logistical paths.

🎓 What We Learned

Beyond the code, this project was a masterclass in Logistical Operations Research. We learned that building for logistics is about managing Entropy.

In port operations, we often deal with queueing theory. For instance, we applied Little's Law to understand terminal occupancy: $$L = \lambda W$$ Where:

• $L$ is the average number of containers in the terminal.
• $\lambda$ is the average arrival rate of trucks.
• $W$ is the average time a container spends in the terminal.

By optimizing $W$ through our batch-scheduling engine, we can directly reduce $L$ without expanding physical infrastructure.

🚧 Challenges We Faced

1. Race Conditions in Batching: Managing the state when 50+ containers are booked simultaneously was tricky. We had to ensure that if a single insertion failed, the entire batch was rolled back or flagged clearly to the user using asynchronous promise orchestration.
2. Responsive Complexity: Port dashboards are notoriously data-dense. Fitting a 24-hour schedule grid, a real-time activity log, and a terminal map onto a mobile screen without losing context was an immense design challenge.
3. Real-time Filter Propagation: Syncing the filters between different stakeholders (Admin vs. Operator) while respecting Row-Level Security (RLS) required a sophisticated custom hook architecture that wraps the Supabase client.

🚀 The Result

APCS is more than a dashboard; it's a synchronization layer for global trade. It proves that by applying modern web technologies to legacy industrial problems, we can create systems that are not only efficient but also human-centric.

Built With

• access
• and
• and-chronos-(forecasting).-database:-postgresql-17-with-pgvector-(for-ai-embeddings)-via-supabase.-real-time:-socket.io-and-supabase-realtime.-infrastructure-&-patterns-architecture:-domain-driven-modular-monolith-(bookings
• and-framer-motion-for-animations.-state-&-data:-tanstack-query-(server-state)
• and-recharts-(data-viz).-backend-(fastapi-&-ai)-core:-fastapi-(python-3.11)
• and-typescript.-ui/styling:-tailwind-css-v4
• and-uvicorn.-ai/ml:-langgraph-(agent-orchestration)
• and-zod-(validation).-specialized:-xyflow-(node-editors)
• cli.
• control
• custom
• docker-compose
• etc.).-devops:-docker
• frontend-(next.js-&-react)-core:-next.js-16
• gates
• jwks/jwt
• leaflet-(maps)
• mistral-ai-(llm)
• pydantic-v2
• react-19
• role-based
• security:
• shadcn/ui-(radix)
• slots
• supabase
• validation
• with
• zustand-(client-state)