01 / learner contextMake intent explicit
Goals, interests, expertise, selected subtopics, and preferences become structured inputs to the course flow.
React Context · TypeScriptBrainBuffet00
BrainBuffet
Give curiosity somewhere to go.
Saved product composition / the learning surface
A saved desktop composition brings the chapter experience together: a visible route through the material, contextual video, and notes beside the work.
A topic is a starting point. A useful course also needs to understand what someone knows, what interests them, and what they want to do next. I built BrainBuffet's product experience around that context: shape a pathway, inspect the plan, and move through the material without losing your place.
RoleProduct + engineering
AudienceSelf-directed learners
ExperienceContext → course → practice
ScopeWeb applicationgeneration service integrated through an API
01
The consequential problem
The blank prompt is only the beginning
Getting an answer and learning a subject ask different things of a product.
Someone arriving with a broad interest may not know which subtopics matter or where their existing knowledge stops. Asking them to specify the entire curriculum up front puts the hardest planning work on the learner.
The experience needed to make that planning gradual, then carry the resulting context into a course with a visible structure and a clear next step.
- Start with the learner's intent and prior knowledge.
- Let the learner inspect the plan before beginning.
- Keep progress and personal notes attached to the lesson.
02
What I saw
Personalization is a conversation
Each answer should make the next choice more useful.
I separated course creation into topic, expertise, subtopics, learning preferences, and a short expertise quiz. The selected topic and experience level feed subtopic recommendations; the chosen subtopics then shape the quiz request.
That sequence turns an abstract promise of personalization into choices a person can understand and influence.
03
The decision that changed the system
Make the learning state visible
A course has a plan, a present moment, and a way back in.
The preview exposes the course description, expected outcomes, and chapter outline. During generation, the interface checks the course's status and waits for usable preview data. Inside a chapter, the lesson, quiz feedback, progress, and notes share the same context.
I treated those transitions as product states with their own purpose. The learner can see what is being prepared, what they are studying, and what they have already worked through.
01Describe
Choose a topic and bring goals, interests, and experience into the creation flow.
02Shape
Refine the scope through subtopics, preferences, and an expertise quiz.
03Preview
Inspect expected outcomes and the chapter plan after generation.
04Study
Read, answer, and keep notes with chapter-level progress.
04
System anatomy / rationale / surfaces
Architecture / context becomes a pathway
Three connected states: what to learn, what is being prepared, and where you are now.
React providers coordinate the creation and chapter experiences. The web client integrates with course, quiz, progress, and note services through a session-aware API layer.
Decision anatomy / select a knot
Pressure did not decorate the architecture. It determined it.
Before / tension
A topic alone hides the learner's starting point
The knot / decision
Gather expertise and refine subtopics before generation
After / consequence
The request carries useful constraints instead of asking the learner to write a complete curriculum prompt.
02 / course creationSeparate preparation from study
A course identifier connects generation status to a preview with outcomes and an inspectable outline.
Next.js routing · course API03 / chapter stateKeep the lesson coherent
A reducer coordinates the active step, selected quiz answers, and progress restored from chapter data.
React reducer · chapter API04 / personal recordAttach notes to their context
Notes retain course, chapter, and step identifiers so observations can return with the material they refer to.
Supabase session · notes APIArchitecture rationale / pressure → choice → consequence
PressureDecisionWhy it mattered
A topic alone hides the learner's starting pointGather expertise and refine subtopics before generation
The request carries useful constraints instead of asking the learner to write a complete curriculum prompt.
Generation takes time and can return incomplete dataGive preparation a status and a separate preview
The interface has a place to explain progress before inviting someone into the lesson.
Reading, quizzes, and notes can lose their connectionUse chapter and step identifiers across the study experience
Progress and personal observations stay attached to the relevant material.
Surface atlas
The system becomes tangible through the places people encounter and use it.
Course creation
A sequence of choices builds the learner's brief.
Course preview
Outcomes and the chapter outline make the proposed course legible.
Chapter
Lesson content, video, quiz feedback, and navigation share one focused surface.
Notes
Course and chapter filters help a learner revisit their own observations.
Product
Next.js · React · TypeScript
Interface
Tailwind CSS · NextUI · Framer Motion
Integration
Supabase Auth · Axios · course and notes APIs
Technology atlas / select a tool
The tools behind the decisions.
Select a tool to see the role it plays in this system.
- Product / BrainBuffet
Next.js
Routes connect course creation, preview, and study while retaining the course identifier between stages.
05
Authentic proof
Saved product composition / the invitation
The original mobile composition begins with a topic and an invitation to explore. A small first action opens into the more deliberate work of shaping a course.
06
What changed in my operating model
The moments between lessons
Previewing, waiting, and returning are part of learning too.
Building BrainBuffet taught me to look beyond the lesson itself. The preview helps someone decide whether a course fits. A clear generation state explains the wait. Progress and notes give a returning learner somewhere familiar to begin.
The product remains a prototype. Its next useful test is the whole journey: whether someone can turn an initial question into a completed lesson, then return with enough context to keep going.
- Make personalization visible in the choices people make.
- Design waiting, previewing, and resuming as complete states.
- Measure whether the learner can use what they learned.