Article Management

Relevant source files

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

• BACKEND/src/routes/articles.routes.js
• frontend/front/src/Article/article.jsx
• frontend/front/src/Article/article.css
• BACKEND/src/app.js
• frontend/front/src/App.jsx
• frontend/front/src/chatbot/chatbot.jsx

Introduction

Article Management is a core module within the Bridge AI platform designed to provide users with curated, AI-summarized news and professional content. The system allows users to search for specific topics related to growth and entrepreneurship, retrieving real-time data from external news aggregators and processing it through large language models to provide concise summaries.

This module acts as a knowledge-sharing bridge, integrating backend API routes that interface with NewsAPI and OpenAI with a React-based frontend. It is accessible via the main application navigation and is specifically linked within the chatbot interface to assist users in their professional development journey.
Sources: frontend/front/src/Article/article.jsx, BACKEND/src/routes/articles.routes.js, frontend/front/src/chatbot/chatbot.jsx:195-202

System Architecture and Data Flow

The Article Management system follows a traditional Client-Server architecture. The frontend React component handles user input and displays results, while the backend Express router manages external API integrations and data transformation.

Backend Processing Logic

The backend utilizes the articles.routes.js file to define the processing pipeline. When a request is received, the system performs the following steps:

1. Topic Identification: Receives a query from the user or defaults to "entrepreneurship".
2. External Fetching: Uses axios to query the newsapi.org service for the latest relevant articles.
3. AI Summarization: The top 5 articles are processed through a custom getSummary function which utilizes OpenAI's GPT-4 model to generate a 100-token summary of the article content.
   Sources: BACKEND/src/routes/articles.routes.js:15-68

The following diagram illustrates the data flow from the user request to the final AI-summarized response:

API Implementation

The system is exposed via a single GET endpoint defined in the backend application setup.

Endpoint Specification

Method	Endpoint	Description	Query Parameters
GET	/api/v1/articles	Fetches and summarizes news articles based on a topic.	query (optional): The search term (Default: "entrepreneurship").

Sources: BACKEND/src/app.js:34, BACKEND/src/routes/articles.routes.js:38-40

Summarization Logic

The backend uses a specific utility function to interact with the OpenAI API. It provides a system prompt to ensure the article content is condensed effectively.

const getSummary = async (text) => {
    const response = await openai.chat.completions.create({
        model: "gpt-4",
        messages: [{ role: "system", content: `Summarize this article: ${text}` }],
        max_tokens: 100,
    });
    return response.choices?.[0]?.message?.content || "Summary not available.";
};

Sources: BACKEND/src/routes/articles.routes.js:15-31

Frontend Components

The frontend is implemented as a functional React component titled ArticlesPage. It manages state for the article list, search queries, and loading statuses.

Key Component Features

• Auto-fetch: Fetches default articles on mount using the useEffect hook.
• Search Functionality: A controlled input allows users to update the query state and trigger new fetches.
• State Management: Tracks articles (array), loading (boolean), and error (string/null) to update the UI dynamically.
  Sources: frontend/front/src/Article/article.jsx:65-115

User Interface Structure

The component renders a search container and a list of article items. Each item displays:

• The article title (h3.article-title).
• An external link to the full article (a.article-link).
• The AI-generated summary (p.article-summary).
  Sources: frontend/front/src/Article/article.jsx:105-112

Component Styles

The interface utilizes a "Glassmorphism" design language consistent with the rest of the Bridge AI platform, featuring semi-transparent backgrounds and high-contrast text.

CSS Class	Target Element	Styling Key Features
.articles-container	Main Wrapper	background: rgba(255, 255, 255, 0.1), 10px border-radius.
.article-item	Article Card	background: rgba(0, 0, 0, 0.08), scale(1.02) on hover.
.article-link	Full Article Link	Color: #fede0c, font-weight: 700.

Sources: frontend/front/src/Article/article.css:1-85

Integration with Global Routing

The Article Management module is integrated into the main application via App.jsx and is linked from the Chatbot interface to allow users to transition from AI conversation to deep-dive reading.

Summary

Article Management provides an automated pipeline for professional content discovery. By combining NewsAPI for data retrieval and OpenAI for content distillation, it ensures users receive high-value information with minimal reading overhead. The module is fully responsive and integrated into the broader Bridge AI navigation flow.
Sources: BACKEND/src/routes/articles.routes.js, frontend/front/src/Article/article.jsx