The official frontend for the Streamlet video streaming platform, built with Next.js, TypeScript, and Tailwind CSS. This client delivers a modern, responsive interface for uploading, browsing, and watching videos.
|
|
- Modern UI: Responsive design with Tailwind CSS and Radix UI for accessibility and aesthetics.
- Video Uploads: Seamless uploads with real-time progress via Socket.io.
- Adaptive Playback: High-quality streaming using HLS.js and a customizable Plyr-React player.
- State Management: Centralized state with Redux Toolkit and Redux Persist.
- Optimized Data Fetching: Fast, reliable data with TanStack Query.
- Robust Forms: Built with Formik for flexible form handling.
| Purpose | Tech/Library |
|---|---|
| Framework | Next.js |
| Language | TypeScript |
| Styling | Tailwind CSS |
| UI Components | Radix UI, Lucide React |
| State Management | Redux Toolkit, Redux Persist |
| Data Fetching | TanStack Query |
| Video Playback | HLS.js, Plyr-React |
| Forms | Formik |
| API Communication | Axios, Socket.io Client |
This is a client-only application. For full functionality, ensure the backend services are running.
👉 Streamlet Backend Repository (https://github.com/rahulkbharti/streamlet-microservices.git)
-
Clone the repository:
git clone https://github.com/rahulkbharti/streamlet-frontend.git cd streamlet-frontend -
Install dependencies:
npm install
-
Configure environment variables:
- Create a
.env.localfile in the project root:NEXT_PUBLIC_API_URL=http://localhost:8000 NEXT_PUBLIC_CONTENT_URL=http://localhost:8001
- Create a
-
Run the development server:
npm run dev
-
Open http://localhost:3000 in your browser.
Distributed under the MIT License. See LICENSE for details.
Contributions are welcome! Please open issues or submit pull requests for improvements.
For questions or support, open an issue or contact the maintainers.