VIBN Frontend for Coolify deployment
This commit is contained in:
321
NAVIGATION_STRUCTURE.md
Normal file
321
NAVIGATION_STRUCTURE.md
Normal file
@@ -0,0 +1,321 @@
|
||||
# 🧭 Navigation Structure - Product-Centric Workflow
|
||||
|
||||
**Last Updated:** November 19, 2025
|
||||
|
||||
## Overview
|
||||
|
||||
The navigation is structured around a **phased workflow** that guides solo founders and small teams from idea to launch.
|
||||
|
||||
---
|
||||
|
||||
## 📱 Main Navigation (Left Rail)
|
||||
|
||||
### **Always Visible**
|
||||
```
|
||||
💬 AI Chat - AI interview assistant
|
||||
🏠 Home - Project dashboard & overview
|
||||
📖 Knowledge - Context (docs, repos, chats)
|
||||
```
|
||||
|
||||
### **Phase 1: DEFINE** ✨
|
||||
```
|
||||
🎯 Vision - Product strategy & vision
|
||||
🎨 Design - UI/UX screens & flows
|
||||
📣 Marketing - Messaging & launch strategy
|
||||
```
|
||||
|
||||
### **Phase 2: BUILD** 🔨
|
||||
```
|
||||
📋 Build Plan - MVP scope, backlog, milestones
|
||||
💻 Development - Codebase, architecture, deployment
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 📄 Page Structures
|
||||
|
||||
### 1. **Vision** (`/vision`)
|
||||
**Purpose:** Define what you're building and why
|
||||
|
||||
**Sidebar Navigation:**
|
||||
- Product Overview
|
||||
- Problems We Solve
|
||||
- Target Users
|
||||
- Success Metrics
|
||||
- Competitive Landscape
|
||||
|
||||
**Content:**
|
||||
- Product name, one-liner, vision statement
|
||||
- Problem cards with descriptions
|
||||
- User persona cards
|
||||
- Key metrics with targets
|
||||
- Competitor analysis
|
||||
|
||||
**Key Actions:**
|
||||
- Edit Vision
|
||||
- Add Problem
|
||||
- Add User Type
|
||||
- Add Competitor
|
||||
|
||||
---
|
||||
|
||||
### 2. **Design** (`/design`)
|
||||
**Purpose:** Create and manage UI/UX
|
||||
|
||||
**Sidebar Navigation:**
|
||||
- Core Screens (tree view)
|
||||
- User Flows (auth, onboarding)
|
||||
- Style Guide
|
||||
- Brand Assets
|
||||
|
||||
**Content:**
|
||||
- Tree view of product screens
|
||||
- AI-suggested screens
|
||||
- v0 integration for screen generation
|
||||
- Version history
|
||||
- Comments & feedback
|
||||
|
||||
**Key Actions:**
|
||||
- Generate Screen
|
||||
- Connect GitHub
|
||||
- Sync Repository
|
||||
- Create Flow
|
||||
|
||||
**Individual Screen View:** `/design/[pageSlug]`
|
||||
- Live preview
|
||||
- v0-style chat interface
|
||||
- Design Mode (click to target elements)
|
||||
- Version history
|
||||
- Push to Cursor
|
||||
|
||||
---
|
||||
|
||||
### 3. **Marketing** (`/marketing`)
|
||||
**Purpose:** Define messaging and launch strategy
|
||||
|
||||
**Sidebar Navigation:**
|
||||
- Value Proposition
|
||||
- Messaging Framework
|
||||
- Website Copy
|
||||
- Launch Strategy
|
||||
- Target Channels
|
||||
|
||||
**Content:**
|
||||
- Headline & subheadline
|
||||
- Key benefits
|
||||
- Primary messaging
|
||||
- Positioning statements
|
||||
- Website copy sections (hero, features, social proof)
|
||||
- Launch timeline
|
||||
- Target channel cards
|
||||
|
||||
**Key Actions:**
|
||||
- Generate with AI
|
||||
- Edit Content
|
||||
- Add Channel
|
||||
|
||||
---
|
||||
|
||||
### 4. **Build Plan** (`/build-plan`)
|
||||
**Purpose:** Track what needs to be built
|
||||
|
||||
**Sidebar Navigation:**
|
||||
- MVP Scope
|
||||
- Backlog
|
||||
- Milestones
|
||||
- Progress
|
||||
|
||||
**Content:**
|
||||
- Progress overview (completed, in progress, to do)
|
||||
- MVP feature list with status
|
||||
- Backlog items with priority
|
||||
- Milestone cards (alpha, beta, public launch)
|
||||
|
||||
**Key Actions:**
|
||||
- Generate Tasks (AI)
|
||||
- Add Feature
|
||||
- Add to Backlog
|
||||
- Move to MVP
|
||||
|
||||
**Features:**
|
||||
- Status tracking (completed, in progress, todo)
|
||||
- Priority levels (high, medium, low)
|
||||
- Progress percentage
|
||||
- Milestone dates
|
||||
|
||||
---
|
||||
|
||||
### 5. **Development** (`/code`)
|
||||
**Purpose:** Browse and manage codebase
|
||||
|
||||
**Current Implementation:**
|
||||
- GitHub integration
|
||||
- File tree browser
|
||||
- File content viewer with syntax highlighting
|
||||
- Search functionality
|
||||
|
||||
**Future Sidebar Navigation:**
|
||||
- Browse Code
|
||||
- Architecture
|
||||
- API Documentation
|
||||
- Deployment
|
||||
|
||||
---
|
||||
|
||||
### 6. **Home/Overview** (`/overview`)
|
||||
**Purpose:** Project dashboard
|
||||
|
||||
**Content:**
|
||||
- Project header (name, vision, workspace)
|
||||
- Session linking (if unassociated sessions found)
|
||||
- Stats cards (sessions, time, cost, tokens)
|
||||
- Quick action cards
|
||||
- Getting started guide
|
||||
|
||||
---
|
||||
|
||||
### 7. **Knowledge** (`/context`)
|
||||
**Purpose:** Manage all project context
|
||||
|
||||
**Content:**
|
||||
- Upload documents
|
||||
- Connect GitHub repos
|
||||
- Import AI chat transcripts
|
||||
- View summaries
|
||||
- Knowledge items list
|
||||
|
||||
---
|
||||
|
||||
## 🎨 Design System
|
||||
|
||||
All pages use the **PageTemplate** system for consistency:
|
||||
|
||||
### PageTemplate Props
|
||||
```typescript
|
||||
{
|
||||
sidebar?: {
|
||||
title: string;
|
||||
description?: string;
|
||||
items: NavItem[];
|
||||
footer?: ReactNode;
|
||||
};
|
||||
hero?: {
|
||||
icon?: LucideIcon;
|
||||
title: string;
|
||||
description?: string;
|
||||
actions?: ActionButton[];
|
||||
};
|
||||
containerWidth?: "default" | "wide" | "full";
|
||||
}
|
||||
```
|
||||
|
||||
### Utility Components
|
||||
- **PageSection** - Organized content sections
|
||||
- **PageCard** - Styled cards with hover effects
|
||||
- **PageGrid** - Responsive grids (1-4 columns)
|
||||
- **PageEmptyState** - Empty state displays
|
||||
|
||||
---
|
||||
|
||||
## 🔄 User Flow
|
||||
|
||||
### Solo Founder Journey
|
||||
1. **Start:** AI Chat → Define vision through conversation
|
||||
2. **Vision Phase:** Review and refine extracted insights
|
||||
3. **Design Phase:** Generate core screens with v0
|
||||
4. **Marketing Phase:** Craft messaging and launch plan
|
||||
5. **Build Phase:** Create MVP scope and track progress
|
||||
6. **Development Phase:** Browse code, manage architecture
|
||||
|
||||
### Collaboration Flow
|
||||
- **Founder:** Manages Vision, Marketing, Build Plan
|
||||
- **Designer:** Works in Design section
|
||||
- **Developer:** Works in Development section
|
||||
- **All:** Access Knowledge Base and Home dashboard
|
||||
|
||||
---
|
||||
|
||||
## 🎯 Key Features
|
||||
|
||||
### Phase Separation
|
||||
- Clear visual distinction between DEFINE and BUILD phases
|
||||
- Separators and labels in navigation
|
||||
- Guided workflow from strategy to execution
|
||||
|
||||
### Consistency
|
||||
- All pages use PageTemplate
|
||||
- Uniform sidebar structure
|
||||
- Consistent action buttons
|
||||
- Standard icon usage (Lucide)
|
||||
|
||||
### Scalability
|
||||
- Easy to add new pages
|
||||
- Reusable components
|
||||
- Type-safe navigation
|
||||
- Responsive design
|
||||
|
||||
---
|
||||
|
||||
## 🚀 Next Steps
|
||||
|
||||
### Immediate
|
||||
- [ ] Wire Vision page to extraction data
|
||||
- [ ] Wire Marketing page to AI generation
|
||||
- [ ] Connect Build Plan to actual task management
|
||||
- [ ] Add Architecture subsection to Development
|
||||
|
||||
### Future
|
||||
- [ ] Real-time collaboration indicators
|
||||
- [ ] Phase completion badges
|
||||
- [ ] Animated transitions between phases
|
||||
- [ ] Progress tracking across all phases
|
||||
- [ ] Team member assignments
|
||||
- [ ] Comments & feedback system
|
||||
|
||||
---
|
||||
|
||||
## 📊 Navigation Stats
|
||||
|
||||
- **Total Top-Level Items:** 7 (Chat, Home, Knowledge + 2 phases)
|
||||
- **Phase 1 (Define):** 3 items (Vision, Design, Marketing)
|
||||
- **Phase 2 (Build):** 2 items (Build Plan, Development)
|
||||
- **Total Pages Created:** 5 new pages + 2 existing
|
||||
|
||||
---
|
||||
|
||||
## 🎨 Visual Hierarchy
|
||||
|
||||
```
|
||||
Left Rail (60px wide)
|
||||
├── Logo
|
||||
├── AI Chat (always visible)
|
||||
├── Home (when project selected)
|
||||
├── Knowledge (when project selected)
|
||||
├── ───────────────── [DEFINE]
|
||||
├── Vision
|
||||
├── Design
|
||||
├── Marketing
|
||||
├── ───────────────── [BUILD]
|
||||
├── Build Plan
|
||||
├── Development
|
||||
└── Settings (bottom)
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 💡 Design Principles
|
||||
|
||||
1. **Product-First:** Strategy before execution
|
||||
2. **Phase-Based:** Clear workflow progression
|
||||
3. **Collaborative:** Each role has their space
|
||||
4. **AI-Enhanced:** AI assistance throughout
|
||||
5. **Consistent:** Unified design language
|
||||
6. **Scalable:** Easy to extend
|
||||
|
||||
---
|
||||
|
||||
**For implementation details, see:**
|
||||
- `components/layout/page-template.tsx` - Reusable page layout
|
||||
- `components/layout/PAGE_TEMPLATE_GUIDE.md` - Usage guide
|
||||
- `components/layout/left-rail.tsx` - Main navigation
|
||||
|
||||
Reference in New Issue
Block a user