A Modern Streaming Platform
This is an interactive overview of the Streamify project, a lightweight Twitch-style clone built with vanilla HTML, CSS, and JavaScript to demonstrate core web development proficiency without heavy frameworks.
Project Features
Core functionalities built into the Streamify application.
Responsive Design
Mobile-first layout that adapts seamlessly to all screen sizes, from phones to desktops.
Dark/Light Theme
Supports system preference and manual toggling, with the user's choice saved in `localStorage`.
Client-Side Search
A debounced search input to instantly filter streams by title, channel name, or category.
HLS Video Playback
Uses the standard `
Follow System
"Follow" and "unfollow" channels, with the state persisted in the browser's `localStorage`.
Live Chat
Features a mock mode for demo purposes and an optional real-time mode via WebSockets.
Interactive Demo
A non-functional mock-up demonstrating the application's UI. Click a stream to see the channel view.
Live Streams
Playing the latest hits!
GamerPro
Speedrunning a classic RPG
PixelQueen
Just Chatting with viewers
TalksAlot
Architecture & Design
Key technical decisions and the project's structure.
Core Principles
Project Structure
/
├── 📂 assets/
├── 📂 modules/
│ ├── 📜 api.js
│ ├── 📜 chat.js
│ └── 📜 ...
├── 📜 index.html
├── 📜 channel.html
├── 📜 data.json
└── 📜 server.js (Optional)
How to Run
Follow these steps to get the project running on your local machine.