indee-demo/README.md

# Indeedhub Prototype

A modern streaming platform for independent films built with Vue 3, featuring dual authentication (Cognito + Nostr), glassmorphic UI, and PWA capabilities.

## 🚀 Quick Start

```bash
# Install dependencies
npm install

# Start development server
npm run dev

# Open http://localhost:3000 (or the port shown in terminal)
```

**That's it!** The app runs with mock data by default. No backend required for development.

## ✨ Features

### Current (Working Now)
- ✅ **Glassmorphic UI** - Beautiful, modern design with backdrop blur effects
- ✅ **Splash Animation** - Logo intro animation on first load
- ✅ **Browse Films** - Netflix-style content rows with scroll navigation
- ✅ **Authentication** - Email/password + Nostr login (works in dev mode!)
- ✅ **Subscription Modals** - 3 tiers with pricing
- ✅ **Rental Modals** - Pay-per-view content access
- ✅ **User Profile** - Profile management and subscription status
- ✅ **User Library** - Continue watching, rented content tracking
- ✅ **PWA Support** - Install as native app on mobile/desktop
- ✅ **Responsive** - Mobile-first design, works on all screen sizes

### Backend Integration (Ready)
- ✅ **API Service Layer** - Axios client with auto-retry and token refresh
- ✅ **Content API** - Fetch projects/films from backend
- ✅ **Nostr Client** - Comments, reactions, social features
- ✅ **Access Control** - Subscription and rental verification
- ✅ **Route Guards** - Protected routes for auth-required pages

## 📱 Try It Out

### Without Backend (Development Mode)
```bash
npm run dev
```

**What works:**
- Browse all films (mock data)
- Sign in with any email/password (creates mock user)
- Sign in with Nostr (needs browser extension)
- Navigate to Profile and Library pages
- Open subscription and rental modals
- See responsive mobile/desktop layouts

**Console shows:** `🔧 Development mode: Using mock authentication`

### With Backend (Production Mode)

**1. Start the backend:**
```bash
cd ../indeehub-api
npm run start:dev  # Runs on http://localhost:4000
```

**2. Configure frontend:**
```bash
# Create .env file
cp .env.example .env

# Edit .env
VITE_USE_MOCK_DATA=false
VITE_API_URL=http://localhost:4000
```

**3. Restart frontend:**
```bash
npm run dev
```

**Now you have:**
- Real user registration/login
- Content from PostgreSQL database
- Subscription payments (when Stripe configured)
- Nostr social features
- Video streaming with DRM

## 📁 Project Structure

```
src/
├── components/          # Vue components
│   ├── AuthModal.vue           # Login/register modal
│   ├── SubscriptionModal.vue   # Subscription tiers
│   ├── RentalModal.vue         # Content rental
│   ├── ContentRow.vue          # Film carousel
│   ├── SplashIntro.vue         # Logo animation
│   └── ToastContainer.vue      # Notifications
├── views/              # Page components
│   ├── Browse.vue             # Main browsing page
│   ├── Library.vue            # User library
│   └── Profile.vue            # User profile
├── stores/             # Pinia state management
│   ├── auth.ts               # Authentication state
│   └── content.ts            # Content/film data
├── services/           # API clients
│   ├── api.service.ts        # Base HTTP client
│   ├── auth.service.ts       # Auth API
│   ├── content.service.ts    # Content API
│   ├── subscription.service.ts
│   └── library.service.ts
├── composables/        # Vue composables
│   ├── useAuth.ts           # Auth helper
│   ├── useNostr.ts          # Nostr features
│   ├── useAccess.ts         # Access control
│   └── useToast.ts          # Notifications
├── lib/                # External integrations
│   └── nostr.ts            # Nostr client
├── utils/              # Utilities
│   └── mappers.ts          # API data transformers
└── router/             # Vue Router
    ├── index.ts            # Routes
    └── guards.ts           # Auth guards
```

## 🎨 Design System

### Colors
- Pure Black: `#0a0a0a`
- White Text: `#FAFAFA`
- Accent: `#F7931A` (Bitcoin orange)

### Glassmorphism
```css
background: rgba(0, 0, 0, 0.65);
backdrop-filter: blur(40px);
border: 1px solid rgba(255, 255, 255, 0.08);
```

### Typography
- Headers: Bold, large scale (3-6rem)
- Body: 16-18px
- Spacing: 8px base grid

See `.cursor/rules/visual-design-system.mdc` for full details.

## 🔧 Commands

```bash
# Development
npm run dev              # Start dev server with HMR
npm run build            # Build for production
npm run preview          # Preview production build
npm run type-check       # TypeScript validation

# Docker
docker-compose up -d     # Start container (port 7777)
docker-compose down      # Stop container
docker-compose logs -f   # View logs
```

## 📚 Documentation

- **[BACKEND_INTEGRATION.md](BACKEND_INTEGRATION.md)** - Full backend integration guide
- **[UI_INTEGRATION.md](UI_INTEGRATION.md)** - How UI connects to backend
- **[DEV_AUTH.md](DEV_AUTH.md)** - Development mode authentication
- **`.cursor/rules/`** - Design system and coding standards

## 🔐 Authentication

### Development Mode (Mock)
- Any email/password works
- Creates temporary mock users
- Persists in sessionStorage
- Perfect for UI testing

### Production Mode (Real)
- AWS Cognito for email/password
- Nostr NIP-07 for decentralized auth
- JWT token management
- Automatic token refresh

## 🎬 Content

### Mock Data (Default)
- 30+ Bitcoin & indie films
- Featured: "God Bless Bitcoin"
- Categories: Bitcoin, Documentaries, Drama
- Located in `src/data/indeeHubFilms.ts`

### Real Data (Backend)
- Fetches from `/projects` API
- Filters by type, genre, status
- Streaming URLs with DRM
- Progress tracking

## 🌐 Deployment

### Production Build
```bash
npm run build
# Output in dist/
```

### Docker
```bash
docker-compose up -d
# Available at http://localhost:7777
```

### Environment Variables
```bash
VITE_API_URL=https://api.indeedhub.com
VITE_CDN_URL=https://cdn.indeedhub.com
VITE_USE_MOCK_DATA=false
VITE_NOSTR_RELAYS=wss://relay.damus.io
VITE_ENABLE_NOSTR=true
VITE_ENABLE_LIGHTNING=true
VITE_ENABLE_RENTALS=true
```

## 🐛 Troubleshooting

### "Unable to connect to server"
✅ Fixed! App now works in development mode without backend.
See [DEV_AUTH.md](DEV_AUTH.md) for details.

### Build errors
```bash
npm run type-check  # Check TypeScript errors
npm run build       # Full build with validation
```

### Port already in use
Vite will automatically try the next available port (3001, 3002, etc.)

## 🤝 Contributing

This project follows strict design and code quality standards:
- See `.cursor/rules/master-philosophy.mdc`
- Mobile-first responsive design
- Glassmorphic UI patterns
- TypeScript for type safety
- WCAG AA accessibility

## 📄 License

Proprietary - IndeedHub

## 🔗 Related Repositories

- **indeehub-api** - NestJS backend API
- **indeehub-frontend** - Legacy React frontend (being replaced)
- **indeehub** - Nostr messaging integration

---

**Built with:**  
Vue 3 • TypeScript • Tailwind CSS • Vite • Pinia • Vue Router • Nostr Tools • Axios