Skip to content

Frontend Overview

Architecture

The BidScript frontend is built with modern web technologies and follows a component-based architecture using React and Next.js. It handles the user-side experience of the platform's services.

Frontend Architecture Overview

graph TB
   User[User] --> Browser[Browser]
      Browser --> NextJS[Next.js App]

      NextJS --> Pages[Pages]
      NextJS --> Components[Components]
      NextJS --> Hooks[Custom Hooks]
      NextJS --> Context[React Context]

      Pages --> API[API Routes]
      Components --> UI[UI Components]
      Components --> Base[Base Components]
      Components --> Editor[Editor Components]

      Context --> Auth[Auth Context]
      Context --> Workflow[Workflow Context]
      Context --> ResourceHub[ResourceHub Context]

      API --> Backend[NestJS Backend]
      Hooks --> Database[PostgreSQL]

      NextJS --> Styles[Tailwind CSS]
      NextJS --> Assets[Static Assets]

      subgraph "State Management"
         Auth
         Workflow
         ResourceHub
      end

      subgraph "UI Layer"
         UI
         Base
         Editor
      end

      style NextJS fill:#1976d2
      style Pages fill:#42a5f5
      style Components fill:#64b5f6
      style Hooks fill:#90caf9
      style Context fill:#bbdefb
      style API fill:#e3f2fd
      style UI fill:#e8eaf6
      style Base fill:#c5cae9
      style Editor fill:#9fa8da
      style Auth fill:#7986cb
      style Workflow fill:#5c6bc0
      style ResourceHub fill:#3f51b5,color:#ffffff
      style Backend fill:#303f9f,color:#ffffff
      style Database fill:#283593,color:#ffffff
      style Styles fill:#1a237e,color:#ffffff
      style Assets fill:#0d47a1,color:#ffffff

Component Hierarchy

graph TD
   App[App Component] --> Layout[Layout]
      Layout --> Header[Header]
      Layout --> Sidebar[Sidebar]
      Layout --> Main[Main Content]

      Main --> HomePage[Home Page]
      Main --> DocumentsPage[Documents Page]
      Main --> WorkspacePage[Workspace Page]
      Main --> ChatbotPage[Chatbot Page]
      Main --> SettingsPage[Settings Page]

      DocumentsPage --> DocumentTable[Document Table]
      DocumentsPage --> UploadModal[Upload Modal]

      WorkspacePage --> DocumentUpload[Document Upload Step]
      WorkspacePage --> DocumentLabelling[Document Labelling Step]
      WorkspacePage --> QuestionDetail[Question Detail]

      ChatbotPage --> ChatSidebar[Chat Sidebar]
      ChatbotPage --> MessageList[Message List]
      ChatbotPage --> InputForm[Input Form]

      Header --> UserMenu[User Menu]
      Header --> Navigation[Navigation]

      Sidebar --> SidebarElement[Sidebar Element]
      Sidebar --> ProjectSelector[Project Selector]
      subgraph "Reusable Components"
         DocumentTable
         UploadModal
         ChatSidebar
         UserMenu
      end

      subgraph "Page Components"
         HomePage
         DocumentsPage
         WorkspacePage
         ChatbotPage
      end

      style App fill:#1976d2
      style Layout fill:#42a5f5
      style Header fill:#64b5f6
      style Sidebar fill:#90caf9
      style Main fill:#bbdefb
      style HomePage fill:#e3f2fd
      style DocumentsPage fill:#e8eaf6
      style WorkspacePage fill:#c5cae9
      style ChatbotPage fill:#9fa8da
      style SettingsPage fill:#7986cb
      style DocumentTable fill:#5c6bc0
      style UploadModal fill:#3f51b5,color:#ffffff
      style DocumentUpload fill:#303f9f,color:#ffffff
      style DocumentLabelling fill:#283593,color:#ffffff
      style QuestionDetail fill:#1a237e,color:#ffffff
      style ChatSidebar fill:#0d47a1,color:#ffffff
      style MessageList fill:#e8eaf6
      style InputForm fill:#c5cae9
      style UserMenu fill:#9fa8da
      style Navigation fill:#7986cb
      style SidebarElement fill:#5c6bc0
      style ProjectSelector fill:#3f51b5,color:#ffffff

