IndeeHub Prototype - Project Setup

Quick Start

# Install dependencies
npm install

# Start development server
npm run dev

# Build for production
npm run build

Project Structure

src/
├── components/       # Reusable Vue components
│   └── ContentRow.vue
├── views/           # Page components
│   └── Browse.vue
├── stores/          # Pinia state management
│   └── content.ts
├── router/          # Vue Router configuration
├── types/           # TypeScript type definitions
├── utils/           # Utility functions
│   └── indeeHubApi.ts
└── composables/     # Vue composables

Features

• ✅ Netflix-inspired streaming interface
• ✅ Glass morphism design from neode-ui
• ✅ Responsive mobile/desktop layout
• ✅ Horizontal scrolling content rows
• ✅ Vue 3 + TypeScript + Vite
• ✅ Tailwind CSS styling
• ✅ Nostr-tools integration ready
• ⏳ Real IndeeHub content integration (pending data)

Technology Stack

• Frontend: Vue 3 (Composition API)
• Build Tool: Vite
• Styling: Tailwind CSS
• State: Pinia
• Router: Vue Router
• Protocol: Nostr (nostr-tools)
• Package Manager: npm

Next Steps

1. Add Real Content

   • Update src/stores/content.ts with IndeeHub API
   • Replace placeholder images with real thumbnails
   • Add authentication (NIP-98)

2. Complete Features

   • Video player component
   • Search functionality
   • User authentication
   • Content detail pages
   • My List feature

3. Nostr Integration

   • Nostr relay connections
   • Event publishing/fetching
   • Creator profiles
   • Content discovery

4. Deployment

   • Package for Umbrel
   • Package for Start9
   • Package for Archy

Design System

Using design rules from .cursor/rules/:

• Mobile-first responsive design
• Glass morphism UI
• 4px grid spacing system
• Smooth animations
• Accessibility (WCAG AA)
• Performance optimized

Development Notes

• All components use Composition API
• TypeScript strict mode enabled
• Following Vue 3 best practices
• Tailwind utility-first approach
• Design system consistency enforced

---

Built with ❤️ for decentralized media streaming