ProductHunt Integration

Relevant source files

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

• BACKEND/src/routes/producthunt.routes.js
• frontend/front/src/Products/Productspage.jsx
• frontend/front/src/Products/Products.css
• BACKEND/src/app.js
• frontend/front/src/App.jsx
• frontend/front/src/chatbot/chatbot.jsx

The ProductHunt Integration within the Bridge AI platform serves as a curated showcase for trending technology products, specifically the "Products of the Month." This feature bridges the gap between entrepreneurs and emerging tools by fetching real-time data from the Product Hunt GraphQL API and presenting it through a specialized interface.

The system is architected as a full-stack implementation, involving a backend proxy to handle API authentication and data transformation, and a frontend component that provides a responsive, horizontally-scrolling gallery of products. This integration allows users to stay informed about industry trends without leaving the Bridge AI ecosystem.

Backend Architecture

The backend implementation acts as an intermediary between the Bridge AI client and the Product Hunt GraphQL API. This ensures that sensitive API keys are never exposed to the client side.

API Routing and Configuration

The backend application registers the ProductHunt routes under the /api/v1/products namespace. It utilizes dotenv for environment variable management and axios for executing GraphQL queries.

Sources: BACKEND/src/app.js:33, BACKEND/src/routes/producthunt.routes.js:1-9

Data Retrieval Logic

The core logic resides in fetchProductsOfMonth, an asynchronous function that executes a POST request to the Product Hunt GraphQL endpoint. It retrieves the top 10 posts ordered by votes posted after a specific date (March 1, 2024).

const response = await axios.post(
    "https://api.producthunt.com/v2/api/graphql",
    {
        query: `
        {
          posts(order: VOTES, postedAfter: "2024-03-01T00:00:00Z", first: 10) {
            edges {
              node {
                id
                name
                tagline
                votesCount
                thumbnail { url }
                website
              }
            }
          }
        }`
    },
    {
        headers: {
            Authorization: `Bearer ${PRODUCT_HUNT_API_KEY}`,
            "Content-Type": "application/json"
        }
    }
);

Sources: BACKEND/src/routes/producthunt.routes.js:12-42

Data Transformation

Raw data from the GraphQL API is mapped into a simplified object structure for frontend consumption. This transformation handles missing data by providing fallback values (e.g., placeholder images).

Field	Source Path (GraphQL)	Transformation/Fallback
id	edge.node.id	Direct mapping
name	edge.node.name	Direct mapping
description	edge.node.tagline	Renamed from tagline
votes	edge.node.votesCount	Renamed for simplicity
image	edge.node.thumbnail.url	Fallback: https://via.placeholder.com/100
website	edge.node.website	Direct mapping

Sources: BACKEND/src/routes/producthunt.routes.js:44-51

Frontend Implementation

The frontend provides the user interface for viewing these curated products through a dedicated page and navigation links within the main application layout.

Component Lifecycle

The ProductsPage component utilizes the useEffect hook to fetch data from the backend API immediately upon mounting. The state is managed via the useState hook, transitioning from an empty array (showing a "Loading products..." message) to a populated list of product cards.

Navigation and Routing

The product showcase is accessible via the /products route, defined in the main App.jsx file. Furthermore, the ChatbotPage includes a sidebar link ("Showcase") that redirects users to this integration.

Sources: frontend/front/src/App.jsx:22, frontend/front/src/chatbot/chatbot.jsx:318

UI Design and Layout

The UI is styled using Products.css, implementing a horizontal scrolling layout for the product cards.

• Flexbox Layout: The .products-list uses display: flex with overflow-x: auto to allow horizontal navigation.
• Card Design: Each card has a fixed width (250px), white background, and hover effects (scale(1.05)).
• Responsiveness: Media queries ensure that on screens smaller than 1024px, the horizontal scroll remains active without wrapping.

Sources: frontend/front/src/Products/Products.css:17-50, frontend/front/src/Products/Products.css:96-101

Sequence Diagram: Data Flow

The following diagram illustrates the interaction between the user, the frontend application, the backend server, and the external Product Hunt API.

Conclusion

The ProductHunt Integration is a robust feature that leverages a backend-to-backend communication pattern to provide secure and efficient access to external trending data. By abstracting the GraphQL complexity into a simple RESTful endpoint, the system ensures that the frontend remains focused on presentation and user experience, while the backend manages data integrity and authentication.

Sources: BACKEND/src/routes/producthunt.routes.js:1-58, frontend/front/src/Products/Productspage.jsx:134-182