🎵 A modern web interface for SimpMusic Lyrics API - Search, view, and manage song lyrics with a beautiful, responsive UI.
- Full-text search across lyrics content
- Artist search to find songs by specific artists
- Song title search for exact matches
- Real-time search with instant results
- Request timing display for performance transparency
- Responsive design optimized for mobile and desktop
- Dark/Light theme support with system preference detection
- Beautiful typography with optimized font loading
- Smooth animations and transitions
- Clean, minimalist interface inspired by modern music apps
- Lyrics viewer with synced and plain lyrics support
- Community translations with language chips
- Vote system for lyrics quality (upvote/downvote)
- Download lyrics as LRC files
- Contributor attribution and vote counts
- Toast notifications for user feedback
- HMAC authentication for API requests
- Rate limiting awareness and error handling
- Real-time vote updates without page refresh
- Optimized API calls with proper caching
- Error boundaries and graceful error handling
- Node.js 18+
- npm/yarn/pnpm/bun
# Clone the repository
git clone https://github.com/maxrave-dev/lyrics-web.git
cd lyrics-web
# Install dependencies
npm install
# or
yarn install
# or
pnpm install
# or
bun install# Start development server
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun devOpen http://localhost:3000 in your browser.
# Build the application
npm run build
# or
yarn build
# Start production server
npm start
# or
yarn start- Next.js 15.4.5 - React framework with App Router
- React 19 - UI library
- TypeScript - Type safety
- Tailwind CSS - Utility-first CSS framework
- shadcn/ui - High-quality React components
This web interface connects to the SimpMusic Lyrics API:
- Repository: maxrave-dev/lyrics
- Live API: api-lyrics.simpmusic.org
- Tech Stack: Kotlin, Spring Boot, Appwrite Database
- Features: RESTful API, HMAC authentication, rate limiting, full-text search
- Repository: maxrave-dev/SimpMusic
- Platform: Android (Jetpack Compose)
- Description: FOSS YouTube Music client with lyrics integration
src/
├── app/ # Next.js App Router
│ ├── about/ # About page
│ ├── api/ # API documentation
│ ├── donate/ # Donation page
│ ├── search/ # Search page
│ └── layout.tsx # Root layout
├── components/ # React components
│ ├── ui/ # shadcn/ui components
│ ├── LyricsDialog.tsx # Main lyrics viewer
│ ├── Header.tsx # Navigation header
│ └── Footer.tsx # Page footer
├── lib/ # Utilities
│ ├── hmac.ts # HMAC authentication
│ ├── config.ts # Configuration
│ └── utils.ts # General utilities
└── hooks/ # Custom React hooks
We welcome contributions! Please see our Contributing Guidelines for details.
- Fork the repository
- Create a feature branch:
git checkout -b feature/amazing-feature - Commit your changes:
git commit -m 'Add amazing feature' - Push to the branch:
git push origin feature/amazing-feature - Open a Pull Request
- TypeScript for type safety
- ESLint + Prettier for code formatting
- Conventional Commits for commit messages
- Component-driven development
This project is licensed under the MIT License - see the LICENSE file for details.
Get a free $200 credit over 60 days on DigitalOcean: GET NOW
Crowdin and Sentry both have a free enterprise plan for Open-source projects. Follow the URLs:
Check out the Vercel open-source program:
This project is a part of SimpMusic.org Open-source project by me maxrave-dev