Skip to main content

​
Overview

The search endpoint allows you to query the MYMUSICK backend for songs. It returns an array of song objects matching your search query.

​
Endpoint

GET https://mymusick-backend.onrender.com/search

​
Query Parameters

​
q
string
required
The search query string. This can be a song title, artist name, or any combination of keywords.

​
Request Examples

curl -X GET "https://mymusick-backend.onrender.com/search?q=shape%20of%20you"

​
Response

Returns an array of song objects. See Response Format for detailed schema documentation.

​
Success Response (200 OK)

[
  {
    "id": "JGwWNGJdvx8",
    "title": "Shape of You",
    "artist": "Ed Sheeran",
    "thumbnail": "https://i.ytimg.com/vi/JGwWNGJdvx8/mqdefault.jpg"
  },
  {
    "id": "2Vv-BfVoq4g",
    "title": "Perfect",
    "artist": "Ed Sheeran",
    "thumbnail": "https://i.ytimg.com/vi/2Vv-BfVoq4g/mqdefault.jpg"
  }
]

​
Empty Results

If no songs match the query, the API returns an empty array: 
[]

​
Error Response

If the request fails, check the HTTP status code for error details.

​
Implementation Notes

Always use encodeURIComponent() when building the query parameter to properly handle special characters and spaces.
The backend is hosted on Render’s free tier and may have cold start delays. The first request after inactivity may take 30-60 seconds to respond.

​
Usage in MYMUSICK

From the main application code (index.html:113-134): 
input.addEventListener("keydown", async (e) => {
  if (e.key !== "Enter") return;

  const query = input.value.trim();
  if (!query) return;

  results.innerHTML = `<p>Buscando... 🎵</p>`;

  try {
    const res = await fetch(
      `https://mymusick-backend.onrender.com/search?q=${encodeURIComponent(query)}`
    );

    if (!res.ok) throw new Error();

    const songs = await res.json();
    renderSongs(songs);

  } catch {
    results.innerHTML = `<p>Error al buscar 😕</p>`;
  }
});

​
Best Practices

  • Validation: Always validate and trim user input before making requests
  • Encoding: Use encodeURIComponent() to properly encode query parameters
  • Error Handling: Implement try-catch blocks to gracefully handle network errors
  • User Feedback: Display loading states while waiting for responses
  • Empty States: Handle empty result arrays appropriately in your UI

Build docs developers (and LLMs) love

Get started for freeTalk to us