A modern, full-stack video streaming and management platform built with Next.js and Node.js, featuring atomic design principles and professional CDN integration.
Flumotion Video Portal is a comprehensive video platform that combines a powerful Node.js backend with a modern Next.js frontend to deliver seamless video streaming experiences. The platform is designed for corporate environments requiring professional video management and playback capabilities.
Modern, responsive video streaming interface with atomic design components
The application features a clean, professional interface with:
- Left Panel: Advanced video player with Flumotion CDN integration
- Right Panel: 2-column media gallery with thumbnail previews
- Responsive Design: Optimized for desktop, tablet, and mobile devices
- Professional Styling: Corporate-grade UI with consistent branding
- Professional Video Streaming - Integrated with Flumotion CDN infrastructure
- Dynamic Route Generation - Automatic CDN URL construction for optimal delivery
- Thumbnail Generation - Automatic video preview thumbnails
- Metadata Management - Rich video information with tags, descriptions, and technical specs
- Atomic Design System - Scalable, maintainable component architecture
- Responsive Design - Perfect experience across all devices
- Real-time Health Monitoring - Live backend connectivity status
- 2-Column Grid Layout - Optimized video browsing experience
- Server-Side Rendering - Optimized SEO and initial load performance
- TypeScript Throughout - Full type safety across frontend and backend
- Hot Reload Development - Instant feedback during development
- Modern Build Tools - Next.js 15 with Turbopack, Node.js with nodemon
- Professional Interface - Clean, corporate-grade design (see preview above)
- Atomic Design System - Consistent, scalable component architecture
- Responsive Layout - Perfect adaptation across all screen sizes
- Interactive Components - Smooth animations and user feedback
flumotion-video-portal/
├── backend/ # Node.js + TypeScript API
│ ├── src/
│ │ ├── controllers/ # Request handlers
│ │ ├── services/ # Business logic
│ │ ├── routes/ # API endpoints
│ │ ├── types/ # TypeScript definitions
│ │ └── utils/ # Utilities (CDN routing)
│ ├── data/ # JSON data storage
│ └── README.md
├── frontend/ # Next.js + TypeScript UI
│ ├── app/ # Next.js App Router
│ ├── components/ # Atomic Design Components
│ │ ├── atoms/ # Basic building blocks
│ │ ├── molecules/ # Component combinations
│ │ └── organisms/ # Complex UI sections
│ ├── lib/ # API integration & utilities
│ ├── types/ # TypeScript definitions
│ └── README.md
└── README.md # This file
- Node.js 16.x or higher
- npm or yarn
- Git for version control
- Clone the repository:
git clone <repository-url>
cd flumotion-video-portal- Install backend dependencies:
cd backend
npm install- Install frontend dependencies:
cd ../frontend
npm installcd backend
npm run devBackend will be available at: http://localhost:3001
cd frontend
npm run devFrontend will be available at: http://localhost:3000 (or next available port)
Open your browser and navigate to the frontend URL. The application will automatically connect to the backend API.
🎉 You should see the interface shown in the preview above - a professional video portal with the player on the left and media gallery on the right!
- Runtime: Node.js 16+
- Language: TypeScript 5.x
- Framework: Express.js
- Development: nodemon, ts-node
- Data Storage: JSON files (easily upgradeable to database)
- CORS: Configured for cross-origin requests
- Framework: Next.js 15.5.5 with App Router
- Language: TypeScript 5.x
- Styling: Tailwind CSS v4
- Build Tool: Turbopack (Next.js integrated)
- State Management: React hooks
- Architecture: Atomic Design pattern
- API Communication: RESTful APIs with TypeScript interfaces
- Video Streaming: Flumotion CDN iframe integration
- Health Monitoring: Real-time backend connectivity checks
- Error Handling: Comprehensive error boundaries and fallbacks
npm run dev # Development with hot-reload
npm run build # Build TypeScript to JavaScript
npm start # Run production build
npm run clean # Clean build directory
npm run type-check # TypeScript validationnpm run dev # Development with Turbopack
npm run build # Production build
npm start # Start production server
npm run lint # ESLint validation
npm run type-check # TypeScript validationGET /health- Health check endpointGET /api/getmedias- Retrieve all media with CDN routesPOST /api/addmedia- Add new media (future implementation)
- Media API - Fetch and manage video content
- Health Check - Monitor backend connectivity
- Error Handling - Graceful degradation for offline scenarios
The frontend implements atomic design methodology:
- Atoms -
LoadingSpinner,VideoFrame,TagPill, etc. - Molecules -
VideoPlayerContainer,VideoInfoCard,MediaCardAtomic - Organisms -
VideoPlayerAtomic,MediaGalleryAtomic,HeaderAtomic - Pages - Complete application views
- Consistency - Unified visual language across all components
- Reusability - Components work in multiple contexts
- Accessibility - ARIA labels and semantic HTML throughout
- Responsiveness - Mobile-first design with progressive enhancement
# Server Configuration
PORT=3001
NODE_ENV=development
# CDN Configuration
CDN_BASE_URL=https://storagecdn.codev8.net/ondemand
THUMBNAIL_BASE_URL=https://progressive.codev8.net/userdatanew
MEDIA_ACCOUNT_ID=your-account-id
# CORS Configuration
CORS_ORIGIN=http://localhost:3000,http://localhost:3001# API Configuration
NEXT_PUBLIC_API_BASE_URL=http://localhost:3001
# Development
NEXT_PUBLIC_DEV_MODE=true- Flumotion CDN Integration - Professional video delivery
- Responsive Player - Maintains 16:9 aspect ratio
- Rich Metadata Display - Title, description, duration, file size, bitrate
- Tag System - Organized content categorization
- 2-Column Grid Layout - Optimized browsing experience
- Thumbnail Previews - Visual media identification
- Selection States - Clear visual feedback for active media
- Loading States - Smooth user experience during data fetching
- Professional Header - Clean branding and navigation
- Responsive Design - Mobile, tablet, and desktop optimized
- Error Boundaries - Graceful handling of unexpected issues
- Health Monitoring - Real-time backend status display
Backend not starting:
# Check if port 3001 is available
netstat -an | grep 3001
# Kill existing process if needed
pkill -f "node.*3001"Frontend not connecting to backend:
# Verify backend is running
curl http://localhost:3001/health
# Check environment variables
cat frontend/.env.localTypeScript compilation errors:
# Backend
cd backend && npm run type-check
# Frontend
cd frontend && npm run type-check- Both servers support hot-reload for efficient development
- Use browser dev tools to inspect component structure
- Check network tab for API communication issues
- All components include comprehensive error handling
- Build both applications:
# Backend
cd backend && npm run build
# Frontend
cd frontend && npm run build-
Environment Configuration:
- Update API URLs for production
- Configure CDN endpoints
- Set up proper CORS origins
-
Deployment Options:
- Frontend: Vercel, Netlify, or static hosting
- Backend: Docker, PM2, or cloud platforms
- Full Stack: Docker Compose for complete deployment
- Server-Side Rendering - Optimized initial page loads
- Automatic Code Splitting - Efficient bundle loading
- CDN Integration - Optimized video delivery
- Image Optimization - Next.js automatic image optimization
- Caching Strategies - Smart caching for repeated requests
- CORS Configuration - Proper cross-origin request handling
- Input Validation - Backend request validation
- Error Sanitization - Safe error message exposure
- CDN Security - Secure video delivery through Flumotion
- Backend Documentation - Detailed API documentation
- Frontend Documentation - Component and architecture guide
- Flumotion CDN - Video delivery platform docs
- Setup Development Environment - Follow Quick Start guide
- Follow Atomic Design - Maintain component hierarchy
- Type Safety - Use TypeScript throughout
- Documentation - Update README files for new features
- Testing - Ensure responsive behavior across devices
This project is developed for Flumotion corporate video portal requirements.
- Frontend: http://localhost:3000
- Backend API: http://localhost:3001
- Backend Health: http://localhost:3001/health
- API Endpoint: http://localhost:3001/api/getmedias
Built with ❤️ using Next.js 15, Node.js, TypeScript, and Flumotion CDN
Professional video streaming platform for modern corporate environments