Skip to main content

​
Introduction

Q-Sopa uses a REST API backend hosted on Railway to serve menu categories and products. The API integration is implemented through a centralized service module that provides clean, reusable functions for all data fetching operations.

​
API Architecture

The API follows a simple REST architecture with JSON responses. All API interactions are handled through the src/services/api.js module, which exports async functions that wrap native fetch calls.

​
Base URL

All API requests are made to the production backend: 
const BASE_URL = "https://apiqsp-production.up.railway.app";
The base URL is defined as a constant in the API service module and is automatically prepended to all endpoint paths.

​
Service Architecture

The API service (src/services/api.js) provides three core functions:

getCategorias

Fetch all available menu categories

getComidas

Fetch all products across categories

getProductsByCategory

Fetch products filtered by category

​
Authentication

The Q-Sopa API is currently public and does not require authentication. All endpoints are accessible without API keys or tokens.
For production applications handling sensitive data, consider implementing authentication mechanisms such as API keys or JWT tokens.

​
Request Format

All requests are standard HTTP GET requests that return JSON responses: 
const res = await fetch(`${BASE_URL}/endpoint`);
const data = await res.json();

​
Response Format

All successful API responses return JSON data:
​
categories
array
Array of category objects from /categories endpoint
​
id
number
Unique category identifier
​
name
string
Category display name
​
icon
string
Material Symbols icon name
​
products
array
Array of product objects from /products endpoints
​
id
number
Unique product identifier
​
name
string
Product name
​
price
number
Product price
​
imageUrl
string
Product image URL
​
badge
string | null
Optional badge label (e.g., “Popular”, “New”)

​
Error Handling

The API service implements consistent error handling across all functions:
src/services/api.js
const res = await fetch(`${BASE_URL}/categories`);
if (!res.ok) throw new Error("Error al cargar categorías");
return res.json();

​
Error Patterns

Each API function:
  1. Makes a fetch request
  2. Checks the res.ok status
  3. Throws a descriptive error if the request failed
  4. Returns parsed JSON on success
Errors are thrown with Spanish messages matching the application’s locale. Components catch these errors and display them to users.

​
Error Response Handling

Components using the API should implement try-catch patterns or promise .catch() handlers: 
getCategorias()
  .then((data) => setCategories(data))
  .catch((err) => setError(err.message))
  .finally(() => setLoading(false));

​
Common Error Scenarios

Network Errors

Status: !res.okMessage: “Error al cargar [resource]”Handling: Display error message to user, provide retry option

Invalid Category ID

Occurs: When requesting products for non-existent categoryHandling: Check category existence before fetching products

​
Performance Considerations

​
Caching Strategy

The current implementation fetches data on demand without caching. Consider implementing:
  • React Query or SWR for automatic caching and revalidation
  • Local Storage for offline-first capabilities
  • Memoization for frequently accessed data

​
Loading States

All API calls should implement loading states to provide user feedback: 
const [loading, setLoading] = useState(true);
const [data, setData] = useState([]);

useEffect(() => {
  getCategorias()
    .then(setData)
    .finally(() => setLoading(false));
}, []);

​
Integration Best Practices

Centralized Service

Keep all API calls in src/services/api.js for maintainability

Error Boundaries

Implement React error boundaries to catch API errors gracefully

Loading States

Always show loading indicators during API calls

Error Messages

Display user-friendly error messages in Spanish

​
Next Steps

Explore API Endpoints

Learn about each API function’s signature, parameters, and responses

Usage Examples

See real implementation examples from the Q-Sopa codebase

Build docs developers (and LLMs) love

Get started for freeTalk to us