The /dashboard page on this portfolio is more than just a mockup; it is a live integration with our Coolify infrastructure. We wanted a UI that felt as powerful as Grafana, but as beautiful as an Awwwards winner.
Fetching the Telemetry
We built a secure server-side action to ping the Coolify API. Since this data is highly sensitive, the API token never leaves the server.
export async function getDynamicDashboardData() {
const url = `${process.env.COOLIFY_API_URL}/applications`;
const res = await fetch(url, {
headers: { Authorization: `Bearer ${process.env.COOLIFY_API_TOKEN}` }
});
const data = await res.json();
return mapToEcosystemNodes(data);
}The Visual Presentation
To achieve the "Command Center" look, we utilized:
- Glassmorphism: Deep backdrop blurs (
backdrop-blur-xl) combined with sub-pixel borders (border-black/5). - Phosphor Icons: Consistent, technical iconography.
- Framer Motion: Staggered entry animations that make the data feel like it's "booting up".
The result is a dashboard that not only looks like a sci-fi control panel but actually reflects the heartbeat of the Luxima ecosystem.