Project Structure

bidscriptfrontend/
├── components/          # Reusable UI components
│   ├── base/           # Core components
│   ├── Editor/         # Rich text editor
│   ├── ui/            # UI component library
│   └── ...            # Other component modules
├── pages/              # Next.js pages and API routes
│   ├── api/           # Backend API endpoints
│   └── ...            # Frontend pages
├── docs/               # Project documentation
│   └── frontend/      # Frontend-specific docs
├── lib/                # Utility functions and services
├── hooks/              # Custom React hooks
├── styles/             # CSS and styling
├── public/             # Static assets
└── prisma/             # Database schema

For the complete project structure, see File Tree.

Key Technologies

  • React 18: Core UI library with concurrent features
  • Next.js 13: React framework with App Router
  • TypeScript: Type-safe development
  • Prisma ORM: Provides auto-generated queries and migrations for SQL DB
  • Tailwind CSS: Utility-first styling
  • Framer Motion: Animations
  • Lexical: Rich text editing

For the full list of dependencies, see Dependencies.

Data Flow Architecture

sequenceDiagram
    participant User
    participant NextJS as Next.js Frontend
    participant Context as React Context
    participant API as API Client
    participant NestJS as NestJS Backend
    participant Redis
    participant MongoDB
    participant PostgreSQL

    User->>NextJS: Interact with UI
    NextJS->>Context: Update state
    Context->>API: Make API request
    API->>NestJS: HTTP request

    alt Cache Hit
        NestJS->>Redis: Check cache
        Redis-->>NestJS: Return cached data
        NestJS-->>API: Return response
    else Cache Miss
        NestJS->>Redis: Check cache
        Redis-->>NestJS: Cache miss
        NestJS->>MongoDB: Query database
        MongoDB-->>NestJS: Return data
        NestJS->>Redis: Update cache
        NestJS-->>API: Return response
    end

    API-->>Context: Update context state
    Context-->>NextJS: Re-render components
    NextJS-->>User: Display updated UI

    Note over NestJS,PostgreSQL: Future: Unified PostgreSQL storage
    NestJS->>PostgreSQL: Drizzle ORM queries
    PostgreSQL-->>NestJS: Return structured data

Authentication Flow

graph LR
   User[User] --> Login[Login Page]
      Login --> NextAuth[NextAuth.js]
      NextAuth --> Provider[OAuth Provider]
      Provider --> Callback[Callback]
      Callback --> Session[Session Creation]
      Session --> Database[PostgreSQL via Drizzle]
      Database --> Protected[Protected Routes]
      Protected --> Dashboard[Dashboard]

      subgraph "Session Management"
         Session
         Database
         JWT[JWT Tokens]
      end

      subgraph "Protected Area"
         Protected
         Dashboard
         Workspace[Workspace]
         Settings[Settings]
      end

      NextAuth --> JWT
      JWT --> Protected

      style NextAuth fill:#1976d2,color:#ffffff
      style Database fill:#42a5f5,color:#ffffff
      style Protected fill:#64b5f6,color:#ffffff

Development Workflow

  1. Setup
npm install
npm run dev
  1. Building
npm run build
npm run start
  1. Testing 
    npm run test
npm run test:watch

Deployment

The frontend is automatically deployed on Vercel through GitHub integration:

All development branches require local deployment:

npm run dev

For environment configuration, see Setup.

Key Pages

BidScript consists of several key pages that are accessible from the sidebar navigation:

  • Home - Dashboard with statistics and quick actions
  • Projects - Document management and upload (accessed via "/documents" route)
  • Bid Library - Search and browse knowledge articles (accessed via "/knowledgebase" route)
  • Bidbot - Dedicated chatbot interface for AI assistance
  • Settings - User and application settings

Additional important pages:

For a complete list of pages, see Pages Index.

Key Components

The application is built with these core components:

For a complete list of components, see Components Index.

Further Documentation