GET Products

The GET Products endpoint is used to retrieve a list of available products from the Product API. It returns product data in a structured JSON format, making it easy to display product information in frontend applications.

This endpoint is publicly accessible and does not require authentication.

Endpoint

🔐 API Key

https://products-api-qoo3.onrender.com/products

Important:

This API may take up to 10 seconds to load data.
Please be patient and avoid triggering multiple requests at the same time.

Query Parameters (Optional)

category

Property	Description
Parameter	`category`
Purpose	Filters products by category name
Case Sensitivity	Case-insensitive
Normalization	Category value is normalized
Available Values	`Electronics`, `Fashion`, `Home`

Example

/products?category=${category}

React Example

const [category, setCategory] = useState('') // returns all products

const url = `https://producs-ai-3.ender.com/products?category=${category}`

fetch(url).then(res => res.json())

// setCategory('Electronics')
// setCategory('') // returns all products

Use Example with React.js

import React, { useState, useEffect } from 'react'

function ProductCard() {

  const [data, setData] = useState([])

  useEffect(() => {
    fetch('https://Example-Product-key') // Add Api key Provided by DevSpace
      .then(res => res.json())
      .then(Data => setData(Data))
  }, [])

  return (
    <div className="p-4 mx-auto lg:max-w-screen-xl">

      <div className="border-b border-gray-300 pb-4">
        <h2 className="text-slate-900 text-2xl font-bold">Hot list</h2>
        <p className="text-slate-600 mt-2">
          Our most popular and trending products.
        </p>
      </div>

      <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 sm:gap-6 mt-8">

        {data.map((product) => (
          <div
            key={product.id}
            className="flex flex-col border border-gray-300 shadow-sm rounded-md p-1.5"
          >

            <div className="w-full bg-slate-50">
              <img
                src={product.pic || "https://via.placeholder.com/300"}
                alt={product.name}
                className="w-full aspect-square object-cover"
              />
            </div>

            <div className="py-4 px-2">

              <h6 className="text-sm font-semibold text-slate-900 line-clamp-2">
                {product.name}
              </h6>

              <p className="text-xs text-slate-600 mt-1">
                {product.category}
              </p>

              <div className="flex flex-wrap gap-1 mt-2">
                {product.tags?.map((tag, index) => (
                  <span
                    key={index}
                    className="text-xs px-2 py-0.5 bg-slate-100 rounded"
                  >
                    {tag}
                  </span>
                ))}
              </div>

              <p className="mt-4 text-slate-900 font-semibold">
                ${product.price}
              </p>

            </div>

            <div className="px-2 pb-3">
              <button className="w-full py-2 bg-purple-700 text-white rounded hover:bg-purple-800">
                Add to Bag
              </button>
            </div>

          </div>
        ))}

      </div>
    </div>
  )
}

export default ProductCard

Description

Returns an array of product objects
Each product contains detailed information such as name, category, price, and availability
The response may contain up to 50 product records
Products are returned as a JSON array

Query Parameters (Optional)

Response Format

The response is an array of objects. Each object represents a product with the following fields:

Field	Type	Description
id	number	Unique identifier for the product
name	string	Name of the product
description	string	Short description of the product
category	string	Product category
tags	array	Keywords associated with the product
price	number	Product price
quantity	number	Available quantity
pic	string	Image URL for the product

Important:

The response order is not guaranteed and product data may change or reset at any time.
This endpoint is intended strictly for demo and learning purposes.

Product Api Post Api