lfg2025/indee-demo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: update environment configuration and documentation

Browse Source 
- Modified `.env.example` to reflect new API URL structure and added CDN configuration for external storage.
- Updated `.gitignore` to include deployment secrets and certificate files, ensuring sensitive information is not committed.
- Revised `BACKEND_INTEGRATION.md` to clarify authentication methods, replacing Cognito references with Nostr NIP-98.
- Deleted outdated documentation files (`CONTENT-INTEGRATION-COMPLETE.md`, `CURSOR-MCP-SETUP.md`, `FINAL-STATUS.md`, `FIXES-APPLIED.md`, `INDEEHHUB-INTEGRATION.md`, `PROJECT-COMPLETE.md`, `PROJECT-SUMMARY.md`) to streamline project documentation.

These changes enhance the clarity of the environment setup and improve the overall documentation structure for better developer onboarding.
This commit is contained in:
Dorian
2026-02-17 05:12:59 +00:00
parent a88022f81d
commit 8d56fe392d
29 changed files with 782 additions and 1713 deletions
Download Patch File Download Diff File Expand all files Collapse all files

267
README.md
View File

@@ -1,258 +1,61 @@
# Indeedhub Prototype
# IndeeHub
A modern streaming platform for independent films built with Vue 3, featuring dual authentication (Cognito + Nostr), glassmorphic UI, and PWA capabilities.
A decentralized streaming platform for independent films built with Vue 3, Nostr authentication, glassmorphic UI, and PWA capabilities.
## 🚀 Quick Start
## Quick Start
### Development (frontend only)
```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
Open http://localhost:5174. The app runs with mock data by default. No backend required.
**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
### Full stack (frontend + backend)
```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
# Option A: Docker Compose
docker compose -f docker-compose.dev.yml up
# Docker
docker-compose up -d # Start container (port 7777)
docker-compose down # Stop container
docker-compose logs -f # View logs
# Option B: Script (starts Postgres, Redis, MinIO, backend, frontend)
bash scripts/dev.sh
```
## 📚 Documentation
See [ARCHITECTURE.md](ARCHITECTURE.md) for a quick stack comparison, [docs/ARCHITECTURE.html](docs/ARCHITECTURE.html) for the full document with pros/cons, and [DEPLOYMENT.md](DEPLOYMENT.md) for production deployment.
- **[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
## Features
## 🔐 Authentication
- **Nostr auth** — Extension (NIP-07), Remote Signer (NIP-46), or Private Key
- **Glassmorphic UI** — Browse with content rows, modals
- **Lightning payments** — BTCPay Server for subscriptions, rentals, zaps
- **PWA** — Install as native app on mobile/desktop
- **Responsive** — Mobile-first design
### Development Mode (Mock)
- Any email/password works
- Creates temporary mock users
- Persists in sessionStorage
- Perfect for UI testing
## Auth Options
### Production Mode (Real)
- AWS Cognito for email/password
- Nostr NIP-07 for decentralized auth
- JWT token management
- Automatic token refresh
| Method | Description |
|--------|-------------|
| Extension | NIP-07 browser extension (Alby, nos2x) |
| Remote Signer | NIP-46 — QR code (desktop) or link (mobile) to Primal, Amber, etc. |
| Private Key | Paste nsec for direct sign-in |
## 🎬 Content
## Commands
### 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/
npm run dev # Dev server (port 5174)
npm run build # Production build
npm run type-check # TypeScript validation
```
### Docker
```bash
docker-compose up -d
# Available at http://localhost:7777
```
## Documentation
### 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
```
- [ARCHITECTURE.md](ARCHITECTURE.md) — Quick stack comparison; [docs/ARCHITECTURE.html](docs/ARCHITECTURE.html) — Full doc with pros/cons
- [DEPLOYMENT.md](DEPLOYMENT.md) — Production deployment (Docker, Portainer)
- [DEV_AUTH.md](DEV_AUTH.md) — Development mode auth
- [BACKEND_INTEGRATION.md](BACKEND_INTEGRATION.md) — Backend API integration
## 🐛 Troubleshooting
## Tech Stack
### "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
Vue 3 • TypeScript • Tailwind CSS • Vite • Pinia • Nostr (NIP-07, NIP-46, NIP-98) • BTCPay • MinIO