Lofi Radio App

A modern, minimal lo-fi radio player built with React and TypeScript. Stream your favorite lo-fi beats with a beautiful glassmorphism UI.

🌐 Live Demo: https://anujrajak.github.io/lofiradioapp/

🔗 Repository: https://github.com/anujrajak/lofiradioapp

Features

• 🎵 Multiple lo-fi radio stations organized by moods (night, rain, study, sleep, chill)
• 🎨 Glassmorphism UI with full-screen background video
• 🔊 Volume control with visual slider
• ⏯️ Play/pause controls
• 🔀 Shuffle and navigate between stations
• 📱 Responsive design for all screen sizes
• 🎯 Mood-based station browsing

Tech Stack

• React 19 - UI framework
• TypeScript - Type safety
• Vite - Build tool
• Tailwind CSS - Styling
• React Icons - Icons
• YouTube IFrame API - Video playback

Installation

# Install dependencies
pnpm install

# Start development server
pnpm dev

# Build for production
pnpm build

# Preview production build
pnpm preview

# Deploy to GitHub Pages
pnpm run deploy

Usage

1. Click the hamburger menu (☰) to open the drawer
2. Browse moods (night, rain, study, sleep, chill)
3. Select a mood to see available stations
4. Click a station to start playing
5. Use the bottom controls to play/pause, adjust volume, shuffle, or navigate stations

Project Structure

src/
├── components/
│   └── BackgroundVideo.tsx  # YouTube video background component
├── data/
│   └── stations.ts          # Station data organized by moods
├── App.tsx                   # Main application component
└── index.css                 # Global styles

License

MIT