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

# 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)

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:

cd ../indeehub-api
npm run start:dev  # Runs on http://localhost:4000

2. Configure frontend:

# Create .env file
cp .env.example .env

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

3. Restart frontend:

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

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

# 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 - Full backend integration guide
• UI_INTEGRATION.md - How UI connects to backend
• 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

npm run build
# Output in dist/

Docker

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

Environment Variables

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 for details.

Build errors

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