LMS/readme.md

Project Specification: Personal PDF Learning Management System (LMS)

1. Project Overview

A web application that allows users to securely log in, upload PDF files to a personal gallery, and interact with those PDFs in a dedicated "Workbook" interface. The core feature is the ability to draw, highlight, and add text directly onto the PDF pages from any device (Desktop & Mobile), saving these annotations for future review.

2. Tech Stack Definition

Please use the following technologies for this project:

• Frontend: React.js (or Next.js) + Tailwind CSS.
• PDF Rendering: PDF.js (Mozilla) to render PDF pages to canvas/DOM.
• Annotation Layer: Fabric.js (overlaying the PDF to handle drawing, shapes, and text).
• Backend: FastAPI (Python) OR Express (Node.js) - Copilot: please ask me which one to start with.
• Database: PostgreSQL (using Prisma or SQLAlchemy for ORM).
• Authentication: JWT (JSON Web Tokens) with HttpOnly cookies.
• Storage: Local file system (Docker volume) for storing uploaded PDFs.

3. Core Features & Requirements

3.1. Authentication (JWT)

• User Registration and Login.
• Protect all API routes.
• Each user can only see and interact with their own uploaded PDFs.

3.2. PDF Gallery (Dashboard)

• Upload: Multi-file drag-and-drop upload.
• Display: Responsive CSS Grid displaying uploaded PDFs as cards. Include the document title and upload date.
• Action: Clicking a card opens the PDF in the "Workbook" view.

3.3. Interactive Workbook (The Core Viewer)

• Responsive UI: Must work seamlessly on mobile and desktop.
• PDF Viewer: Render the selected PDF file. Support pagination (Next/Prev page).
• Annotation Tools (Fabric.js):
  • Pen tool (freehand drawing/circling).
  • Highlighter tool (semi-transparent freehand or straight line).
  • Text tool (click to type text).
• Mobile Touch UX (Crucial): Implement a toggle switch between two modes:
  1. Pan Mode: Touch and swipe will scroll/zoom the page. Canvas drawing is disabled.
  2. Draw/Edit Mode: Scrolling is locked. Touch events are passed to Fabric.js for drawing/annotating.
• Save Mechanism: A "Save" button that serializes the current Fabric.js canvas state into JSON and POSTs it to the backend.
• Load Mechanism: When opening a PDF, fetch the saved JSON annotation data and load it onto the Fabric.js canvas over the PDF.

4. Database Schema (Draft)

• users: id, username, password_hash, created_at
• pdfs: id, user_id (FK), title, file_path, created_at
• annotations: id, pdf_id (FK), user_id (FK), page_number, canvas_data (JSON), updated_at

5. Deployment strategy

• Provide a docker-compose.yml to spin up the Frontend, Backend, and PostgreSQL database together.

6. Instructions for Copilot

Let's build this step-by-step to avoid context limits.

1. First, analyze this spec and confirm you understand.
2. Provide the database schema models (SQLAlchemy or Prisma).
3. Wait for my confirmation before writing the Backend API routes.