A modern anime streaming web application built with React. Cozify provides a seamless viewing experience with an elegant interface, custom HLS video player, and comprehensive user tracking features.

---

Demo

Live Demo: https://kirazul.github.io/Cozify/

---

Table of Contents

• Overview
• Features
• Tech Stack
• Architecture
• API Reference
• Project Structure
• Getting Started
• Screenshots
• License

---

Overview

Cozify is a single-page application designed for anime enthusiasts. It aggregates anime content through the YumaAPI, providing access to a vast library of anime series with both subbed and dubbed options. The application features a custom HLS video player with subtitle support, quality selection, and a dedicated backend proxy for CORS-free streaming.

---

Features

Core Functionality

• Browse trending, top airing, and recently updated anime
• Search anime with real-time suggestions
• View detailed anime information including synopsis, rating, and episode list
• Stream episodes with SUB/DUB audio options
• Daily airing schedule

Video Player

• Custom HLS.js-based player with full controls
• Subtitle support with multiple language options (auto-selects English)
• Quality selection (Auto, 1080p, 720p, 360p)
• Playback speed control (0.25x to 2x)
• Instant seeking with visual feedback
• Keyboard shortcuts:
  • Space/K: Play/Pause
  • F: Fullscreen
  • M: Mute
  • N: Next episode
  • P: Previous episode
  • Arrow keys: Seek 10 seconds

User Profile System

• Welcome modal for first-time visitors
• Watch history tracking with continue watching feature
• Episode completion tracking (marks watched after 1 minute)
• Real-time watch time statistics
• Trophy achievement system with 4 tiers (Bronze, Silver, Gold, Platinum)
• Visual indicators for watched episodes

Design

• Dark theme with signature pink accent (#ffbade)
• Glassmorphism UI elements
• Responsive layout for all screen sizes
• Smooth animations and transitions

---

Tech Stack

Technology	Purpose
React 18	UI Framework
React Router DOM 6	Client-side routing
Vite 5	Build tool and dev server
HLS.js	HTTP Live Streaming support
CSS3	Styling with custom properties
LocalStorage	Client-side data persistence
Deno Deploy	Backend proxy server

---

Architecture

Cozify uses a two-tier architecture:

Frontend (GitHub Pages)

• React SPA hosted on GitHub Pages
• Communicates with the backend proxy for all streaming data

Backend Proxy (Deno Deploy)

• Hosted at https://cozify-api.deno.dev
• Proxies YumaAPI requests to bypass CORS
• Rewrites HLS playlist URLs for seamless streaming
• Proxies subtitle VTT files for cross-origin access

---

API Reference

Cozify uses a custom Deno Deploy backend that proxies the YumaAPI.

Backend Base URL

https://cozify-api.deno.dev

Endpoints

Endpoint	Description
/api/search/{query}	Search anime by title
/api/info/{anime_id}	Get detailed anime information and episode list
/watch?episodeId={id}&type={sub|dub}	Get proxied video streaming sources
/stream?url={m3u8_url}	Proxy HLS streams with CORS headers
/subtitle?url={vtt_url}	Proxy subtitle files
/api/recent-episodes	Fetch recently updated episodes
/api/top-airing	Get current top airing anime
/api/spotlight	Get featured spotlight anime
/api/genre/{genre_name}	Get anime by genre
/api/schedule/{YYYY-MM-DD}	Get airing schedule for a date

Video Streaming Flow

1. Frontend requests /watch with episode ID
2. Backend fetches sources from YumaAPI
3. Backend rewrites source URLs to go through /stream proxy
4. HLS.js loads the proxied m3u8 playlist
5. All segment requests are automatically proxied

---

Project Structure

cozify/
├── public/
│   └── anw-min.webp          # Background image asset
├── src/
│   ├── api/
│   │   └── index.js          # API service layer
│   ├── components/
│   │   ├── Header.jsx        # Navigation header
│   │   ├── VideoPlayer.jsx   # Custom HLS player with settings
│   │   ├── VideoPlayer.css   # Player styles
│   │   ├── AnimeCard.jsx     # Anime card component
│   │   ├── TrendingCarousel.jsx
│   │   ├── TopTen.jsx
│   │   └── WelcomeModal.jsx  # First-visit welcome modal
│   ├── pages/
│   │   ├── Home.jsx          # Landing page
│   │   ├── Browse.jsx        # Browse/search page
│   │   ├── Anime.jsx         # Anime detail page
│   │   ├── Watch.jsx         # Video watch page
│   │   ├── Schedule.jsx      # Airing schedule
│   │   └── Profile.jsx       # User profile and stats
│   ├── services/
│   │   └── userService.js    # LocalStorage user data management
│   ├── styles/
│   │   └── global.css        # Global styles and CSS variables
│   ├── App.jsx               # Root component with routes
│   └── main.jsx              # Application entry point
├── index.html
├── package.json
└── vite.config.js

cozify-server/
├── main.ts                   # Deno Deploy backend
└── deno.json                 # Deno configuration

---

Getting Started

Prerequisites

• Node.js 18 or higher
• npm or yarn

Installation

1. Clone the repository

git clone https://github.com/Kirazul/Cozify.git
cd cozify

2. Install dependencies

npm install

3. Start the development server

npm run dev

4. Open your browser and navigate to http://localhost:5173

Build for Production

npm run build

Preview Production Build

npm run preview

---

Screenshots

Browse Page

Search and filter anime by genre, with grid layout display.

Watch Page

Full-featured video player with episode grid, anime info panel, and playback controls.

Profile Page

User statistics, watch history, continue watching section, and trophy achievements.

---

Configuration

Vite Configuration

The project uses Vite with React plugin. The base path is configured for GitHub Pages deployment.

Color Scheme

Primary accent color: #ffbade (Pink) Background: Dark theme with glassmorphism effects

---

License

This project is for educational purposes only. All anime content is provided through third-party APIs and streaming services.

---

Acknowledgments

• YumaAPI for providing the anime data API
• HiAnime.to as the data source
• Deno Deploy for backend hosting