Refactor code structure for improved readability and maintainability
This commit is contained in:
GitHub
73
README.md
73
README.md
@@ -1,50 +1,58 @@
|
||||
|
||||
# mice (project still reworked)
|
||||
> project still, now with navidrome
|
||||
<p align="left" style="display: flex; align-items: center; gap: 12px;">
|
||||
<img src="https://github.com/sillyangel/mice/blob/main/public/icon-512.png?raw=true" alt="Mice Logo" width="64" style="border-radius: 12px;" />
|
||||
<strong style="font-size: 2em;">Mice | Navidrome Client</strong>
|
||||
</p>
|
||||
|
||||
> project based on [shadcn/ui](https://github.com/shadcn-ui/ui)'s music template
|
||||
#
|
||||
|
||||
This is a modern music streaming web application built with [Next.js](https://nextjs.org/) and [shadcn/ui](https://ui.shadcn.com/), now powered by **Navidrome** for a complete self-hosted music streaming experience.
|
||||
> Project based on [shadcn/ui](https://github.com/shadcn-ui/ui)'s music template.
|
||||
|
||||
**✨ New**: Migrated from Firebase + static data to **Navidrome/Subsonic** integration for real music streaming!
|
||||
<!-- This is a music streaming web application built with [Next.js](https://nextjs.org/) and [shadcn/ui](https://ui.shadcn.com/), now powered by **Navidrome** for a complete self-hosted music streaming experience. -->
|
||||
|
||||
### Features
|
||||
This is a "Modern" Navidrome (or Subsonic) client built with [Next.js](https://nextjs.org/) and [shadcn/ui](https://ui.shadcn.com/). It creates a beautiful, responsive music streaming web application that connects to your Navidrome server, and fully able to self-host.
|
||||
|
||||
- 🎵 **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
|
||||
## 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
|
||||
- **Search** - Find music across your entire library
|
||||
- **Audio Player** with queue management
|
||||
- **Scrobbling** - Track your listening history
|
||||
<!-- - **Playlist Management** - Create and manage playlists -->
|
||||
|
||||
### Preview
|
||||
|
||||
|
||||
|
||||
## Quick Start
|
||||
|
||||
### Prerequisites
|
||||
- [Navidrome](https://www.navidrome.org/) server running
|
||||
- Node.js 18+ and pnpm
|
||||
- Node.js 18+
|
||||
|
||||
### Setup
|
||||
|
||||
1. **Clone and install**
|
||||
1. **Clone and install the required dependencies**
|
||||
|
||||
```bash
|
||||
git clone https://github.com/sillyangel/project-still.git
|
||||
cd project-still/
|
||||
pnpm install
|
||||
|
||||
# or npm
|
||||
npm install
|
||||
```
|
||||
|
||||
2. **Configure Navidrome connection**
|
||||
## 2. **Configure the Navidrome connection**
|
||||
|
||||
First, copy the example environment file:
|
||||
|
||||
```bash
|
||||
cp .env.example .env
|
||||
```
|
||||
|
||||
Edit `.env` with your Navidrome server details:
|
||||
Next, open the new `.env` file and update it with your Navidrome server credentials:
|
||||
|
||||
```env
|
||||
NEXT_PUBLIC_NAVIDROME_URL=http://localhost:4533
|
||||
@@ -54,10 +62,23 @@ NEXT_PUBLIC_POSTHOG_KEY=phc_XXXXXXXXXXXXXXXXXX
|
||||
NEXT_PUBLIC_POSTHOG_HOST=https://us.i.posthog.com
|
||||
```
|
||||
|
||||
> **Tip:** If you don’t have your own Navidrome server yet, you can use the public demo credentials:
|
||||
|
||||
```env
|
||||
NEXT_PUBLIC_NAVIDROME_URL=https://demo.navidrome.org
|
||||
NEXT_PUBLIC_NAVIDROME_USERNAME=demo
|
||||
NEXT_PUBLIC_NAVIDROME_PASSWORD=demo
|
||||
```
|
||||
|
||||
3. **Run the development server**
|
||||
|
||||
```bash
|
||||
pnpm dev
|
||||
|
||||
# or npm
|
||||
|
||||
npm run dev
|
||||
|
||||
```
|
||||
|
||||
Open [http://localhost:40625](http://localhost:40625) in your browser.
|
||||
@@ -98,10 +119,6 @@ docker run -p 3000:3000 \
|
||||
|
||||
📖 **For detailed Docker configuration, environment variables, troubleshooting, and advanced setups, see [DOCKER.md](./DOCKER.md)**
|
||||
|
||||
## Migration from Firebase
|
||||
|
||||
This project was migrated from Firebase to Navidrome. See [NAVIDROME_MIGRATION.md](./NAVIDROME_MIGRATION.md) for detailed migration notes and troubleshooting.
|
||||
|
||||
## Tech Stack
|
||||
|
||||
- **Frontend**: Next.js 15, React 19, TypeScript
|
||||
@@ -110,14 +127,6 @@ This project was migrated from Firebase to Navidrome. See [NAVIDROME_MIGRATION.m
|
||||
- **Audio**: Web Audio API with streaming
|
||||
- **State**: React Context for global state management
|
||||
|
||||
## 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.
|
||||
|
||||
Reference in New Issue
Block a user