Learnade

Inspiration

Course material is often useful but hard to enter: long readings, dense notes, changing attention, and different reading needs can turn one fixed format into another barrier.

Learnade keeps one source of truth and gives learners several honest ways into it. They can read, listen, focus, practice, or test themselves without losing the connection to their original course material.

What it does

Learnade turns PDFs, documents, slides, notes, and lecture transcripts into a browser-first study workspace. A learner can build a multi-source course, then use:

• an accessible reader with adjustable type, spacing, contrast, OpenDyslexic, and line focus
• a fixed-focus RSVP speed reader
• narrated review with synchronized captions and an optional visual anchor
• focus sessions that break work into manageable steps
• source-grounded study guides, flashcards, quizzes, diagnostics, and mock exams
• a course dashboard and personalized plan based on concept mastery and spaced review

The adaptive loop is the core of the product. Diagnostic answers, quiz and exam results, and flashcard outcomes update mastery, return weak concepts for review, and change the recommended next activity.

A fresh visitor can open complete Anatomy & Physiology or Computer Science demos immediately. Learnade does not invent learner history or fake progress. Courses and progress stay in the browser, with no account or API key required.

How we built it

Learnade is built with React, TypeScript, Vite, vinext, and OpenAI Sites. Course content and progress are stored locally with IndexedDB and local storage. PDF.js, Mammoth, and JSZip extract uploaded source material.

Study material can be created three ways:

• a deterministic local generator that works without a download or network request
• an optional small Qwen model running locally in supported browsers through Transformers.js and WebGPU
• an optional protected, rate-limited Learnade AI route powered by GPT-5.6 Terra

Learners never provide or see a server key. The product stays useful even without paid inference.

How we used GPT-5.6 and Codex

GPT-5.6 in ChatGPT helped shape the product architecture, implement the learning modes and local course engine, debug interaction problems, and develop the protected Terra generation path.

We then used Codex in a focused implementation and release pass. Codex recovered the deployed source state, rebuilt the guided tour across the core learning modes, made the first-run demo path honest, and added responsive and keyboard behavior for desktop and narrow mobile screens.

Hands-on browser QA found two genuine accessibility failures: focus could remain behind the tour overlay, and the adaptive-learning tooltip could cover the control it was explaining on shorter viewports. Codex fixed both, added regression coverage, ran the production build and all 23 automated tests, created social-preview metadata, and published the release.

Challenges and what we learned

The main challenge was keeping generated study material grounded in uploaded sources while offering several learning modes. Another was making a local-first experience genuinely useful: courses, source material, audio, and progress should work without accounts.

We also learned that accessible design needs real interaction testing. A modal is not accessible if focus escapes behind it, and a tooltip is not helpful if it obscures the control it describes. We treated those as functional failures, not cosmetic ones.

What we're proud of

Learnade is a complete, runnable study product, not a single-generation demo. The same course can support accessible reading, focused review, flashcards, quizzes, diagnostics, and mock exams. Each activity feeds back into mastery and the learner's recommended next step, while staying connected to the selected sources.

The goal is simple: make rigorous study material easier to enter, without flattening every learner into the same study workflow.

Built With

• cloudflare
• codex
• gpt-5.6
• indexeddb
• jszip
• mammoth
• mediarecorder
• openai-sites
• opendyslexic
• pdf.js
• qwen2.5
• react
• transformers.js
• typescript
• webgpu