📄 Contextual Meme Loading API

A simple, high-performance serverless API that provides a random, context-specific meme image URL. It's designed for developers who want to show a delightful and relevant meme during application loading screens or other wait times.

🚀 Base URL

Once deployed, your API endpoint will be available at:

https://memesapi.netlify.app/.netlify/functions/get-meme

---

🔑 Authentication

No authentication is required to use this API. All endpoints are public.

---

Endpoints

Get Random Memes

Returns one or more random meme URLs based on a specified category (context).

Request

GET /.netlify/functions/get-meme

Query Parameters

Parameter	Type	Description	Default
context	string	Required. The category for the desired meme. The API will search for a meme matching this context.	page_load
count	integer	Optional. The number of memes to return.	1

Note: The maximum value for count is 10.

Success Response (200 OK)

Content-Type: application/json

Returns a JSON array of meme objects. Each object contains the public URL of the meme and its category.

Response Body Example (for count=2):

[
  {
    "url": "https://<your-project>.supabase.co/storage/v1/object/public/memes/meme1.gif",
    "category": "page_load"
  },
  {
    "url": "https://<your-project>.supabase.co/storage/v1/object/public/memes/meme2.jpg",
    "category": "page_load"
  }
]

Error Responses

• 404 Not Found

  • Reason: No memes could be found for the context provided. This means you either passed a context that has no corresponding entries in the database, or the database is empty for that category.
  • Body:

    {
      "error": "No meme found for the given context."
    }

• 405 Method Not Allowed

  • Reason: The request was made using a method other than GET or OPTIONS.

• 500 Internal Server Error

  • Reason: A generic error occurred on the server, likely related to the database connection or an unhandled exception.

---

Example Usage

cURL

1. Get a single meme with the default page_load context:

curl "https://memesapi.netlify.app/.netlify/functions/get-meme"

2. Get 3 memes for a specific searching context:

curl "https://memesapi.netlify.app/.netlify/functions/get-meme?context=searching&count=3"

JavaScript (Client-Side)

Here is a simple example of how to fetch multiple memes and display the first one on a webpage.

async function displayMeme(context = 'page_load', count = 1) {
  try {
    const apiUrl = `https://memesapi.netlify.app/.netlify/functions/get-meme?context=${context}&count=${count}`;
    const response = await fetch(apiUrl);
    
    if (!response.ok) {
      throw new Error(`API call failed: ${response.statusText}`);
    }

    const memes = await response.json();

    if (memes && memes.length > 0) {
      // Display the first meme from the returned array
      const firstMeme = memes[0];
      
      // Assuming you have an <img id="meme"> element in your HTML
      const imgElement = document.getElementById('meme');
      imgElement.src = firstMeme.url;
      imgElement.alt = `Meme for context: ${firstMeme.category}`;

      console.log('Successfully loaded memes:', memes);
    }
  } catch (error) {
    console.error('Failed to load memes:', error);
    // You could display a default image or error message here
  }
}

// Call the function to display a meme
displayMeme('searching', 3);