135 lines
3.9 KiB
Markdown
135 lines
3.9 KiB
Markdown
# 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
|