Assemble by dragging
Objects snapped to optional grids and stored their position as fractions, keeping an answer stable as the artboard resized.
Earlier work · 2016–2019
Science lessons you could touch.
PocketScholar was a full-stack science-learning platform I built before Code Mochi. It combined animated explanations, original scientific illustrations, and quizzes that went well beyond choosing A, B, or C.
68learning interactions preserved in the original content
4answer models graded by one assessment pipeline
4original illustrated science articles in the archive
3full-stack layers from React through GraphQL to DynamoDB
The product
Built for active learning.
The goal was to make science feel less like reading a textbook and more like manipulating the ideas directly. A lesson could move from a video explainer to a diagram-building exercise, then ask for a calculation or a set of correct observations.
That required a content model flexible enough for very different interactions, a responsive artboard that behaved consistently across screen sizes, and a grading system that understood more than exact string matches.
The technical challenge
An assessment engine for more than multiple choice.
GreenSock powered data-driven lesson animation. React Draggable handled object placement, while a shared server-side pipeline graded every response model.
Fill in the blank
Text answers accepted normalized alternatives, while numerical answers supported configurable error tolerances.
Select the evidence
Questions could enforce one choice per group or allow several correct observations across a responsive answer grid.
Grade and adapt
Correct work earned points and advanced the learner. Missed answers returned explanations before another question was selected for the level.
01Capture interactioncoordinates · text · number · selection
→02Submit through GraphQLone response shape for every question
→03Grade on the servertolerances · points · explanations
→04Advance the learnerscore · level · next question
Under the hood
A serverless learning platform.
PocketScholar was deployed as a static React application backed by a GraphQL API on AWS. Authentication, payments, content, learner responses, observability, and local development were all part of the product—not separate demos.
React + Redux
Apollo Client, styled-components, GreenSock, and Storybook.
GraphQL + Lambda
Node, Apollo Server, Serverless Framework, and Auth0.
DynamoDB + AWS
S3, CloudFront, Stripe, Docker, Sentry, and AWS X-Ray.
What stayed with me
The hard part was making flexibility feel reliable.
Normalize early
Storing positions proportionally made the same authored exercise work across changing artboard dimensions.
Keep grading authoritative
The client collected intent; the server owned correctness, points, feedback, and progression.
Design the system and the lesson
The interaction model had to serve the scientific idea instead of forcing every lesson into the same quiz template.
PocketScholar science archive
Original illustrated explainers.
Preserved with their original 2016 publication dates. These historical versions have not yet been reviewed for current scientific or public-health guidance.
Original archive
Why is lead so bad anyway?
The biochemistry behind why lead contamination can cause damage throughout the body.
Read the archived articleOriginal archive
Why is the Sky Blue?
Why the sky appears blue—and how both the atmosphere and human vision shape what we see.
Read the archived articleOriginal archive
Atoms are mostly empty space, so why doesn’t the world collapse and then blow up?
A tour through atomic scale, electrostatics, and the puzzle that led toward quantum mechanics.
Read the archived article
Original archive
Uncertainty keeps us stable: Atomic Theory Part 2
How quantized states and uncertainty help explain why electrons do not collapse into the nucleus.
Read the archived article