The Problem
Internal operations teams often end up managing their work across a scattered set of tools: one place to find new content, another to track data sources, a third to kick off background jobs, and a spreadsheet or wiki page holding it all together. Nothing is wrong with any single tool, but the seams between them cost time — someone has to remember where each piece of information lives and manually connect the dots.
The client needed a single, real-time dashboard that could serve as the operational home base for a content-focused workflow: discovering and reviewing content, managing the registry of sources that content came from, and triggering and monitoring cloud-based jobs — all without switching tools or waiting for stale data to refresh.
The brief, in short: one internal tool, built for daily use, that stays current in real time and doesn't get in the way of the people using it.
The Approach
Automations Limited's founder, Mustafa Haider, took this on as a full-stack engineering project, working directly in Next.js 14, TypeScript, Supabase, and Google Cloud Platform.
The guiding decision was to keep the architecture as direct as the problem allowed. This was an internal tool for one team, not a public-facing product serving multiple external clients — so rather than building a traditional API layer between the frontend and the database, the dashboard connects to Supabase directly, using custom schema routing to keep data access organized and scoped correctly. Fewer layers meant fewer places for something to break, and fewer things to maintain as the tool evolved.
TypeScript was run in strict mode throughout, which matters more for an internal tool than it might seem — this is software the operations team depends on every day, and catching type errors at build time rather than discovering them in production keeps a daily-use tool trustworthy.
How It Works
The dashboard is organized around five main routes, each built around a specific piece of the team's workflow:
- Content Explorer — the primary view for discovering and reviewing content as it comes in.
- Source Registry — where the team manages and tracks the sources that content is pulled from.
- Job Trigger Console — an interface for manually triggering and monitoring background jobs.
- Directory — a reference view for organizational or contact information relevant to the team's work.
- Internal Docs — internal documentation kept alongside the tool itself, rather than in a separate wiki.
Cloud job orchestration. The Job Trigger Console isn't just a status page — server-side API routes within the Next.js app trigger GCP Cloud Run Jobs directly. This keeps job execution decoupled from the dashboard's frontend: the dashboard requests a job, Cloud Run handles the actual execution, and the dashboard reflects the result. Heavy or long-running work never blocks the interface the team is using.
Direct Supabase connection with custom schema routing. Rather than routing every read and write through an intermediate API, the dashboard talks to Supabase directly. Custom schema routing keeps different categories of data properly separated and scoped, so the simplicity of skipping an API layer doesn't come at the cost of organized, safe data access.
Cookie-based auth with sliding-timeout middleware. Access to the dashboard is controlled through cookie-based authentication, with middleware that implements a sliding timeout — a session stays valid while someone is actively working, and expires automatically after a period of inactivity. This fits how an internal tool actually gets used throughout a workday, without the complexity of a full customer-facing identity system.
A custom design system. Rather than relying on off-the-shelf UI components, the dashboard uses a custom glassmorphism design system built in Tailwind CSS. For a tool the team opens dozens of times a day, the interface itself is part of the product — clear visual hierarchy and a consistent look reduce the friction of using it.
Tools & Stack Used
- Next.js 14 — application framework for the dashboard
- TypeScript (strict mode) — type safety across the entire codebase
- Supabase — database and backend, connected directly with custom schema routing
- Tailwind CSS — styling framework used to build the custom glassmorphism design system
- GCP Cloud Run — cloud job execution, triggered from server-side API routes
- Automated Cloud Build pipeline — continuous deployment for the dashboard
Outcome
The result is a single real-time operational dashboard that covers content discovery, source management, and cloud job orchestration in one place, replacing what would otherwise be a set of disconnected tools. The codebase runs to approximately 5,238 lines of TypeScript, written entirely in strict mode, and deploys automatically through a Cloud Build pipeline whenever changes are pushed.
Lessons Learned
The clearest lesson from this build was that architectural complexity should match the actual audience, not a hypothetical future one. It's tempting to build an API layer into every project as a "best practice," but for a single-team internal tool, that layer would have added latency, maintenance surface, and a whole category of bugs (versioning, serialization mismatches) without solving a real problem. Connecting directly to Supabase — with custom schema routing to keep data access properly scoped — turned out to be both simpler and safer for this specific case, because the safety came from correct scoping, not from an extra layer of indirection.
The second lesson was about taking the interface itself seriously for internal software. Internal dashboards are often treated as an afterthought visually, on the assumption that only the team will ever see them. But a tool used dozens of times a day has its interface friction compound quickly. Investing in a coherent, custom design system paid for itself in how much faster the team could actually work inside the tool, not just in how it looked.
Considering Something Similar?
If your team is juggling several disconnected internal tools to manage day-to-day operations, this same approach — a focused set of routes, real-time data, and an architecture sized to who's actually using it — can be adapted to your workflow. Book a free automation audit and we'll tell you honestly what an internal dashboard like this would take to build for your team.