Skip to main content

​
Overview

The productService module provides methods to interact with the product endpoints of the Villa Buena E-Commerce API. It handles fetching products, retrieving individual product details, and filtering products by category.

​
Base Configuration

All service methods use the configured Axios instance from api.js: 
import axios from "axios";

export const api = axios.create({
  baseURL: import.meta.env.VITE_API_URL,
});

​
Methods

​
getAll()

Retrieves all products from the API with a limit of 200 items.
​
return
Promise<Array<Product>>
Returns a promise that resolves to an array of product objects

​
API Endpoint

GET /products?limit=200

​
Usage Example

import { productService } from './services/productService';

const products = await productService.getAll();
console.log(products);

​
Response Structure

​
id
number
required
Unique identifier for the product
​
title
string
required
Product name
​
price
number
required
Product price in USD
​
description
string
required
Detailed product description
​
category
string
required
Product category name
​
image
string
required
URL to the product image
​
rating
object
required
Product rating information
​
rating.rate
number
Average rating score
​
rating.count
number
Number of ratings

​
getById()

Retrieves a single product by its unique identifier.
​
id
number
required
The unique identifier of the product to retrieve
​
return
Promise<Product>
Returns a promise that resolves to a single product object

​
API Endpoint

GET /products/{id}

​
Usage Example

import { productService } from './services/productService';

const product = await productService.getById(1);
console.log(product.title);

​
Response Structure

Returns a single product object with the same structure as described in getAll().
If the product ID does not exist, the API will return a 404 error. Make sure to handle this case in your application.

​
getByCategory()

Retrieves all products belonging to a specific category.
​
category
string
required
The category name to filter products by (e.g., “electronics”, “jewelery”, “men’s clothing”, “women’s clothing”)
​
return
Promise<Array<Product>>
Returns a promise that resolves to an array of product objects in the specified category

​
API Endpoint

GET /products/category/{category}

​
Usage Example

import { productService } from './services/productService';

const electronics = await productService.getByCategory('electronics');
console.log(electronics);

​
Response Structure

Returns an array of product objects with the same structure as described in getAll().
Category names are case-sensitive. Use the categoryService.getAll() method to retrieve the list of valid category names.

​
Implementation Details

​
Source Code

Location: src/services/productService.js 
import { api } from "./api";

export const productService = {
  getAll: async () => {
    const { data } = await api.get("/products?limit=200");
    return data;
  },
  getById: async (id) => {
    const { data } = await api.get(`/products/${id}`);
    return data;
  },
  getByCategory: async (category) => {
    const { data } = await api.get(`/products/category/${category}`);
    return data;
  },
};

​
Key Features

  • Async/Await Pattern: All methods use modern async/await syntax for cleaner asynchronous code
  • Data Extraction: Destructures the data property from Axios responses automatically
  • Centralized Configuration: Uses the shared api instance for consistent base URL and configuration
  • Simple Interface: Provides a clean, intuitive API for product operations

​
Error Handling

All methods can throw errors in the following scenarios:
  • Network failures
  • API server errors (5xx)
  • Invalid endpoints (4xx)
  • Timeout errors
It’s recommended to wrap all service calls in try-catch blocks or use .catch() handlers.
  • Category Service - Manage product categories
  • Base API Configuration (src/services/api.js)

Build docs developers (and LLMs) love

Get started for freeTalk to us