Frontend UI Architecture

Relevant source files

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

• frontend/front/src/App.jsx
• frontend/front/src/main.jsx
• frontend/front/src/index.css
• frontend/front/package.json
• frontend/front/src/chatbot/chatbot.jsx
• frontend/front/src/Article/article.jsx
• frontend/front/src/getstarted/getstarted.jsx
• frontend/front/src/Products/Productspage.jsx
• frontend/front/src/loginpage.jsx
• frontend/front/src/signup/signup.jsx

The Bridge AI frontend is a modern web application built using React 19 and Vite, designed to provide an interactive interface for an AI-powered networking and entrepreneurship platform. The architecture follows a component-based structure, utilizing a centralized routing system to manage diverse functional areas such as AI chatbots, article discovery, and product showcases.

The UI leverages a combination of standard CSS, Tailwind CSS, and Framer Motion for animations. It facilitates communication with a backend API via Axios and the native Fetch API to handle user authentication, AI query processing, and content retrieval.

Sources: frontend/front/package.json:1-35, frontend/front/src/App.jsx:1-37

Core Framework and Routing

The application entry point is main.jsx, which renders the App component within a StrictMode wrapper. Routing is managed by react-router-dom (version 7.6.3), which maps specific URL paths to functional page components.

Route Mapping

The following table summarizes the primary routes and their associated components:

Path	Component	Description
/	LoginPage	User authentication entry point
/dashboard	Dashboard	Landing/Get Started page with feature carousel
/chatbotpage	ChatbotPage	Main AI interaction interface
/articles	ArticlesPage	News and article search/summary interface
/products	ProductsPage	Showcase for monthly curated products
/signuppage	SignupPage	Account creation interface
/help	Help	FAQ and support information

Sources: frontend/front/src/main.jsx:1-15, frontend/front/src/App.jsx:11-35, frontend/front/package.json:18

Navigation Flow

The application flow typically starts at the login page, leading to a dashboard that directs users to the AI chatbot or other informational pages.

Component Architecture

The frontend is divided into specialized modules, each handling its own state and side effects.

AI Chatbot Interface

The ChatbotPage is the most complex component, managing a real-time conversation state. It features a message history, a typing indicator, and the ability to stop AI generation. It communicates with the backend via a POST request to /api/v1/chatbot/query.

• State Management: Uses useState for messages, profiles, input text, and UI toggles (sidebarOpen, profileOpen).
• Typing Effect: Implements a typewriter-style animation for bot responses using useEffect and setInterval.
• Profile Extraction: Displays AI-extracted professional profiles with LinkedIn and Twitter links.

Sources: frontend/front/src/chatbot/chatbot.jsx:136-160, frontend/front/src/chatbot/chatbot.jsx:181-198

Content Discovery Modules

The application includes specialized pages for fetching and displaying external data:

1. ArticlesPage: Uses Axios to query a backend endpoint (/api/v1/articles) that returns AI-summarized news articles. It includes a search bar to filter topics.
2. ProductsPage: Fetches a list of "Products of the Month" from the backend and displays them in a horizontally scrollable list of cards.

Sources: frontend/front/src/Article/article.jsx:75-92, frontend/front/src/Products/Productspage.jsx:110-120

Data Flow and API Integration

The frontend interacts with a backend server (defaulting to http://localhost:8000). Authentication data, such as tokens and user objects, are persisted in localStorage.

Sequence: AI Query Process

This diagram illustrates the flow of a user query from the UI to the AI backend and back to the display.

Styling and UI Design

The project uses a "Glassmorphism" design aesthetic, characterized by translucent backgrounds and blur effects.

• Global Styles: Defined in index.css, utilizing system fonts and standardizing button/link behaviors.
• Theming: Implements linear-gradient backgrounds (e.g., #667eea to #764ba2) and backdrop-filter: blur() for cards.
• Responsive Design: Includes media queries for horizontal scrolling on smaller screens in the ProductsPage and standard mobile responsiveness for login/signup containers.

Sources: frontend/front/src/index.css:1-50, frontend/front/src/loginpage.css:1-20, frontend/front/src/Products/Products.css:85-91

Conclusion

The Bridge AI Frontend UI Architecture is a modular React application that prioritizes user interaction with AI services. By separating concerns into distinct pages (Chatbot, Articles, Products) and utilizing a central router, the system remains extensible. The integration of real-time state updates for AI responses and persistent storage for authentication ensures a seamless user experience.

Sources: frontend/front/src/App.jsx:1-37, frontend/front/src/chatbot/chatbot.jsx:134-250