Mark Henderson
7a9cd68ea8
User feedback: the previous flow was a single-screen "name + audience"
dialog that gave AI no context about what the user actually wanted to
make. That worked for the demo but produced messy projects in practice
because everything was decided after the fact in chat.
The new flow asks the user one human question first ("How would you
like to begin?") and then captures the minimum context needed to seed
the AI's first conversation in the project.
Three paths, each is a 2-step setup screen with internal step dots:
- Build your own idea — Step 1: name + audience. Step 2: free-text
"what do you want to build". Becomes the project's vision and the
AI's first-message context.
- Run an open source tool — Step 1: name + audience. Step 2:
segmented tabs to either (a) paste a GitHub link or (b) describe
the kind of tool you want and have Vibn find one. Vision is set
to either "Install and host this open-source project: <url>" or
"Find and install an open-source tool that fits this need: <desc>"
so the AI knows which mode to operate in on first chat.
- Import existing code — Step 1: name + audience + repo URL.
Step 2: optional "what do you want to do with it" textarea.
Public repos only for v1; private-repo OAuth lands later.
Backend:
- /api/projects/create now accepts and persists `creationMode` and
`sourceData` on the project record under a `kickoff` blob:
{ mode, sourceData, vision, createdAt }
The chat endpoint will read this on first turn to seed the AI
with the user's stated intent rather than asking them to re-type
it in chat.
Cleanup:
- Removed FreshIdeaSetup, CodeImportSetup, ChatImportSetup,
MigrateSetup — replaced by BuildSetup, OssSetup, ImportSetup.
- Removed the unused initialWorkspacePath prop from
project-association-prompt (the new flow doesn't take it).
- TypeSelector defaults are restored — the modal opens on the
type-picker step now, not directly on a setup form.
UI building blocks added to setup-shared:
- TextArea (multi-line input)
- StepDots (page indicator)
- SegmentedTabs (generic-typed tab selector, used in OSS Step 2)
- SecondaryButton (used as ← Back inside Step 2)
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