Optivise - Visual Experimentation Platform

Optivise is a visual experimentation platform that allows users to create and manage A/B tests on their websites using a visual editor with Firebase data persistence.

🚀 Features

Dashboard Application

• Authentication: Simple login flow with auto-generated user IDs
• Visual Editor:
  • Real-time DOM inspector with hover highlighting
  • Click elements to create experiments
  • Different colors for different element types (layout, headers, interactive, etc.)
  • Inspector toggle on/off
• Experiment Management:
  • Create experiments with rich configuration
  • AI-generated or manual variants
  • Text, design (CSS), or layout changes
  • Element, section, or page-level scope
  • Firebase Firestore persistence
• Pages:
  • Visual Editor - Interactive website inspector
  • Experiments - View and manage all experiments
  • Users - User management (structure ready)
  • Data, Analytics - Placeholder pages
• Collapsible Sidebar: Hierarchical navigation with smooth animations
• SDK Integration: Connect to external websites via postMessage

📁 Project Structure

optivise/
├── apps/
│   └── dashboard/              # Next.js 14 application
│       ├── app/
│       │   ├── login/          # Authentication page
│       │   ├── dashboard/      # Visual Editor
│       │   ├── experiments/    # Experiments list & details
│       │   └── users/          # Users management
│       ├── components/
│       │   ├── ui/             # shadcn/ui components
│       │   ├── Header.tsx
│       │   ├── Sidebar.tsx
│       │   ├── WebsitePane.tsx
│       │   ├── SDKInspectorOverlay.tsx
│       │   └── ExperimentSidePanel.tsx
│       ├── lib/
│       │   ├── firebase/       # Firestore integration
│       │   │   ├── config.ts
│       │   │   └── experiments.ts
│       │   ├── inspector/      # DOM inspection utilities
│       │   ├── stores/         # Zustand state management
│       │   └── sdk-bridge.ts   # SDK communication
│       ├── hooks/
│       └── public/
├── FIREBASE_IMPLEMENTATION.md  # Firebase setup documentation
└── README.md

🛠️ Technology Stack

• Framework: Next.js 14 (App Router)
• Language: TypeScript
• Styling: Tailwind CSS
• UI Components: Radix UI (shadcn/ui)
• State Management: Zustand
• Database: Firebase Firestore
• Icons: Lucide React

📦 Installation

Prerequisites

• Node.js 18+
• Firebase project with Firestore enabled

Setup

# Install dependencies
npm install

# Run development server
cd apps/dashboard
npm run dev

The dashboard will be available at http://localhost:3000

🎯 Usage

1. Sign In

1. Navigate to http://localhost:3000
2. Enter your credentials (optional: project name and website URL for SDK)
3. Click sign in - a unique user ID will be auto-generated

2. Create an Experiment

1. Go to Visual Editor (sidebar)
2. Enable the Inspector toggle
3. Hover over elements on your website
4. Click an element to open the experiment panel
5. Fill in experiment details:
   • Name and description
   • Number of variants (1-5)
   • Generation mode (AI or Manual)
   • Variant type (Text, Design, Layout)
   • Experiment scope (Element, Section, Page)
   • Duration (7, 14, 21, or 30 days)
6. Click "Create Experiment"
7. Data is saved to Firebase Firestore

3. View Experiments

1. Navigate to "Experiments" in sidebar
2. See all your created experiments
3. Click any experiment to view full details
4. Status badges show experiment state

4. SDK Integration

For external websites:

1. Add the Optivise SDK script tag
2. Include data-project attribute
3. SDK communicates via postMessage
4. Dashboard loads website with ?optivise_edit=true

🔧 Firebase Configuration

Create apps/dashboard/lib/firebase/config.ts with your Firebase credentials:

const firebaseConfig = {
  apiKey: "your-api-key",
  authDomain: "your-project.firebaseapp.com",
  projectId: "your-project-id",
  // ... other config
};

Firestore Structure

users/
  {userId}/
    experiments/
      {experimentId}/
        - name: string
        - description: string
        - numVariants: number
        - generationMode: "ai" | "manual"
        - variantType: "text" | "design" | "layout"
        - experimentScope: "element" | "section" | "page"
        - duration: number
        - selectedElement: object
        - status: "Not Started" | "In Progress" | "Completed"
        - createdAt: Timestamp
        - updatedAt: Timestamp

🎨 Key Features

Visual Inspector

• Hover highlighting with element-specific colors:
  • Blue: Layout elements (div, section, main)
  • Purple: Headers/footers
  • Pink: Headings (h1-h6)
  • Green: Interactive elements (buttons, links, inputs)
  • Yellow: Text elements (p, span, label)
  • Red: Media (img, video, svg)
  • Cyan: Lists (ul, ol, li)
• Click to pin selection
• Smooth animations
• Inspector toggle on/off

Experiment Panel

• Slide-in animation
• Rich configuration options
• Firebase integration
• Loading states and error handling
• Success notifications

Navigation

• Collapsible sidebar with hierarchical structure
• Smooth animations (300ms transitions)
• Active state highlighting
• User profile display
• Settings and help sections

🚢 Deployment

Dashboard

cd apps/dashboard
npm run build

Deploy to Vercel, Netlify, or any Next.js hosting provider.

Firebase Security Rules

Set up proper security rules in Firebase Console:

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /users/{userId}/experiments/{experiment} {
      allow read, write: if request.auth != null && request.auth.uid == userId;
    }
  }
}

📝 Completed Features ✅

• Login with auto-generated user IDs
• Visual Editor with DOM inspector
• Hover highlighting with element-type colors
• Click-to-create experiments
• Experiment configuration panel
• Firebase Firestore integration
• Experiments list with real data
• Experiment detail pages
• SDK integration for external websites
• Collapsible sidebar navigation
• Loading and error states
• Toast notifications

🎯 Future Enhancements

• Firebase Authentication
• Edit/delete experiments
• Experiment status transitions
• Analytics dashboard
• Data visualization
• User management
• Export functionality
• Real-time collaboration

📄 License

Proprietary - Optivise © 2025

👨‍💻 Development

Built by Sidiq Moltafet

---

Note: This is a working MVP with core functionality. Additional features and optimizations are planned for future releases.