Frontend API Services

Relevant source files

The following files were used as context for generating this wiki page:

• frontend/front/src/services/api.js
• frontend/front/src/Article/article.jsx
• frontend/front/src/chatbot/chatbot.jsx
• frontend/front/src/Products/Productspage.jsx
• frontend/front/src/signup/signup.jsx
• BACKEND/src/app.js

The Frontend API Services facilitate communication between the React-based client and the Express backend. This system handles authentication, user profile management, article retrieval, and AI-driven chatbot interactions. By centralizing request logic, the application maintains a consistent data flow and security posture through the use of interceptors and standardized endpoint configurations.

Architecture and Core Configuration

The frontend utilizes Axios as the primary HTTP client. A central configuration file establishes the base connection parameters and security headers for all outbound requests to the backend server located at http://localhost:8000/api/v1.

API Client Setup

The system defines a shared Axios instance with a baseURL and default headers. To ensure authenticated access, a request interceptor automatically attaches a Bearer token from localStorage to the Authorization header if it exists.

const API_BASE_URL = "http://localhost:8000/api/v1";

const api = axios.create({
  baseURL: API_BASE_URL,
  headers: {
    "Content-Type": "application/json",
  },
});

api.interceptors.request.use((config) => {
  const token = localStorage.getItem("token");
  if (token) {
    config.headers.Authorization = `Bearer ${token}`;
  }
  return config;
});

Sources: frontend/front/src/services/api.js:3-21

Communication Flow

The following diagram illustrates how the frontend components interact with the centralized API service and the backend.

The diagram shows the modular approach where components like signup.jsx or article.jsx call the API service layer, which then processes the request through the Axios interceptor before reaching the backend.
Sources: frontend/front/src/services/api.js:13-21, BACKEND/src/app.js:30-34

Authentication and Profile Management

Authentication is managed through dedicated endpoints for registration, login, and session termination. The frontend provides a wrapper for these operations to simplify component-level logic.

Auth Endpoint Mapping

Function	Method	Endpoint	Description
login	POST	/users/login	Authenticates user with email/password.
signup	POST	/users/register	Creates a new user account.
logout	POST	/users/logout	Ends the current user session.
getProfile	GET	/users/profile	Retrieves current user details.
updateProfile	PUT	/users/profile	Updates account information.

Sources: frontend/front/src/services/api.js:24-67

Implementation Example: Signup

The SignupPage component leverages the signup service function to send user data to the backend. It manages local state for loading and error handling during the request lifecycle.
Sources: frontend/front/src/signup/signup.jsx:16-30

Content and Resource Services

Beyond authentication, the frontend interacts with specialized modules for articles, product showcases, and AI services.

Article Retrieval

The ArticlesPage uses a query-based approach to fetch AI-summarized articles. It interacts with the /api/v1/articles endpoint, passing search terms as parameters.

Product Showcase

The ProductsPage retrieves "Products of the Month" from the backend, which aggregates data from the Product Hunt API.

• Endpoint: /api/v1/products
• Method: GET
• Data Structure: Returns an array of objects containing id, name, description, votes, image, and website.
  Sources: frontend/front/src/Products/Productspage.jsx:110-115, BACKEND/src/routes/producthunt.routes.js:58-61

AI Chatbot Interface

The ChatbotPage handles real-time interaction with the Bridge AI assistant. Unlike other services, it currently uses the native fetch API directly within the component to communicate with the /api/v1/chatbot/query endpoint.

Request Payload:

{
  "userQuery": "Find marketing experts"
}

Sources: frontend/front/src/chatbot/chatbot.jsx:221-226

Response Structure:
The response includes the AI-generated content and extracted professional profiles.

Field	Type	Description
data.content	String	The main textual response from the AI.
data.profiles	Array	List of objects containing name, linkedin, and twitter links.

Sources: frontend/front/src/chatbot/chatbot.jsx:228-233, BACKEND/src/controllers/chatbot.controller.js:122-132

Summary

Frontend API Services in the EICHackathon project are structured around a centralized Axios configuration that handles authentication persistence via JWT. The architecture separates core identity management from feature-specific resource retrieval (Articles, Products, Chatbot), allowing the UI to remain reactive while offloading complex processing (like AI summarization) to the backend API.