Skip to main content
Back
#04

C Flow

Premium local audio hub & music visualizer with glassmorphism UI. Features local folder scanning, metadata extraction, daily listening streaks. React + Tailwind CSS v4, Express, music-metadata.

JavaScriptReactExpressGlassmorphismAudioMusic PlayerVisualization
<p align="center"> <img src="images/dashboard1.png" alt="Header Banner" width="100%"/> </p> <h1 align="center">C Flow</h1> <p align="center"> <strong>Premium local audio hub & music visualizer with glassmorphism UI</strong> </p> <p align="center"> <a href="https://c-flow.curzy.dev"><strong>🌐 Live Demo Website</strong></a> </p> <div align="center">

Stars Forks License Platform

</div> <p align="center"> <a href="#-why-c-flow">Why This</a> · <a href="#-key-features">Features</a> · <a href="#%EF%B8%8F-architecture">Architecture</a> · <a href="#-quick-start">Quick Start</a> · <a href="#-preview">Preview</a> </p>

🕒 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 ScanningScans folder resources using music-metadata to fetch details automatically.
🔥 Daily Streak EngineTracks active listening streaks with WIB (UTC+7) reset rules.
🧪 Fluid VisualizerBuilt-in custom music visualizer aligned with Framer Motion animations.

🎯 Key Features

Audio Hub Mechanics

FeatureStatusDescription
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

CapabilityStatusDescription
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

<p align="center"> <img src="images/dashboard1.png" alt="Dashboard View" width="48%"/> <img src="images/dashboard2.png" alt="Library View" width="48%"/> </p>

📄 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!

<p align="center"> <a href="https://donate.curzy.dev/"><strong>💝 Donate via Crypto or QRIS</strong></a> </p>

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

<sub>Built with passion as the 4th Project of the 50 Projects Challenge by @curzyori</sub>