Lyrics Website

A responsive, modern web application for discovering song lyrics and artist details. Built using React with TypeScript and powered by Vite, this project provides a clean interface, embedded media playback, and essential features for music lovers.

---

Overview

This lyrics platform allows users to explore a library of songs, read lyrics, learn about artists, and curate their favorite content in a personal collection. The UI is designed to be minimal yet functional, with a strong focus on usability and speed.

---

ScreenShots

Home Page

Songs Page

Songs Dedicated Page

Artist Page

Artist Dedicated Page

Library Page

Setting Page

Setting Page Light Mode

---

Features

Home Page

• A focused layout with a central search bar for quickly searching song lyrics.

Songs Page

• Lists all available songs.
• Integrated search bar at the top.
• Clicking on a song opens a detailed song view that includes:
  • Cover image
  • Song metadata and description
  • Embedded 30-second Spotify playback
  • Dark-themed card layout for immersive lyric reading

Artists Page

• Displays all artists in a responsive card layout.
• Clicking on an artist opens a dedicated artist page featuring:
  • Artist bio and description
  • Social media links (e.g., Instagram, Twitter, YouTube)
  • Suggested songs by the artist available on the platform

Library Page

• Allows users to view their liked songs and artists.
• Organized for quick access to favorite content.

Settings Page

• Toggle between light and dark themes.
• Displays the current version of the website.

---

Tech Stack

• React with TypeScript – Frontend framework
• Vite – Lightning-fast development and build tool
• Tailwind CSS – Utility-first styling framework
• CSS Modules – Component-scoped custom styling
• 21st.dev Components – Prebuilt UI elements
• React Icons – Icon library
• Google Fonts – Custom typography
• React Router – Client-side routing
• Spotify Embed API – Playback integration

---

Getting Started

Clone the repository and install dependencies:

git clone https://github.com/prasxor/Lyrics-Website.git
cd lyrics-website
npm install
npm run dev

---

Roadmap

• Initial release with full browsing experience
• Spotify embed support
• Dark/light mode toggle
• Liked content in Library
• Future improvements:
  • Authentication and user profiles
  • Full-length playback support
  • Lyrics upload and submission
  • Social sharing features

---

License

This project is licensed under the MIT License.

---

Credits

Developed by : Prasxor(Prashant kumar sinha).
Fonts provided by Google Fonts.
Icons by React Icons.
UI components from 21st.dev.