Introduction
Simple API store can be used in shopping projects that needs products in JSON format. This API can provide an array of 30 products or an object with a single product. You can use examples below to check how it works.
Sample code
import React, { useEffect, useState } from 'react'
import axios from 'axios'
function App(){
const [loading, setLoading] = useState(false)
const [data, setData] = useState(null)
useEffect(() => {
setLoading(true)
axios({
method: 'GET',
baseURL: 'http://simpleapistore.vercel.app',
url: '/api/products',
})
.then(({ data }) => {
setData(data.products)
})
.catch(err => console.error(err))
.finally(() => setLoading(false))
}, [])
return (
<section>
<h1>Simple store API response:</h1>
{loading && "Loading..."}
{!!data && data.length > 0 ? data.map((product) => {
return(
<article key={product.id}>
<p>id: {product.id}</p>
<h2>title: {product.title}</h2>
<p>description: {product.description}</p>
<p>category: {product.category}</p>
<p>price: {product.price}</p>
<img src={product.image} />
</article>
)
}):(<p>API did not provided any product, try again.</p>)
}
</section>
)
}
export default AppBase URL
http://simpleapistore.vercel.appProducts
We currently have 30 permanent products in our database ("id":"1", "id":"2" ... "id":"30").
Get all products
GET
/api/products
Get a single product
GET
/api/products/1