Enhance deployment script and update package dependencies

- Added detailed labels to the deployment script for IndeedHub, including title, version, description, license, icon, and repository URL. - Updated package dependencies in package.json and package-lock.json, including upgrading 'nostr-tools' to version 2.23.0 and adding 'axios' and '@tanstack/vue-query'. - Improved README with a modern description of the platform and updated project structure details. This commit enhances the clarity of the deployment process and ensures the project is using the latest dependencies for better performance and features.
2026-02-12 10:30:47 +00:00
parent dacfa7a822
commit c970f5b29f
43 changed files with 6906 additions and 603 deletions
--- a/README.md
+++ b/README.md
@@ -1,6 +1,8 @@
-# IndeeHub Prototype - Project Setup
+# Indeedhub Prototype

-## Quick Start
+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
@@ -9,91 +11,248 @@ npm install
 # Start development server
 npm run dev

-# Build for production
-npm run build
+# Open http://localhost:3000 (or the port shown in terminal)
 ```

-## Project Structure
+**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/       # 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
+├── 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
 ```

-## Features
+## 🎨 Design System

- ✅ 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)
+### Colors
+- Pure Black: `#0a0a0a`
+- White Text: `#FAFAFA`
+- Accent: `#F7931A` (Bitcoin orange)

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

- **Frontend:** Vue 3 (Composition API)
- **Build Tool:** Vite
- **Styling:** Tailwind CSS
- **State:** Pinia
- **Router:** Vue Router
- **Protocol:** Nostr (nostr-tools)
- **Package Manager:** npm
+### Typography
+- Headers: Bold, large scale (3-6rem)
+- Body: 16-18px
+- Spacing: 8px base grid

-## Next Steps
+See `.cursor/rules/visual-design-system.mdc` for full details.

-1. **Add Real Content**
-   - Update `src/stores/content.ts` with IndeeHub API
-   - Replace placeholder images with real thumbnails
-   - Add authentication (NIP-98)
+## 🔧 Commands

-2. **Complete Features**
-   - Video player component
-   - Search functionality  
-   - User authentication
-   - Content detail pages
-   - My List feature
+```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

-3. **Nostr Integration**
-   - Nostr relay connections
-   - Event publishing/fetching
-   - Creator profiles
-   - Content discovery
+# Docker
+docker-compose up -d     # Start container (port 7777)
+docker-compose down      # Stop container
+docker-compose logs -f   # View logs
+```

-4. **Deployment**
-   - Package for Umbrel
-   - Package for Start9
-   - Package for Archy
+## 📚 Documentation

-## Design System
+- **[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

-Using design rules from `.cursor/rules/`:
+## 🔐 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
- Glass morphism UI
- 4px grid spacing system
- Smooth animations
- Accessibility (WCAG AA)
- Performance optimized
+- Glassmorphic UI patterns
+- TypeScript for type safety
+- WCAG AA accessibility

-## Development Notes
+## 📄 License

- All components use Composition API
- TypeScript strict mode enabled
- Following Vue 3 best practices
- Tailwind utility-first approach
- Design system consistency enforced
+Proprietary - IndeedHub
+
+## 🔗 Related Repositories
+
+- **indeehub-api** - NestJS backend API
+- **indeehub-frontend** - Legacy React frontend (being replaced)
+- **indeehub** - Nostr messaging integration

 ---

-Built with ❤️ for decentralized media streaming
+**Built with:**  
+Vue 3 • TypeScript • Tailwind CSS • Vite • Pinia • Vue Router • Nostr Tools • Axios