Skip to main content

📊 Week 02: The Centralized Event Hub

Welcome to Week 02! You’ve already knocked out your personal dashboard; now we’re stepping into the world of Dynamic Orchestration. This week, you aren't just building a display—you are building the "Nervous System" for every application you will ever write.

📡 The Mission: Observation & Architecture

The goal is to build a Centralized Event Dashboard. This application acts as a private "Log Sink" or "Command Center." It provides a secure API that listens for "Events" from your other apps—whether it’s a successful user signup from a web app, a cron job failure in a Python script, or a simple cURL message from your terminal.

🛠️ Key Features

  • Project-Based Isolation: Create "Projects" (e.g., "Trading Bot", "Portfolio Site") to categorize data.
  • API Key Authentication: Every project generates a unique x-api-key to secure incoming data.
  • The Live Feed: A real-time interface displaying messages with Channel, Description, Priority, and Tags.

🚀 Step 0: Choose Your Stack

Before you run your first prompt, decide on your Tech Stack. You will need a database (like Supabase or PostgreSQL) to store your projects and historical event data.

Student Note: Are you a Next.js + Tailwind fan? Or do you prefer Python (FastAPI) + React? Specify this in your initial prompt so the AI builds the API routes correctly.

🚀 The Starter Prompt

Copy and paste this into your AI chat to generate the foundation.

Build me an events dashboard. Other applications send events to it through an API, and I see them in a real-time feed.

The app has two parts:
1. A REST API that accepts events via POST request (with API key authentication). This needs to run on a remote server so it's always available, even when my computer is off.
2. A dashboard that displays events in a feed, with search, filtering, and charts. This can run locally.

Each event has: a channel (category like "orders", "signups", "deploys"), a title, an optional description, an optional emoji icon, and optional tags.

Features I need:
- POST /api/events endpoint that accepts JSON and stores events in the database
- API key authentication (generate a key when creating a project)
- A feed page showing events in reverse chronological order
- Filter events by channel
- Search events by title, description, or tags
- At least one chart showing event activity over time
- The dashboard should update in real-time when new events arrive
- Use a cloud database that's always available (Supabase, Convex, or similar)

Make it clean and functional. I want to actually use this to monitor my own projects.

Before making any decisions on the stack. Make a stack proposal and ask me which I want to use.

Once you have the initial dashboard frontend, api and database running to your liking, you can continue with the next prompts, to make it better or add additional features to it.

📈 Evolution: 7 Prompts to Pro Power

Once your API can catch a message, use these iterative prompts to turn a "basic table" into a professional monitoring tool.

The Roadmap:

  1. The Polling Engine: Add real-time updates (WebSockets or 30s Polling).
  2. Visual Feedback: Implement loading skeletons and "Last Updated" timestamps.
  3. Advanced Filtering: Create a search bar and multi-tag filter for the event stream.
  4. Interactive Analytics: Add a Trend Chart (Recharts/Chart.js) showing event volume over time.
  5. Priority Alerts: Add logic to turn rows red or trigger browser notifications for "High" priority events.
  6. Detail Expansion: Build a "Detail Drawer" to view the full JSON metadata of a specific event.
  7. Key Management: Add a "Regenerate API Key" feature to rotate security credentials.

🛠️ Detailed Iterations

1. The Polling Engine

"Add a background polling function that fetches new data from the database every 30 seconds. Add a small 'Live' indicator dot in the header that pulses green when a fetch is successful."

2. Visual Feedback

"Implement 'Skeleton Screens' for the Metric Grid and the data table. While the API is fetching data, display pulsing placeholders. Ensure the transition to actual data is smooth and flicker-free."

3. Global Search and Filtering

"Add a search bar above the data table that filters the results in real-time as I type. Additionally, create a 'Priority Filter' (High, Medium, Low) that updates the list without a page reload."

4. Interactive Trend Charts

"Integrate Recharts to show a 'Trend Timeline' above the table. This line chart should map the number of events received per hour over the last 24 hours. Match the chart colors to the dark theme."

5. Visual Logic and Alerts

"Implement 'Conditional Formatting'. If an event has a 'High' priority, the table row should have a subtle red glow. If a 'High' priority event is received while the tab is inactive, trigger a browser toast notification."

6. Detail Expansion via Drawers

"Make every row in the data table clickable. When clicked, slide out a 'Detail Drawer' from the right side. This should display the full raw JSON data and metadata (like exact timestamp and tags) in a formatted, readable list."

7. API Key Security & Rotation

"Add a 'Project Settings' page. Allow me to rename the project or 'Regenerate API Key'. Regenerating the key should immediately invalidate the old one in the database and provide the new one to the user."

Back to top