Building a Lyrics Finder App with React

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.

Code Explanation

LyricsFinder Component

The LyricsFinder component handles the API integration and manages the search results.

import { useState } from "react";
import SearchForm from "./SearchForm";

const LyricsFinder = () => {
  const [lyrics, setLyrics] = useState("");
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState("");

  const fetchLyrics = async (song, artist) => {
    setLoading(true);
    setError("");
    try {
      const response = await fetch(`https://api.lyrics.ovh/v1/${artist}/${song}`);
      if (!response.ok) {
        throw new Error("Lyrics not found");
      }
      const data = await response.json();
      setLyrics(data.lyrics);
    } catch (err) {
      setError(err.message);
    } finally {
      setLoading(false);
    }
  };

  return (
    <div classname="lyrics-finder">
      <searchform onsearch="{fetchLyrics}"></searchform>
      {loading && <p>Loading...</p>}
      {error && <p classname="error">{error}</p>}
      {lyrics && <pre classname="lyrics">{lyrics}

}