Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/abhishekboadgurjar/Lyrics-Finder
The Lyrics Finder allows users to search for song lyrics by entering the song title and artist name. It fetches the lyrics from a public API and displays them on the screen. Users can quickly find and read the lyrics of their favorite songs.
https://github.com/abhishekboadgurjar/Lyrics-Finder
api css javascript jsx lyrics-finder react web-development
Last synced: 1 day ago
JSON representation
The Lyrics Finder allows users to search for song lyrics by entering the song title and artist name. It fetches the lyrics from a public API and displays them on the screen. Users can quickly find and read the lyrics of their favorite songs.
- Host: GitHub
- URL: https://github.com/abhishekboadgurjar/Lyrics-Finder
- Owner: abhishekgurjar-in
- Created: 2024-09-09T17:00:18.000Z (5 months ago)
- Default Branch: main
- Last Pushed: 2024-09-13T05:38:55.000Z (5 months ago)
- Last Synced: 2024-09-29T06:23:12.245Z (5 months ago)
- Topics: api, css, javascript, jsx, lyrics-finder, react, web-development
- Language: JavaScript
- Homepage: https://lyrics-finder-in.netlify.app/
- Size: 86.9 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Lyrics Finder Website
## Introduction
In this tutorial, we'll create a Lyrics Finder web application using React. This project is perfect for those looking to practice integrating APIs, managing state, and displaying dynamic content.
## Project Overview
The Lyrics Finder allows users to search for song lyrics by entering the song title and artist name. It fetches the lyrics from a public API and displays them on the screen. Users can quickly find and read the lyrics of their favorite songs.
## Features
- **Search Functionality**: Users can search for lyrics by song title and artist name.
- **API Integration**: Fetches lyrics from a public lyrics API.
- **Dynamic Content**: Displays lyrics dynamically based on user input.
- **User-Friendly Interface**: Clean and easy-to-use interface for searching and viewing lyrics.
## Technologies Used
- **React**: For building the user interface and managing component states.
- **CSS**: For styling the application.
- **JavaScript**: For handling API requests and app logic.
## Project Structure
The project is organized as follows:
```
├── public
├── src
│ ├── components
│ │ ├── LyricsFinder.jsx
│ │ ├── SearchForm.jsx
│ ├── App.jsx
│ ├── App.css
│ ├── index.js
│ └── index.css
├── package.json
└── README.md
```
### Key Components
- **LyricsFinder.jsx**: Manages the search logic and displays the fetched lyrics.
- **SearchForm.jsx**: Provides a form for users to input song title and artist name.
- **App.jsx**: Renders the main layout and the `LyricsFinder` component.
## Installation and Usage
To get started with this project, clone the repository and install the dependencies:
```bash
git clone https://github.com/abhishekboadgurjar/lyrics-finder.git
cd lyrics-finder
npm install
npm start
```
This will start the development server, and the application will be running at `http://localhost:3000`.
## Live Demo
Check out the live demo of the Lyrics Finder [here](https://lyrics-finder-in.netlify.app/).
## Screenshots
## Conclusion
The Lyrics Finder project is an excellent way to practice integrating APIs and handling dynamic content in React. It provides a practical example of building a useful application with a clean and interactive user interface.
## Credits
- **Inspiration**: The project is inspired by the need for quick access to song lyrics while listening to music.
### Author
**Abhishek Gurjar** is a web developer passionate about building interactive and engaging web applications. You can follow his work on [GitHub](https://github.com/abhishekboadgurjar).