Add Product
The Add Product endpoint allows users to create a new product and add it to the Product API collection.
It is publicly accessible and designed mainly for learning and testing how data is sent to an API.
No authentication is required.
Endpoint
🔐 API Key
https://products-api-qoo3.onrender.com/add-product
Important:
POST requests to this API may take up to 10 seconds to process and return a response.
Please be patient and avoid sending multiple requests simultaneously.
Request Body
The request body must be a JSON object containing the following fields:
| Field | Type | Description |
|---|---|---|
| name | string | Name of the product |
| description | string | Short description of the product |
| category | string | Product category |
| tags | array of strings | Keywords related to the product |
| price | number | Product price |
| quantity | number | Available quantity |
| pic | string | Image URL of the product |
Use Example with React.js
import React, { useState } from 'react'
function Form() {
const [name, setName] = useState("")
const [description, setDescription] = useState("")
const [category, setCategory] = useState("")
const [tags, settags] = useState([])
const [price, setPrice] = useState(null)
const [quantity, setQuantity] = useState(null)
const [pic, setPic] = useState("")
const [error, setError] = useState("")
const productInfo = {
name,
description,
category,
tags,
price: Number(price),
quantity: Number(quantity),
pic
}
const handleSubmit = () => {
fetch("", {
method: "POST",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify(productInfo)
})
.then(res => res.json())
.then(data => console.log(data))
}
return (
<>
<div className="flex justify-center items-center min-h-screen">
<div className="w-full max-w-lg p-8 bg-white rounded-lg shadow-lg">
{error && <p>Error: {error}</p>}
<h2 className="text-2xl font-semibold text-center text-gray-700 mb-6">Add New Product</h2>
<form onSubmit={(e) => {
e.preventDefault()
handleSubmit()
}} method="POST">
<div className="mb-4">
<label htmlFor="name" className="block text-gray-700 font-medium">Product Name</label>
<input type="text" id="name" name="name" value={name} placeholder="Enter product name" className="w-full px-4 py-2 mt-2 bg-gray-50 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400"
onChange={(e) => setName(e.target.value)}
/>
</div>
<div className="mb-4">
<label for="description" className="block text-gray-700 font-medium">Description</label>
<textarea id="description" name="description" value={description} rows="4" placeholder="Enter product description" className="w-full px-4 py-2 mt-2 bg-gray-50 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400"
onChange={(e) => setDescription(e.target.value)}
></textarea>
</div>
<div className='grid grid-cols-1 md:grid-cols-2 gap-4'>
<div className="mb-4">
<label htmlFor="category" className="block text-gray-700 font-medium">Category</label>
<select id="category" name="category" className="w-full px-4 py-2 mt-2 bg-gray-50 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400"
onChange={(e) => setCategory(e.target.value)}
>
<option value="Electronics">Electronics</option>
<option value="Accessories">Accessories</option>
{/* <!-- Add more categories as needed --> */}
</select>
</div>
<div className="mb-4">
<label htmlFor="tags" className="block text-gray-700 font-medium">Tags</label>
<input type="text" id="tags" name="tags" value={tags.join(', ')} placeholder="Enter product tags (comma separated)" className="w-full px-4 py-2 mt-2 bg-gray-50 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400"
onChange={(e) => settags(e.target.value.split(',').map(tag => tag.trim()))}
/>
</div>
</div>
<div className='grid grid-cols-1 md:grid-cols-2 gap-4'>
<div className="mb-4">
<label htmlFor="price" className="block text-gray-700 font-medium">Price</label>
<input type="number" id="price" name="price" value={price} step="0.01" placeholder="Enter product price" className="w-full px-4 py-2 mt-2 bg-gray-50 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400"
onChange={(e) => setPrice(e.target.value)}
/>
</div>
<div className="mb-4">
<label htmlFor="quantity" className="block text-gray-700 font-medium">Quantity</label>
<input type="number" id="quantity" name="quantity" value={quantity} placeholder="Enter product quantity" className="w-full px-4 py-2 mt-2 bg-gray-50 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400"
onChange={(e) => setQuantity(e.target.value)}
/>
</div>
</div>
<div className="mb-4">
<label htmlFor="pic" className="block text-gray-700 font-medium">Product Image URL</label>
<input type="url" id="pic" name="pic" value={pic} placeholder="Enter product image URL" className="w-full px-4 py-2 mt-2 bg-gray-50 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400"
onChange={(e) => setPic(e.target.value)}
/>
</div>
<div className="mb-4">
<button type="submit" className="w-full bg-blue-600 text-white py-2 px-4 rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-400">Add Product</button>
</div>
</form>
</div>
</div>
</>
)
}
export default Form
Description
This endpoint:
- Creates a new product record
- Automatically assigns a unique product ID
- Returns a confirmation message with the new product ID
- Accepts product data in JSON format
It provides a simple way to understand how APIs receive and store data.
Important Notes
Auto Generated ID:
The product ID is created automatically by the API. You do not need to provide it in the request body.
Storage Limit:
A maximum of 100 products can be stored at a time. If the limit is reached, the API will return an error response.
Learning Use Only:
This endpoint is intended for demo and learning purposes only and should not be used in production environments.
Summary
The Add Product endpoint is a simple and practical way to:
- Learn how POST requests work
- Send structured data to an API
- Understand how APIs create new records
It’s perfect for practicing form submissions, backend communication, and real-world API interaction.