Stream Rec Frontend

Stream-Rec Frontend: Next.js UI for Stream Recording Management

This project provides the frontend user interface for the Stream-rec automatic streaming record tool. Developed with Next.js and React, it leverages Shadcn UI for a modern aesthetic and includes internationalization (i18n) for English and Chinese users. It allows users to interact with the Stream-rec backend, managing recordings, streamers, and settings through a clean and responsive web interface. This personal project demonstrates the practical application of these modern web technologies.

Features:

• Next.js Framework: Built using the Next.js React framework for efficient server-side rendering and static generation capabilities.
• React-Powered UI: Utilizes React to create dynamic, interactive, and component-based user interfaces.
• Shadcn UI Integration: Employs Shadcn UI for a visually appealing and consistent set of customizable UI components.
• JWT Authentication with NextAuth.js: Implements secure user authentication using JSON Web Tokens managed by NextAuth.js.
• Internationalization (i18n): Supports multiple languages, specifically English and Chinese, through the next-intl library.
• Backend API Connectivity: Configurable to connect to the Stream-rec backend service via the API URL environment variable.
• WebSocket Support: Integrates with a WebSocket API (configurable via WS API URL) for real-time updates.
• Comprehensive Management Interfaces: Includes dedicated sections for login, dashboard overview, managing streamers, records, uploads, and platform settings, as shown in screenshots.
• Environment Variable Configuration: Key settings like API endpoints and authentication secrets are configurable via environment variables for flexibility.
• Vercel Deployment Ready: Optimized for straightforward deployment on the Vercel platform, with automatic NEXTAUTH URL handling.

Summary:

The Stream-rec frontend is a Next.js and React application providing a user-friendly interface for the Stream-rec backend. It features Shadcn UI for design, NextAuth.js for security, and next-intl for English/Chinese language support. Users can manage streamers, recordings, uploads, and settings via dedicated views like a dashboard. It's designed for easy setup, local development, and Vercel deployment, serving as a practical showcase of modern frontend technologies.