About Ipsound
Your modern music streaming platform
Project Overview
Ipsound is a modern music streaming application developed as the Mini Project 2 for the TDW class. It leverages the Deezer API to provide users with access to millions of tracks, albums, artists, and curated playlists with advanced playback features.
Key Features
- Advanced search for tracks, albums, and artists with dedicated result pages
- Browse artist profiles with top tracks and discographies
- Album details with complete tracklists
- Custom playlist creation and management
- Full-featured audio player with play, pause, skip, and previous controls
- Loop modes (off, track, playlist) and shuffle functionality
- Queue management with visual panel
- Context menu for quick track actions
- Persistent playback state and playlists across browser sessions
- Responsive design with collapsible sidebar navigation
- Volume control with mute functionality and progress seeking
- Dark/Light theme support with system preference detection
Technology Stack
Frontend
- Next.js 14 with App Router
- React 18
- TypeScript
- Tailwind CSS
- shadcn/ui & Radix UI components
State Management
- Redux Toolkit
- RTK Query for API calls
- Custom middleware for localStorage
- Custom hooks for audio management
Testing & CI/CD
- Jest with ts-jest
- React Testing Library
- GitHub Actions pipeline
- Automated testing and builds
Development Tools
- pnpm package manager
- ESLint & Prettier
- Husky for Git hooks
- TypeScript strict mode
Data Source
This application consumes data from the Deezer API, a comprehensive music database providing access to:
- Millions of tracks from various artists and genres
- Album information including cover art and metadata
- Global and regional music charts
- Curated radio stations and playlists
- Genre classifications and recommendations
Technical Challenges
Several technical challenges were addressed during development:
- CORS Policy: Implemented JSONP requests to bypass Deezer API CORS restrictions
- Audio Synchronization: Created custom hooks to synchronize HTML5 Audio API with Redux state
- State Persistence: Developed middleware to save and restore player state in localStorage
- Hydration Issues: Resolved Next.js SSR hydration mismatches with client-side state restoration
- Audio Lifecycle: Managed audio source changes and automatic track progression
Architecture
The application follows a modular architecture with clear separation of concerns:
- Store Layer: Redux slices for player and audio state management
- API Layer: RTK Query services for all external data fetching
- Component Layer: Reusable UI components organized by feature
- Hook Layer: Custom hooks for audio management and state synchronization
- Middleware Layer: Custom middleware for cross-cutting concerns like persistence
Future Enhancements
- User authentication with backend integration
- Playlist sharing and collaboration features
- Advanced search filters (genre, year, popularity)
- Lyrics integration and synchronized display
- Equalizer and audio effects
- Offline mode with service workers
- Integration with other music APIs (Spotify, Apple Music)
About the Developer
Developed by Félix Scherer as Mini Project 2 for the TDW class. This project demonstrates proficiency in modern web development technologies including React/Next.js, TypeScript, Redux state management, API integration, and comprehensive testing strategies.
The application showcases advanced features such as persistent state management, custom audio playback controls, playlist management, and a fully responsive user interface with theme support.