From API to Full-Stack: Building StreamStack's Web Dashboard + Text Posts

What a massive day! Just wrapped up two major phases of StreamStack development, and I'm honestly blown away by how much we got done.

Phase 8: The Dashboard Transformation

Started the day with a bare-bones Node.js API and ended with a full Next.js 14 dashboard. We're talking 16 new files and 2,757 lines of code. The architecture is clean—dashboard on port 3000 talks to the API on port 3001, no direct file access from the frontend.

The dashboard has everything you'd want:

• Dashboard home with stats cards and recent videos
• Scripts page with an inline JSON viewer (because who doesn't love debugging script structure?)
• Videos page with actual HTML5 video playback and download links
• Generate page with topic input, platform toggles, and real-time job polling
• Settings page (placeholder for now, but it's there)

Of course, nothing's ever that smooth. Hit a classic bug where the Generate page wasn't showing job results. Turns out the server was returning status "complete" but the dashboard was checking for "completed". One character difference, infinite polling. Fixed the types and now everything works beautifully.

Phase 9: Text Posts + Scheduling

But why stop there? Decided to tackle text post generation and scheduling in the same session. This is where things got really interesting.

Built a complete text post generator using Claude's API with a social media copywriter prompt. The cool part? It's platform-aware—different copy for Twitter vs LinkedIn vs Instagram. Extended the Blotato adapter to handle both video uploads and text posts seamlessly.

The scheduling system is my favorite part. Hand-wrote a cron parser (because apparently bun crashes on npm installs) and created a job scheduler that can rotate through topics. Want daily videos at 9 AM and social posts at 3 PM? Just drop it in config/schedule.json.

Added 5 new API endpoints to support everything:

• POST /api/generate-post for text generation
• GET /api/posts to list all posts
• GET/PUT /api/schedule for schedule management
• POST /api/schedule/trigger/:name for manual job triggers

The dashboard got two new pages: Posts (with expandable content and copy-to-clipboard) and Schedule (with enable/disable toggles and "Run Now" buttons). The Generate page now has a three-way mode toggle: Video, Text Post, or Both.

The Technical Details

Some decisions I'm particularly happy with:

• Two-process architecture: Keeps concerns separated and makes development easier
• No state management library: useState + useEffect is plenty for a local dev tool
• Video auth via query params: HTML5 video tags can't set auth headers, so we pass the API key as a URL param
• Optimistic UI: Schedule page updates locally first, then syncs with the server

The whole thing builds clean, TypeScript is happy, and the dark theme matches our AdminStack aesthetic perfectly.

What's Next?

Phase 8 Part 2 will add real-time job monitoring (probably WebSockets) and proper API key management. Phase 9 is basically done—just need to add the new pages to the sidebar navigation.

This is exactly the kind of build-in-public development I love. Started with an idea, built it incrementally, hit real bugs, fixed them, and ended up with something way more powerful than I initially planned.

Time to commit this beast and see what tomorrow brings. StreamStack is starting to feel like a real product.