Implementing a Real-Time Project Dashboard with Next.js, Prisma, and PostHog

TL;DR: I built a real-time project dashboard for VibeCoding using Next.js, Prisma, and PostHog, focusing on a separated global dashboard repository. This technical deep-dive covers the architecture decisions, specific file changes, and code implementations.

The Problem

The initial problem was to create a real-time project dashboard for VibeCoding that displays the status of multiple projects. The dashboard needed to be integrated with ClickUp and display data in real-time. The error message I encountered was related to the incorrect implementation of the PostHog tracking, which led to incorrect web vitals and engagement metrics.

What I Tried First

My first approach was to use a single repository for the global dashboard and the VibeCoding panel. However, this approach led to complexity and scalability issues. I tried to implement the dashboard using a single Next.js page, but it resulted in a messy code structure.

The Implementation

To solve this problem, I decided to separate the global dashboard into its own repository. I created a new Next.js page for the VibeCoding panel and implemented the real-time project dashboard using Prisma and PostHog.

File Changes

The following files were modified:

• src/app/vibe/page.tsx: This file was updated to display the VibeCoding panel with real-time project data.
• prisma/seed.ts: I added new seed data for the tasks and projects.
• src/app/tasks/page.tsx: This file was updated to display the tasks with real-time status updates.
• src/components/layout/Sidebar.tsx: I added a new link to the VibeCoding panel.
• src/components/shared/NewTaskModal.tsx: This file was updated to create new tasks with real-time status updates.
• src/components/shared/TaskCard.tsx: I added a new component to display task cards with real-time status updates.

Code Snippets

Here is an example of the updated src/app/vibe/page.tsx file:

/**
 * /vibe — Panel de control VibeCoding (solo ADMIN)
 * Muestra el estado de los 4 proyectos desde ClickUp en tiempo real.
 */
import { PageHeader } from "@/components/shared/PageHeader";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";

const VibePage = () => {
  return (
    <div>
      <PageHeader title="VibeCoding Panel" />
      <Card>
        <CardHeader>
          <CardTitle>Project Status</CardTitle>
        </CardHeader>
        <CardContent>
          {/* Display project status data here */}
        </CardContent>
      </Card>
    </div>
  );
};

export default VibePage;

Here is an example of the updated src/server/actions/tasks.ts file:

"use server";
import { revalidatePath } from "next/cache";
import { updateTaskStatus, updateTask, createTask } from "@/server/repositories/tasks";

export const updateTaskStatusAction = async (taskId: string, status: string) => {
  const updatedTask = await updateTaskStatus(taskId, status);
  revalidatePath("/tasks");
  return updatedTask;
};

Key Takeaway

The key takeaway from this implementation is the importance of separating concerns and using a modular architecture when building a real-time project dashboard. By separating the global dashboard into its own repository, I was able to simplify the code structure and improve scalability.

What's Next

In the next iteration, I plan to implement AI-powered project insights using OpenSource libraries and improve the productivity features of the dashboard. I also want to explore using PostHog for more advanced analytics and engagement metrics.

vibecoding #buildinpublic #nextjs #prisma #posthog

---

Part of my Build in Public series — sharing the real process of building Building Riviera Industrial ERP from Playa del Carmen, México.

Repo: zaerohell/riviera-industrial-erp · 2026-07-04

#playadev #buildinpublic