How to Document Pages¶

Creating a New Page Document¶

Create a file [new_page_name].md in bidscript-dev-docs/docs/frontend/pages/(...any remaining appropriate sub-directories)/.
Use this template:

# Page Name(pages/page_name.tsx)

## Overview
One-line description of the page's purpose and functionality. Use file path to reference the file.

## Features
List of key capabilities and interactions.

## URL Parameters
Table of query/path parameters accepted.

## Implementation
### State Management
State variables and their purpose. Add comments to explain what the state variables do.

### Methods
Key functions and their parameters. Add comments to explain what the function does.

### HTML Structure
Core DOM structure and styling approach. Add comments to explain what the structure does.

...And any other special features or behaviors.

## Props
Table of props and their interface definition and usage.

## Components/API Routes Used
Exhaustive list of components and API routes used.

## Routes to Page
Exhaustive list of ways to navigate here.

## Dependencies
Required imports and packages.

## Notes
Important considerations.

3. Update the mkdocs.yml file's nav section to include your new page documentation:

nav:
  - Frontend:
      - Pages:
          - YourPage: frontend/pages/your-page.md

Example (from codebase)¶

Documents Page (pages/documents/index.tsx)¶

Overview¶

Document management page for viewing, organizing and managing user's documents and projects.

Features¶

Project management
Document organization
Drag-and-drop interface
Search functionality
Document previews

URL Parameters¶

None - authenticated route only

Implementation¶

State Management¶

const [selectedProject, setSelectedProject] = useState<string | null>(null);
const [projects, setProjects] = useState<Project[]>([]);
const [unassignedDocs, setUnassignedDocs] = useState<UnassignedDocument[]>([]);
const [isDragging, setIsDragging] = useState(false);

Methods¶

const handleViewFileClick = (documentID: string) => {
  sessionStorage.setItem("stateID", documentID);
  router.push("/editor");
};

const fetchProjects = async () => {
  const response = await fetch("/app/api/documents/getUserProject", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ userID })
  });
  const data = await response.json();
  setProjects(data.response);
};

Other Features¶

Drag and drop document organization
Project-based document grouping
Real-time updates

HTML Structure¶

<div className="home h-full">
  <div className="grid grid-cols-1 md:grid-cols-2 gap-10">
    <ProjectList projects={projects} />
    <DocumentTable documents={documents} />
  </div>
</div>

Props¶

No props - page component

Components/API Routes Used¶

Components¶

DocumentTableComponent
SearchBarComponent
ModernChatbotComponent

API Routes¶

/api/documents/getUserProject
/api/documents/getUserDocuments
/api/documents/updateDocumentInfo

Routes to Page¶

Direct: /documents
From: Home page "Open Documentation" button
From: Navigation sidebar

Dependencies¶

import { useSession } from "next-auth/react";
import { useRouter } from "next/navigation";
import { motion, AnimatePresence } from "framer-motion";

Notes¶

Requires authentication
Handles large document lists
Supports document search
Real-time updates