diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..5ef6a52
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,41 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# env files (can opt-in for committing if needed)
+.env*
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
diff --git a/README.md b/README.md
index dc9f411..9f50eb1 100644
--- a/README.md
+++ b/README.md
@@ -1 +1,100 @@
-# aethex.live
\ No newline at end of file
+# AeThex Live
+
+A modern live streaming platform built with Next.js, featuring HLS video playback, real-time chat, and a sleek sci-fi aesthetic.
+
+
+
+## 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
+
+### Prerequisites
+
+- Node.js 20.x or higher
+- npm, yarn, pnpm, or bun
+
+### Installation
+
+1. Clone the repository:
+```bash
+git clone https://github.com/AeThex-LABS/aethex.live.git
+cd aethex.live
+```
+
+2. Install dependencies:
+```bash
+npm install
+```
+
+3. Run the development server:
+```bash
+npm run dev
+```
+
+4. Open [http://localhost:3000](http://localhost:3000) in your browser.
+
+### Configuration
+
+To use your own HLS stream, edit `app/page.tsx` and update the `streamUrl` variable:
+
+```typescript
+const streamUrl = 'YOUR_HLS_STREAM_URL.m3u8';
+```
+
+## 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
+
+[](https://vercel.com/new/clone?repository-url=https://github.com/AeThex-LABS/aethex.live)
+
+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.
diff --git a/app/favicon.ico b/app/favicon.ico
new file mode 100644
index 0000000..718d6fe
Binary files /dev/null and b/app/favicon.ico differ
diff --git a/app/globals.css b/app/globals.css
new file mode 100644
index 0000000..9d818de
--- /dev/null
+++ b/app/globals.css
@@ -0,0 +1,56 @@
+@import "tailwindcss";
+
+:root {
+ --background: #000000;
+ --foreground: #ffffff;
+ --font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+ --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
+}
+
+@theme inline {
+ --color-background: var(--background);
+ --color-foreground: var(--foreground);
+ --font-sans: var(--font-sans);
+ --font-mono: var(--font-mono);
+}
+
+body {
+ background: linear-gradient(to bottom, #000000, #0a0a1a);
+ color: var(--foreground);
+ font-family: var(--font-sans);
+ min-height: 100vh;
+}
+
+/* Sci-fi aesthetic animations */
+@keyframes fade-in {
+ from {
+ opacity: 0;
+ transform: translateY(10px);
+ }
+ to {
+ opacity: 1;
+ transform: translateY(0);
+ }
+}
+
+.animate-fade-in {
+ animation: fade-in 0.3s ease-out;
+}
+
+/* Custom scrollbar for dark theme */
+::-webkit-scrollbar {
+ width: 8px;
+}
+
+::-webkit-scrollbar-track {
+ background: rgba(0, 0, 0, 0.3);
+}
+
+::-webkit-scrollbar-thumb {
+ background: rgba(6, 182, 212, 0.5);
+ border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+ background: rgba(6, 182, 212, 0.7);
+}
diff --git a/app/layout.tsx b/app/layout.tsx
new file mode 100644
index 0000000..c6fa480
--- /dev/null
+++ b/app/layout.tsx
@@ -0,0 +1,21 @@
+import type { Metadata } from "next";
+import "./globals.css";
+
+export const metadata: Metadata = {
+ title: "AeThex Live - Live Stream",
+ description: "Watch AeThex live streaming content 24/7",
+};
+
+export default function RootLayout({
+ children,
+}: Readonly<{
+ children: React.ReactNode;
+}>) {
+ return (
+
+
+ {children}
+
+
+ );
+}
diff --git a/app/page.tsx b/app/page.tsx
new file mode 100644
index 0000000..cf1d182
--- /dev/null
+++ b/app/page.tsx
@@ -0,0 +1,86 @@
+'use client';
+
+import { useState } from 'react';
+import HLSPlayer from '@/components/HLSPlayer';
+import ViewerCount from '@/components/ViewerCount';
+import NowPlaying from '@/components/NowPlaying';
+import ChatSidebar from '@/components/ChatSidebar';
+
+export default function Home() {
+ const [showChat, setShowChat] = useState(true);
+
+ // Demo HLS stream URL - replace with your actual stream URL
+ const streamUrl = 'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8';
+
+ return (
+
+ {/* Header */}
+
+
+
+
+
+ A
+
+
+
+ AeThex LABS
+
+
Live Stream
+
+
+
+
+
+
+
+
+
+
+
+ {/* Main Content */}
+
+ {/* Video Player Section */}
+
+ {/* Video Player */}
+
+
+
+
+ {/* Video Info Bar */}
+
+
+
+ {/* Chat Sidebar */}
+ {showChat && (
+
+
+
+ )}
+
+
+ {/* Footer */}
+
+
+ );
+}
diff --git a/components/ChatSidebar.tsx b/components/ChatSidebar.tsx
new file mode 100644
index 0000000..74757ec
--- /dev/null
+++ b/components/ChatSidebar.tsx
@@ -0,0 +1,134 @@
+'use client';
+
+import { useState, useEffect, useRef } from 'react';
+
+interface ChatMessage {
+ id: string;
+ username: string;
+ message: string;
+ timestamp: Date;
+}
+
+export default function ChatSidebar() {
+ const [messages, setMessages] = useState([
+ {
+ id: '1',
+ username: 'CyberUser',
+ message: 'Welcome to AeThex Live!',
+ timestamp: new Date(),
+ },
+ {
+ id: '2',
+ username: 'TechFan',
+ message: 'This stream is amazing!',
+ timestamp: new Date(),
+ },
+ ]);
+ const [inputMessage, setInputMessage] = useState('');
+ const messagesEndRef = useRef(null);
+
+ const scrollToBottom = () => {
+ messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
+ };
+
+ useEffect(() => {
+ // Simulate new messages
+ const interval = setInterval(() => {
+ const randomUsers = ['NeuralNet', 'DataStream', 'QuantumBit', 'CyberPunk'];
+ const randomMessages = [
+ 'Great content!',
+ 'Love the vibe',
+ '🔥🔥🔥',
+ 'Keep it up!',
+ 'Amazing quality',
+ ];
+
+ const newMessage: ChatMessage = {
+ id: Date.now().toString(),
+ username: randomUsers[Math.floor(Math.random() * randomUsers.length)],
+ message: randomMessages[Math.floor(Math.random() * randomMessages.length)],
+ timestamp: new Date(),
+ };
+
+ setMessages((prev) => [...prev.slice(-49), newMessage]);
+ }, 10000);
+
+ return () => clearInterval(interval);
+ }, []);
+
+ useEffect(() => {
+ scrollToBottom();
+ }, [messages]);
+
+ const handleSendMessage = (e: React.FormEvent) => {
+ e.preventDefault();
+ if (!inputMessage.trim()) return;
+
+ const newMessage: ChatMessage = {
+ id: Date.now().toString(),
+ username: 'You',
+ message: inputMessage,
+ timestamp: new Date(),
+ };
+
+ setMessages((prev) => [...prev, newMessage]);
+ setInputMessage('');
+ };
+
+ return (
+
+
+
+
+ {messages.map((msg) => (
+
+
+
+ {msg.username}:
+
+
+ {msg.message}
+
+
+
+ ))}
+
+
+
+
+
+ );
+}
diff --git a/components/HLSPlayer.tsx b/components/HLSPlayer.tsx
new file mode 100644
index 0000000..eacccea
--- /dev/null
+++ b/components/HLSPlayer.tsx
@@ -0,0 +1,131 @@
+'use client';
+
+import { useEffect, useRef, useState } from 'react';
+import Hls from 'hls.js';
+
+interface HLSPlayerProps {
+ src: string;
+ autoPlay?: boolean;
+ loop?: boolean;
+ muted?: boolean;
+}
+
+export default function HLSPlayer({
+ src,
+ autoPlay = true,
+ loop = true,
+ muted = true,
+}: HLSPlayerProps) {
+ const videoRef = useRef(null);
+ const [isLoading, setIsLoading] = useState(true);
+ const [error, setError] = useState(null);
+ const hlsRef = useRef(null);
+
+ useEffect(() => {
+ const video = videoRef.current;
+ if (!video) return;
+
+ let mounted = true;
+
+ const initializePlayer = () => {
+ if (Hls.isSupported()) {
+ const hls = new Hls({
+ enableWorker: true,
+ lowLatencyMode: true,
+ });
+ hlsRef.current = hls;
+
+ hls.loadSource(src);
+ hls.attachMedia(video);
+
+ hls.on(Hls.Events.MANIFEST_PARSED, () => {
+ if (mounted) {
+ setIsLoading(false);
+ if (autoPlay) {
+ video.play().catch((err) => {
+ console.error('Autoplay failed:', err);
+ });
+ }
+ }
+ });
+
+ hls.on(Hls.Events.ERROR, (event, data) => {
+ console.error('HLS error:', data);
+ if (data.fatal && mounted) {
+ switch (data.type) {
+ case Hls.ErrorTypes.NETWORK_ERROR:
+ setError('Network error - attempting to recover');
+ hls.startLoad();
+ break;
+ case Hls.ErrorTypes.MEDIA_ERROR:
+ setError('Media error - attempting to recover');
+ hls.recoverMediaError();
+ break;
+ default:
+ setError('Fatal error - cannot recover');
+ hls.destroy();
+ break;
+ }
+ }
+ });
+ } else if (video.canPlayType('application/vnd.apple.mpegurl')) {
+ // For Safari native HLS support
+ video.src = src;
+ const handleLoadedMetadata = () => {
+ if (mounted) {
+ setIsLoading(false);
+ if (autoPlay) {
+ video.play().catch((err) => {
+ console.error('Autoplay failed:', err);
+ });
+ }
+ }
+ };
+ video.addEventListener('loadedmetadata', handleLoadedMetadata);
+
+ return () => {
+ video.removeEventListener('loadedmetadata', handleLoadedMetadata);
+ };
+ } else if (mounted) {
+ setError('HLS is not supported in this browser');
+ setIsLoading(false);
+ }
+ };
+
+ initializePlayer();
+
+ return () => {
+ mounted = false;
+ if (hlsRef.current) {
+ hlsRef.current.destroy();
+ hlsRef.current = null;
+ }
+ };
+ }, [src, autoPlay]);
+
+ return (
+
+
+ {isLoading && (
+
+ )}
+ {error && (
+
+ {error}
+
+ )}
+
+ );
+}
diff --git a/components/NowPlaying.tsx b/components/NowPlaying.tsx
new file mode 100644
index 0000000..7149473
--- /dev/null
+++ b/components/NowPlaying.tsx
@@ -0,0 +1,73 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+
+interface Track {
+ title: string;
+ artist: string;
+ album?: string;
+}
+
+export default function NowPlaying() {
+ const [currentTrack, setCurrentTrack] = useState