This is a React-based web application that allows you to search for songs and their corresponding artist information using the iTunes API.
-
Search by song: Users can enter a song title or artist name to search for a specific song or artist. The search function uses the iTunes API to retrieve data.
-
Display results: The app displays the search results in a table, including artwork, artist name, track name, and price.
This is a React component called App which is the main component for the Song Finder project.
The code starts by importing useState hook from the react library and the CSS file for styling the app.
import { useState } from 'react'
import './App.css'The useState hook allows us to use state in a functional component.
The App component contains two state variables, searchTerm and artists, both of which are created using the useState hook. searchTerm is used to store the value of the search term entered by the user, while artists is used to store the array of artists that are returned from the iTunes API.
const [searchTerm, setSearchTerm] = useState('');
const [artists, setArtists] = useState([]);The findMusic function is called when the user clicks the search button. It checks if a search term has been entered and if so, it uses fetch to call the iTunes API with the search term. When the API call returns, it updates the artists state variable with the results.
const findMusic = () => {
if (!searchTerm || searchTerm === '') {
alert('Please enter a search term');
} else {
const url = `https://itunes.apple.com/search?term=${searchTerm}`;
fetch(url)
.then((response) => response.json())
.then((data) => {
setArtists(data.results);
})
}
}The return statement contains the JSX code that defines the UI of the app. It contains a header with the title "Song Finder", an input field for entering the search term, and a button to initiate the search. When the user clicks the search button, the findMusic function is called. If artists state variable has any items, a table is displayed with the details of the artists.
return (
<div className="App">
<h1>Song Finder</h1>
<input
type="text"
placeholder="Enter search term"
onChange={e => setSearchTerm(e.target.value)}
></input>
<button className="btn" onClick={(() => findMusic() )}>Search</button>
<hr></hr>
{artists.length && (
<table>
<thead>
<tr>
<th>Artwork</th>
<th>Artist Name</th>
<th>Track Name</th>
<th>Price</th>
</tr>
</thead>
<tbody>
{artists.map((artist) => {
const list = (
<>
<tr>
<td><img src={artist.artworkUrl60} alt={artist.artistName} /></td>
<td key={artist.artistId}>{artist.artistName}</td>
<td>{artist.trackCensoredName}</td>
<td>{artist.collectionPrice}</td>
</tr>
</>
);
return list;
})}
</tbody>
</table>
)}
</div>
)Overall, this code is responsible for rendering the UI of the Song Finder app and fetching and displaying the data from the iTunes API in a table.
- ReactJS
- JavaScript (ES6+)
- HTML
- CSS
- iTunes API (for fetching music data)
- Clone the repository:
git clone https://github.com/mmartins23/react-song-finder- Change into the project directory:
cd react-song-finder- Install dependencies:
npm install- Start the development server:
npm startThis will start the app on http://localhost:3000 in your browser.
- Start the application:
npm start - Enter a search term in the input field and click the "Search" button
- View the search results in the table below the search bar
This project is licensed under the terms of the MIT license. See LICENSE for more information.
You can reach me on Twitter
Feel free to send me a message if you have any questions or feedback about this project. I'll do my best to respond as soon as possible.