Mark Henderson
63f18d46a5
Three sub-areas, all real, no static placeholders:
Databases — listDatabasesInProject(coolifyProjectUuid). Type is
normalised (postgresql / redis / mongodb / mysql / keydb
/ dragonfly / clickhouse) so the tile subtitle is stable
regardless of how Coolify spells the engine.
Providers — auto-detected from env-var keys across every app + service
in the project. 35+ patterns covering Auth (Clerk, Auth0,
Supabase, NextAuth, SuperTokens, WorkOS, Firebase Auth),
Email (Resend, Mailgun, Postmark, SendGrid, SES, Loops),
SMS (Twilio, Vonage), Payments (Stripe, LemonSqueezy,
Paddle), Analytics (PostHog, Mixpanel, Amplitude, Plausible,
Umami), LLM (OpenAI, Anthropic, Google AI, Mistral, Cohere,
Groq, OpenRouter), Storage (S3, R2, GCS, Supabase),
Search (Algolia, Meilisearch, Typesense), Monitoring
(Sentry, Datadog, LogSnag). Each tile drills down to show
which app/service the keys live in and which keys matched.
Secrets — env-var totals per app/service, sorted by count. Values
are never read or returned from this surface — keys only.
The detail pane explains how to read/edit (via AI chat
with services.envs.* / apps.envs.* MCP tools).
Anatomy endpoint extended in the same single-fetch shape: env vars are
loaded once, then both detectProviders() and summariseSecrets() run
against that one source so we don't double-fetch.
The static What-lives-here grid is gone — every tile shown corresponds
to something that actually exists in the project.
Made-with: Cursor
VIBN Frontend
AI-Powered Development Platform - Track, manage, and deploy your AI-coded projects with ease.
🎨 Features
Built with Plane.so design patterns:
- ✅ Resizable Sidebar - Collapsible sidebar with peek-on-hover
- ✅ Dashboard Layout - Clean, modern interface following Plane's style
- ✅ Overview Page - Project stats, recent activity, and getting started guide
- ✅ Sessions - Track AI coding sessions with conversation history
- ✅ Features - Plan and track product features
- ✅ API Map - Auto-generated API endpoint documentation
- ✅ Architecture - Living architecture docs and ADRs (Architectural Decision Records)
- ✅ Analytics - Cost analysis, token usage, and performance metrics
- ✅ Porter Integration - One-click deployment for AI-coded tools
🛠️ Tech Stack
- Framework: Next.js 15 (App Router)
- Language: TypeScript
- Styling: Tailwind CSS
- UI Components: shadcn/ui
- Icons: Lucide React
- Notifications: Sonner
🚀 Getting Started
Quick Start
# 1. Install dependencies
npm install
# 2. Setup environment variables (see SETUP.md for details)
cp .env.template .env.local
# Edit .env.local with your Firebase credentials
# 3. Start development server
npm run dev
📖 For detailed setup instructions, see SETUP.md
Build
npm run build
npm start
📁 Project Structure
vibn-frontend/
├── app/
│ ├── (dashboard)/
│ │ └── [projectId]/
│ │ ├── layout.tsx # Main dashboard layout
│ │ ├── overview/page.tsx # Dashboard home
│ │ ├── sessions/page.tsx # AI coding sessions
│ │ ├── features/page.tsx # Feature planning
│ │ ├── api-map/page.tsx # API documentation
│ │ ├── architecture/ # Architecture docs
│ │ └── analytics/page.tsx # Cost & metrics
│ ├── layout.tsx # Root layout
│ └── page.tsx # Home redirect
├── components/
│ ├── sidebar/
│ │ ├── resizable-sidebar.tsx # Resizable sidebar wrapper
│ │ └── project-sidebar.tsx # Sidebar content
│ └── ui/ # shadcn/ui components
└── lib/
└── utils.ts # Utility functions
🎯 Routes
/[projectId]/overview- Project dashboard/[projectId]/sessions- AI coding sessions/[projectId]/features- Feature planning/[projectId]/api-map- API endpoint map/[projectId]/architecture- Architecture documentation/[projectId]/analytics- Cost and metrics
📊 Components
Resizable Sidebar
Based on Plane's sidebar pattern:
- Drag-to-resize (200px - 400px)
- Collapse/expand button
- Peek-on-hover when collapsed
- Smooth transitions
Dashboard Pages
All pages follow consistent patterns:
- Header with title and actions
- Content area with cards
- Responsive layout
- Empty states with CTAs
🔄 Next Steps
- Connect to Database - Wire up PostgreSQL data
- Build API Routes - Create Next.js API routes for data fetching
- Real-time Updates - Add live session tracking
- Porter Integration - Implement deployment workflows
- Authentication - Add user auth and project management
🎨 Design System
Following Plane.so patterns:
- Clean, minimal interface
- Consistent spacing and typography
- Subtle animations
- Dark mode support (via Tailwind)
- Accessible components (via shadcn/ui)
📝 Notes
- Built for Porter hosting deployment
- Designed for AI vibe-coded project management
- Real data integration coming next
- Backend API in
/vibn-backendfolder
Status: ✅ Frontend scaffolded and running Next: Connect to PostgreSQL database and build API layer