Files
mice/README.md
2025-06-19 02:09:24 +00:00

3.3 KiB

splash

stillnavidrome (project still)

still water, now with navidrome

project based on shadcn/ui's music template

This is a modern music streaming web application built with Next.js and shadcn/ui, now powered by Navidrome for a complete self-hosted music streaming experience.

New: Migrated from Firebase + static data to Navidrome/Subsonic integration for real music streaming!

Features

  • 🎵 Real Music Streaming via Navidrome/Subsonic API
  • 📱 Modern UI with shadcn/ui components
  • 🎨 Dynamic Album Artwork from your music library
  • Favorites - Star albums, artists, and songs
  • 📋 Playlist Management - Create and manage playlists
  • 🔍 Search - Find music across your entire library
  • 🎧 Audio Player with queue management
  • 📊 Scrobbling - Track your listening history

Preview

preview

Quick Start

Prerequisites

  • Navidrome server running
  • Node.js 18+ and pnpm

Setup

  1. Clone and install
git clone https://github.com/sillyangel/project-still.git
cd project-still/
pnpm install
  1. Configure Navidrome connection
cp .env.example .env.local

Edit .env.local with your Navidrome server details:

NEXT_PUBLIC_NAVIDROME_URL=http://localhost:4533
NEXT_PUBLIC_NAVIDROME_USERNAME=your_username
NEXT_PUBLIC_NAVIDROME_PASSWORD=your_password
  1. Run the development server
pnpm dev

Open http://localhost:40625 in your browser.

Migration from Firebase

This project was migrated from Firebase to Navidrome. See NAVIDROME_MIGRATION.md for detailed migration notes and troubleshooting.

Tech Stack

  • Frontend: Next.js 15, React 19, TypeScript
  • UI: shadcn/ui, Tailwind CSS, Radix UI
  • Backend: Navidrome (Subsonic API compatible)
  • Audio: Web Audio API with streaming
  • State: React Context for global state management

Project Structure

lib/
  navidrome.ts              # Navidrome API client
app/
  components/
    NavidromeContext.tsx    # Data provider for Navidrome
    AudioPlayerContext.tsx  # Audio player state management
    album-artwork.tsx       # Album display component
    artist-icon.tsx         # Artist display component
    AudioPlayer.tsx         # Main audio player
  library/                  # Library pages
    albums/                 # Albums view
    artists/                # Artists view  
    playlists/              # Playlists view
  album/[id]/              # Album detail page
  artist/[artist]/         # Artist detail page

Contributing

  1. Fork the repository
  2. Create a feature branch
  3. Make your changes
  4. Test with your Navidrome server
  5. Submit a pull request

License

This project is licensed under the MIT License.

Acknowledgments