mediago-dev--mediago/apps/ui

Frontend

The React-based frontend application that provides the user interface for MediaGo, used in both Electron desktop app and standalone web application.

Overview

This package contains the React frontend that:

• Provides the main user interface for video downloading
• Handles video URL input and processing
• Displays download progress and history
• Manages application settings and preferences
• Communicates with backend services via Socket.io
• Works in both Electron renderer and standalone web contexts

Key Features

• Video Download Interface: Clean UI for adding and managing downloads
• Real-time Updates: Live progress tracking via Socket.io
• Responsive Design: Works on desktop and mobile devices
• Theme Support: Light/dark mode capabilities
• Multi-platform: Shared UI for Electron desktop and web versions
• Settings Management: User preferences and configuration

Technologies

• React 18: Modern React with hooks and concurrent features
• Vite: Fast build tool and dev server
• Ant Design: UI component library
• TailwindCSS: Utility-first CSS framework
• Shadcn/ui: Modern component library
• Zustand: Lightweight state management
• Socket.io Client: Real-time communication
• TypeScript: Type-safe development

Development

# Start development mode (with Electron)
pnpm dev

# Start web-only development
pnpm dev:web

# Build frontend
pnpm build:web
pnpm build:renderer

# Type checking
pnpm types:renderer

Architecture

The frontend is designed to work in two contexts:

1. Electron Renderer: Loaded in Electron's BrowserWindow
2. Standalone Web: Served by the webapi backend for browser access

It communicates with the backend services through Socket.io for real-time updates and HTTP APIs for data operations.