🌊 Waves - Listen Together, Rise Together

A social music streaming platform where users connect their music apps and experience synchronized listening with friends. Built with Next.js, TypeScript, and Tailwind CSS.

✨ Features

🎵 Music Integration

• Spotify Connect - Link your Spotify account
• YouTube Music - Connect YouTube Music (coming soon)
• Last.fm Scrobbling - Track your listening activity
• Real-time Sync - Listen together in perfect harmony

🏆 Social & Gamification

• Listening Parties - Create and join music rooms
• Leaderboards - Compete for top listener spots
• Achievement System - Unlock badges and milestones
• User Profiles - Showcase your music taste and stats

🎨 Beautiful Design

• Wave-inspired UI - Fluid, energetic, and calming design
• Responsive Design - Works on all devices
• Dark Theme - Easy on the eyes
• Smooth Animations - Framer Motion powered

🎨 Design System

Colors

• Ocean Blue (#0077B6) - Primary brand color
• Seafoam Green (#00BFA6) - Secondary accent
• Sunset Coral (#FF6B6B) - Call-to-action highlights
• Dark Slate (#1B262C) - Text and backgrounds
• Misty White (#F0F3F4) - Light accents

Typography

• Poppins Bold - Headlines and branding
• Inter Regular - Body text and UI elements
• Geist Mono - Code and technical content

🚀 Getting Started

Prerequisites

• Node.js 18+
• npm or yarn
• Spotify account (for music integration)

Installation

1. Clone the repository

   git clone https://github.com/yourusername/waves.git
   cd waves

2. Install dependencies

   npm install
   # or
   yarn install

3. Set up environment variables

   cp .env.example .env.local

   Add your API keys:

   SPOTIFY_CLIENT_ID=your_spotify_client_id
   SPOTIFY_CLIENT_SECRET=your_spotify_client_secret
   LASTFM_API_KEY=your_lastfm_api_key

4. Run the development server

   npm run dev
   # or
   yarn dev

5. Open your browser Navigate to http://localhost:3000

🏗️ Architecture

Frontend

• Next.js 15 - React framework with App Router
• TypeScript - Type-safe development
• Tailwind CSS - Utility-first CSS framework
• Framer Motion - Smooth animations

Backend (Coming Soon)

• Node.js - Server runtime
• WebSocket - Real-time communication
• PostgreSQL - Database
• Redis - Caching and sessions

Music APIs

• Spotify Web API - Music playback and user data
• Last.fm API - Scrobbling and music discovery
• YouTube Data API - Video metadata (planned)

📱 Screenshots

Coming soon - Screenshots of the Waves platform

🔮 Roadmap

Phase 1: Core Platform ✅

• Design system and UI components
• Basic app structure
• Component library

Phase 2: Music Integration 🚧

• Spotify API integration
• Last.fm scrobbling
• Basic music player

Phase 3: Social Features 📋

• User authentication
• Listening rooms
• Real-time chat
• Friend system

Phase 4: Gamification 📋

• Leaderboards
• Achievement system
• User profiles
• Statistics tracking

Phase 5: Advanced Features 📋

• YouTube Music integration
• Mobile app
• Music recommendations
• Social sharing

🤝 Contributing

We welcome contributions! Please see our Contributing Guide for details.

Development Setup

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Add tests if applicable
5. Submit a pull request

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

• Spotify - For their excellent API
• Last.fm - For music scrobbling
• Next.js Team - For the amazing framework
• Tailwind CSS - For the utility-first approach

📞 Support

• Discord - Join our community
• Email - support@waves.app
• Issues - Report bugs on GitHub

---

Made with ❤️ by the Waves Team

Listen Together, Rise Together 🌊