Valk's Music Zone

A personal music space built with Nuxt 3, featuring music search, playback, album collections, and blog functionality.

🎵 About

Valk's Music Zone is a full-stack web application that serves as a personal music discovery and sharing platform. It allows users to search for songs, albums, and artists, play music with a global player, browse album collections, and read music-related blog posts.

✨ Features

• Music Search: Search for songs, albums, and artists with real-time results
• Global Music Player: Fixed-bottom player with play/pause, next/previous, and progress controls
• Album Collections: Browse and view recently collected albums with beautiful card layouts
• Blog System: Markdown-based blog powered by Nuxt Content for sharing music stories
• Responsive Design: Modern, mobile-friendly UI built with Tailwind CSS
• Image Optimization: Cloudinary integration for optimized image delivery
• Type Safety: Full TypeScript support for better development experience

🛠️ Tech Stack

• Framework: Nuxt 3 (v3.12.3) - Vue 3 full-stack framework
• UI Framework: Vue 3 with Composition API
• State Management: Pinia via @pinia/nuxt
• Styling: Tailwind CSS (via CDN)
• Content Management: Nuxt Content for Markdown blog posts
• Image CDN: Cloudinary via @nuxtjs/cloudinary
• Type System: TypeScript
• Package Manager: pnpm
• Markdown Processing: marked and front-matter

📦 Setup

Make sure to install dependencies:

# npm
npm install

# pnpm (recommended)
pnpm install

# yarn
yarn install

# bun
bun install

🚀 Development Server

Start the development server on http://localhost:3000:

# npm
npm run dev

# pnpm
pnpm dev

# yarn
yarn dev

# bun
bun run dev

🏗️ Production

Build the application for production:

# npm
npm run build

# pnpm
pnpm build

# yarn
yarn build

# bun
bun run build

Locally preview production build:

# npm
npm run preview

# pnpm
pnpm preview

# yarn
yarn preview

# bun
bun run preview

📚 Learn More

• Nuxt Documentation
• Nuxt Deployment Documentation
• Vue 3 Documentation
• Pinia Documentation

📝 Project Structure

├── components/          # Vue components (AlbumCard, GlobalPlayer, etc.)
├── content/            # Markdown blog posts
├── pages/              # Nuxt pages (routes)
├── server/             # Server API routes
├── stores/             # Pinia stores (player state)
├── public/             # Static assets
└── nuxt.config.ts      # Nuxt configuration

---

Built with ❤️ using Nuxt 3