Chemistry Study Atlas

Visual-first chemistry, from syllabus objective to mastery

Comment

Inspiration

I started Chemistry Study Atlas because my 14-year-old son needed more than a wall of syllabus text. He needed to see why something happens, practise it, and understand what to review next. I also wanted the experience to remain private and dependable, without an ungrounded chatbot inventing scientific explanations.

What it does

Chemistry Study Atlas turns a complete secondary-school chemistry syllabus into an objective-by-objective visual learning journey.

It maps 12 topics, 49 subtopics, and 252 content statements. At the verified submission commit, 235 objectives have reviewed, purpose-built visual models. The remaining 17 are clearly marked as queued instead of displaying an unreviewed or misleading diagram.

Every available objective follows five stages:

  1. Learn through a semantic visual model
  2. Follow a worked explanation
  3. Complete guided reasoning
  4. Answer an unseen independent question
  5. Finish with a transfer check

The app also includes a practical-evidence lab, local progress and drafts, weak-point review, mission resume, and JSON backup. No account or cloud storage is required.

How I built it

The app uses React, TypeScript, Vite, Zod, Vitest, Playwright, and browser local storage. A checked curriculum manifest preserves the exact topic and statement counts. Typed visual contracts ensure that every scientific diagram contains a defined claim, reading steps, accessible text, and an explicit model limitation.

The learner experience is deterministic and local by design. Codex and GPT-5.6 were the development collaborators rather than an unpredictable runtime tutor.

How I used Codex and GPT-5.6

I made the main product decisions: local-first storage, one objective at a time, no generic visual fallback, and independent learner review.

Codex with GPT-5.6 helped me:

  • audit and structure the complete curriculum;
  • replace repeated generic pictures with statement-specific visual models;
  • build the five-stage learning journey;
  • create typed content and visual validation;
  • write unit, browser, responsive, and accessibility tests;
  • coordinate independent chemistry, student, and UX reviews;
  • diagnose and correct scientific and visual defects.

Review agents found issues that ordinary code checks missed, including incorrect bond topology, misleading titration colour, chromatogram measurement geometry, and responsive clipping. I corrected those findings and protected the fixes with regression tests.

Build Week extension

The project existed as an early prototype before the submission period. At the official start it contained 15 reviewed models.

During Build Week, I used Codex and GPT-5.6 to add 220 reviewed models, reaching 235. This work spans 43 dated commits, more than 10,000 added lines, 34 browser-test suites, and the complete visual-first learning workflow demonstrated here.

Challenges

The hardest challenge was making every visual scientifically meaningful. A diagram can look polished and still teach the wrong idea. The visual registry therefore fails closed: if a model has not passed review, the app shows its review status instead of decorative artwork.

The second challenge was making large scientific instruments readable on both desktop and phone without simplifying away essential evidence.

Accomplishments

  • 252 curriculum statements mapped
  • 235 reviewed objective-specific visual models
  • 220 reviewed models added during Build Week
  • Five-stage learning and transfer journey
  • Practical evidence and exam-skills workspace
  • Private, local progress and weak-point recovery
  • 287 unit and content checks
  • 98 full desktop and 98 phone browser regressions

What I learned

For science education, visual accuracy needs the same engineering discipline as code. Typed data, explicit limitations, invariant tests, responsive inspection, and independent reviewers made Codex much more valuable than simply asking it to generate pages.

What's next

I will complete the remaining review queue, run the app with real students and qualified teachers, and add optional teacher-created study plans and progress reports.

Chemistry Study Atlas is an independent, unofficial study aid. It is not affiliated with or endorsed by Cambridge International Education.

Built With

Share this project:

Updates