Back to work

StudyPad.

  • Web application
  • AI integration
  • Learning platform

From lecture PDFs to an interactive study workspace.

A full-stack learning platform combining PDF reading, a visual canvas, AI-generated study tools and quiz practice.

PDF reading alongside the visual study canvas.

Studying from PDFs often means switching between a reader, notes, flashcards and quizzes. StudyPad brings these activities into one workspace, keeping study material and practice connected.

  1. Read
  2. Organize
  3. Practice
  4. Review

01 / The study workspace

Read, organize and ask questions in one workspace.

The PDF reader sits alongside an infinite canvas for editable flashcards, notes, drawings and image clips. Supported study items retain PDF and page references, making it possible to return to the material.

The assistant is available alongside the canvas, so students can ask questions while working with their material. Gemini-backed API routes generate flashcards and quizzes and support AI chat; supported responses can be saved as canvas notes.

The AI assistant alongside the study canvas.

02 / Practice, revision & classroom tools

Practice, then return to what needs work.

Students can save quizzes, track attempts and revisit incorrect answers using the saved answer key. The mistake-review workflow supports continued practice across desktop and mobile.

A saved multiple-choice quiz in progress.

Mobile web revision

A dedicated mobile web interface keeps flashcards and revision controls accessible in the browser.

Flashcard revision in the mobile web interface.

Classroom tools

Instructor tools organize classes and study materials, with live quizzes and multiplayer study sessions extending the platform beyond individual revision.

Instructor class and material management. Live quizzes and multiplayer sessions are not pictured.

03 / Engineering & technology

The engineering behind the workspace.

01

Custom canvas shapes

Flashcards and notes are custom tldraw shapes, so they can be moved, edited and saved alongside other canvas content.

02

Persistence and recovery

Canvas saves check expected revisions to detect conflicting writes. Local backups and recovery controls help preserve work when cloud saves fail.

03

Server-side access checks

Authenticated API commands check access to personal courses, classroom resources, live sessions and administrative operations.

How the pieces connect

The React + TypeScript + Vite client uses Firebase Authentication, Firestore and Storage directly where supported. Authenticated Vercel API routes handle application commands and Gemini integrations, with provider credentials kept on the server.

Technology by purpose

Interface
ReactTypeScriptVitetldrawPDF.js
Backend & data
Vercel serverless functionsFirebase AuthenticationFirestoreFirebase Storage
AI
Google Gemini
Verification
VitestReact Testing LibraryFirebase emulators

Screens show example study content. Fixture-based checks cover application behavior, not live AI answer quality. Public registration and production readiness are not established by this case study.

Have a project in mind?

Let's talk

Next project

YummyBites

From a homemade favourite to a managed order.

View project
Weight selection and calculated product price