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

Open http://localhost:3000

📖 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

1. Connect to Database - Wire up PostgreSQL data
2. Build API Routes - Create Next.js API routes for data fetching
3. Real-time Updates - Add live session tracking
4. Porter Integration - Implement deployment workflows
5. 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-backend folder

---

Status: ✅ Frontend scaffolded and running Next: Connect to PostgreSQL database and build API layer