# 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