diff --git a/README.md b/README.md index e215bc4..9f50eb1 100644 --- a/README.md +++ b/README.md @@ -1,36 +1,100 @@ -This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app). +# AeThex Live + +A modern live streaming platform built with Next.js, featuring HLS video playback, real-time chat, and a sleek sci-fi aesthetic. + +![AeThex Live](https://github.com/user-attachments/assets/8c34bf6e-4ca1-40e5-86e8-c7a35f304bb7) + +## Features + +- 🎥 **HLS Video Player** - Looping video player with hls.js support +- 🎨 **Sci-Fi Dark Theme** - Immersive dark theme with cyan/blue accents +- 👥 **Live Viewer Count** - Real-time viewer count with animated indicator +- 💬 **Chat Sidebar** - Interactive chat interface for viewer engagement +- 🎵 **Now Playing** - Metadata display for current track/content +- 📱 **Responsive Design** - Works seamlessly on desktop and mobile + +## Tech Stack + +- **Framework**: Next.js 16.1.6 with TypeScript +- **Styling**: Tailwind CSS 4 +- **Video Player**: hls.js for HLS streaming +- **UI**: React 19.2.3 with modern hooks ## Getting Started -First, run the development server: +### Prerequisites +- Node.js 20.x or higher +- npm, yarn, pnpm, or bun + +### Installation + +1. Clone the repository: ```bash -npm run dev -# or -yarn dev -# or -pnpm dev -# or -bun dev +git clone https://github.com/AeThex-LABS/aethex.live.git +cd aethex.live ``` -Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. +2. Install dependencies: +```bash +npm install +``` -You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file. +3. Run the development server: +```bash +npm run dev +``` -This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel. +4. Open [http://localhost:3000](http://localhost:3000) in your browser. -## Learn More +### Configuration -To learn more about Next.js, take a look at the following resources: +To use your own HLS stream, edit `app/page.tsx` and update the `streamUrl` variable: -- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API. -- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial. +```typescript +const streamUrl = 'YOUR_HLS_STREAM_URL.m3u8'; +``` -You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome! +## Build + +Create an optimized production build: + +```bash +npm run build +npm start +``` + +## Scripts + +- `npm run dev` - Start development server +- `npm run build` - Create production build +- `npm start` - Start production server +- `npm run lint` - Run ESLint + +## Project Structure + +``` +aethex.live/ +├── app/ +│ ├── page.tsx # Main page component +│ ├── layout.tsx # Root layout +│ └── globals.css # Global styles +├── components/ +│ ├── HLSPlayer.tsx # Video player component +│ ├── ViewerCount.tsx # Viewer counter +│ ├── NowPlaying.tsx # Metadata display +│ └── ChatSidebar.tsx # Chat interface +└── public/ # Static assets +``` + +## License + +© 2026 AeThex LABS - All rights reserved ## Deploy on Vercel -The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js. +[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/AeThex-LABS/aethex.live) -Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details. +The easiest way to deploy is using the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme). + +Check out the [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.