- Introduction
- Features
- Demo
- Tech Stack
- Getting Started with Development
- Installation
- Usage
- Testing
- Deployment
- Contributing
- License
- Contact
- Acknowledgements
Welcome to React Lyrics Finder, a beautifully designed web application built with React, Vite, Alova.js, Material-UI (MUI), and TypeScript. This application allows users to effortlessly search for and view song lyrics by entering the song title and artist's name. Whether you're a music enthusiast, a developer honing your skills, or someone looking to integrate APIs and manage dynamic content, Lyrics Finder provides a seamless and engaging experience.
- Search Functionality: Easily search for song lyrics by entering the song title and artist's name.
- API Integration: Fetches lyrics from the Lyrics.ovh public API using Alova.js.
- Dynamic Content: Displays lyrics dynamically based on user input.
- Dark Mode: Toggle between light and dark themes for a personalized user experience.
- Animations: Smooth fade-in animations enhance user interactions.
- Responsive Design: Optimized for various devices and screen sizes using Material-UI's grid system.
- Error Handling: Gracefully handles errors and informs users when lyrics aren't found.
- Accessibility: Ensures an accessible interface for all users.
Screenshot of the Lyrics Finder application showcasing both light and dark modes.
- Frontend: React, Vite, TypeScript
- UI Framework: Material-UI (MUI)
- API Handling: Alova.js
- Styling & Animations: @emotion/react, @emotion/styled
- State Management: React Hooks
react-lyrics-finder-app/
├── public/
│ └── vite.svg
├── src/
│ ├── adapters/
│ │ └── fetchRequestAdapter.ts
│ ├── components/
│ │ ├── LyricsDisplay.tsx
│ │ └── SearchBar.tsx
│ ├── hooks/
│ │ └── useFetchLyrics.ts
│ ├── styles/
│ │ └── theme.ts
│ ├── App.tsx
│ ├── main.tsx
│ └── index.html
├── .gitignore
├── package.json
├── tsconfig.json
├── vite.config.ts
└── README.md
- public/: Contains static assets like
vite.svg
. - src/adapters/fetchRequestAdapter.ts: Custom fetch adapter integrating the native
fetch
API with Alova.js. - src/components/: Reusable React components.
LyricsDisplay.tsx
: Displays fetched lyrics.SearchBar.tsx
: User input for searching lyrics.
- src/hooks/useFetchLyrics.ts: Custom React hook for fetching lyrics using Alova.js.
- src/styles/theme.ts: Defines light and dark themes using Material-UI.
- src/App.tsx: Main application component integrating all parts.
- src/main.tsx: Entry point for the React application.
- src/index.html: HTML template for the React app.
- package.json: Project dependencies and scripts.
- tsconfig.json: TypeScript configuration.
- vite.config.ts: Vite configuration file.
- README.md: Project documentation.
Follow these steps to set up the project locally.
- Node.js (v14 or above)
- npm or Yarn package manager
-
Clone the Repository
git clone https://github.com/paladinknightmaster/react-lyrics-finder-app.git cd react-lyrics-finder-app
-
Install Dependencies
Using npm:
npm install
Or using Yarn:
yarn install
-
Configure Environment Variables
Create a
.env
file in the root directory if you need to set any environment variables. For this project, the default API endpoint is used, so this step is optional unless you plan to customize API settings.VITE_API_BASE_URL=https://api.lyrics.ovh/v1
-
Run the Development Server
Using npm:
npm run dev
Or using Yarn:
yarn dev
Open your browser and navigate to
http://localhost:5173
to view the application.
-
Search for Lyrics
- Enter the Song Title and Artist Name in the respective input fields.
- Click the Search button.
- The lyrics will be fetched and displayed below the search bar.
-
Toggle Dark Mode
- Click the Toggle Dark Mode button to switch between light and dark themes.
-
Error Handling
- If lyrics are not found, an error message will inform you.
- Ensure you're entering the correct song title and artist's name.
To ensure the application works as expected, use the following sample song title and artist pairs:
Song Title | Artist |
---|---|
Bohemian Rhapsody | Queen |
Imagine | John Lennon |
Go the Distance | Michael Bolton |
Blinding Lights | The Weeknd |
Don't Stop Believin' | Journey |
Shape of You | Ed Sheeran |
Rolling in the Deep | Adele |
Lose Yourself | Eminem |
Despacito | Luis Fonsi |
Rock & Roll All Nite | KISS |
Smells Like Teen Spirit | Nirvana |
Hallelujah | Leonard Cohen |
7 Rings | Ariana Grande |
Under Pressure | Queen & David Bowie |
All of Me | John Legend |
-
Valid Searches
-
Test Case 1:
- Title: Bohemian Rhapsody
- Artist: Queen
- Expected Result: Displays lyrics for "Bohemian Rhapsody" by Queen.
-
Test Case 2:
- Title: Go the Distance
- Artist: Michael Bolton
- Expected Result: Displays lyrics for "Go the Distance" by Michael Bolton.
-
-
Handling Special Characters
-
Test Case 3:
- Title: Don't Stop Believin'
- Artist: Journey
- Expected Result: Correctly fetches and displays lyrics despite apostrophes.
-
Test Case 4:
- Title: Rock & Roll All Nite
- Artist: KISS
- Expected Result: Correctly fetches and displays lyrics despite ampersand.
-
-
Error Scenarios
-
Test Case 5:
- Title: Nonexistent Song
- Artist: Unknown Artist
- Expected Result: Displays an error message indicating lyrics not found.
-
Test Case 6:
- Title: Imagine
- Artist: Incorrect Artist
- Expected Result: Displays an error message indicating lyrics not found.
-
-
Edge Cases
-
Test Case 7:
- Title: Hallelujah
- Artist: Leonard Cohen
- Expected Result: Displays lyrics correctly.
-
Test Case 8:
- Title: Shape of You
- Artist: Ed Sheeran
- Expected Result: Displays lyrics correctly.
-
You can deploy the Lyrics Finder application using various platforms. Below are instructions for deploying with Vercel and Netlify.
-
Install Vercel CLI
npm install -g vercel
-
Deploy
vercel
Follow the prompts to deploy your application.
-
Login to Netlify
Go to Netlify and sign up or log in.
-
New Site from Git
- Click on "New site from Git".
- Connect your GitHub repository.
- Set the build command to
npm run build
and the publish directory todist
.
-
Deploy
Follow the prompts to complete the deployment.
This project is licensed under the MIT License.
- Vite - Next Generation Frontend Tooling
- React - A JavaScript library for building user interfaces
- Alova.js - Type-Safe HTTP Request Library
- Material-UI (MUI) - React UI framework
- Lyrics.ovh API - Free Lyrics API
- Icons8 - Icons used in the project