C Flow

Premium local audio hub & music visualizer with glassmorphism UI

🌐 Live Demo Website

Why This · Features · Architecture · Quick Start · Preview

---

🕒 Why C Flow?

A premium, modular audio hub designed for local music streaming. By combining a metadata extraction backend with a stunning glassmorphism UI, it provides a highly polished visual dashboard for local MP3 libraries.

🎵 Local Audio Scanning	Scans folder resources using music-metadata to fetch details automatically.
🔥 Daily Streak Engine	Tracks active listening streaks with WIB (UTC+7) reset rules.
🧪 Fluid Visualizer	Built-in custom music visualizer aligned with Framer Motion animations.

---

🎯 Key Features

Audio Hub Mechanics

Feature	Status	Description
MP3 Parser	✅	Auto extracts covers, artist names, titles, and track durations.
Streaks System	✅	WIB-based daily streak tracker writing progress to a local JSON file.
Stream Engine	✅	Native audio streaming pipeline serving files safely from backend storage.

Technical Capabilities

Capability	Status	Description
Express Router API	✅	Lightweight Modular REST API logic for status, streak, and music streams.
Glassmorphism UI	✅	Clean cyberpunk design built using React 19, Tailwind CSS v4, and Lucide.
Concurrently Dev	✅	Starts development servers concurrently using simple npm triggers.

---

🏗️ Architecture

c-flow/
├── backend/
│   ├── data/
│   │   └── streak.json    # Local JSON streak record store
│   ├── controllers/       # Business logic (music parser, streak computation)
│   ├── routes/            # REST API route endpoints
│   ├── services/          # AudioScanner scanner & streak background service
│   └── server.js          # Express server entry point
└── frontend/
    ├── src/               # React Vite client SPA bundle
    └── vite.config.js     # Vite configuration

---

🚀 Quick Start

Installation & Setup

# Clone the repository
git clone https://github.com/Curzyori/c-flow.git
cd c-flow

# Setup backend service
cd backend
npm install
npm start

# Setup frontend service (in a new terminal)
cd ../frontend
npm install
npm run dev

Add Your Music

Drop your .mp3 files into the root /music folder in backend, and the server will automatically scan them.

---

🖼️ Preview

---

📄 License

This project is released under the MIT License — free for educational, personal, and research purposes.

☕ Support

If this project is useful, consider supporting its development!

💝 Donate via Crypto or QRIS

Crypto payment details are maintained at donate.curzy.dev.

_{Built with passion as the 4th Project of the 50 Projects Challenge by @curzyori}