VIBN Frontend for Coolify deployment

2026-02-15 19:25:52 -08:00
commit 40bf8428cd
398 changed files with 76513 additions and 0 deletions
--- a/README.md
+++ b/README.md
@@ -0,0 +1,134 @@
+# 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
+
+```bash
+# 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](http://localhost:3000)
+
+**📖 For detailed setup instructions, see [SETUP.md](SETUP.md)**
+
+### Build
+
+```bash
+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