Project Overview
A two-day practice project: quickly learn a new framework (Streamlit), then apply learning science, mathematics, and human-computer interaction principles to design a short, focused practice demo — with the minimum design needed to keep students learning.
One page of information, one problem type, clear scaffolded help. The process included heuristic evaluation to sharpen the details, followed by two rounds of user testing and iteration. Most of the two days went to the heuristic evaluation — testing every interaction, every piece of text, every transition — before putting a real learner in front of it.
The learning experience aims for
A full session: a student works through all five problems — a miss, a hint, a worked solution, and the closing celebration.
Challenges & Solutions
Four challenges, each described the same way: what made it difficult, and how it was solved. Scroll to move through the deck — one card at a time.
Learning Streamlit fast
The challenge
I had not used Streamlit before, and the framework had to be learned, used well, and deployed within a short time.
The solution
I used AI to speed up learning, anchored on the official documentation, and drew on prior deployments on Vercel and Render. Streamlit Community Cloud follows the same model — push to GitHub, connect the repository, deploy automatically. Only the rendering model was new.
Learned, built, and deployed within the project timeline.
Understanding the problem precisely before writing code
The challenge
The main risk was not writing the code — it was defining the wrong generator. If the randomized coefficients could ever produce a problem that is not a true 0/0, or an answer that is not real and simple, the app would fail at its purpose.
The solution
I worked the mathematics out on paper first. The two conditions reduce to a single parameter k, with b = k, c = k + 1, and simplified denominator a = k − 1, where k is drawn only from values that keep the answer clean. Experience in math teaching made this analysis reliable.
Once the derivation was done, the implementation was the easiest step.
Balancing smoothness, learning, and cognitive load
The challenge
Interaction smoothness, learning effectiveness, and cognitive load pull against each other: more help can mean more clutter, and more guidance can mean less learning.
The solution
Applied HCI principles together with learner-centered design and cognitive psychology: one screen with minimal scrolling, segmented progress navigation, help scaffolded at three depths (hint → color-coded feedback → full solution → end-of-session recap), and "Next" unlocked only by a correct answer.
Refined and confirmed through two rounds of user testing.
Making the build easy to understand for any reader
The challenge
An AI-assisted build is only credible if a reader — engineer or not — can follow how it was made and check the reasoning.
The solution
The code is ordered to mirror the screen (progress → question → input → feedback → solution → summary) with brief annotations, and the README walks a reader through the live app, problem structure, code layout, UI/UX rationale, and future plans.
Both files read top to bottom in the same order the app reads on screen.
Tech Stack & Deployment
A deliberately small stack, and a continuous pipeline with no build step, no secrets, and no environment variables — every push to main goes live automatically.
App & Interface
- • Streamlit (single-page layout)
- • Custom CSS injection for theming
- • LaTeX rendering via st.latex
- • Custom CSS celebration animation
Math Engine
- • Pure Python 3.9+, standard library only
- • Exact arithmetic with fractions.Fraction
- • Built-in self-test entry point
Workflow & Delivery
- • Claude Code (AI-assisted development)
- • Git + GitHub for version control
- • Streamlit Community Cloud hosting
The pipeline
Local Development
- • streamlit run app.py for the live UI
- • python limits.py self-tests the math
GitHub Push
- • the repo is the single source of truth
- • every change is versioned
Streamlit Auto Deploy
- • Community Cloud watches the main branch
- • each push rebuilds and redeploys
- • live at limit-practice-app-5.streamlit.app
Future Plans
An AI tutor for personalized questions
Suggested by a test user — designed to supplement, not replace, the current system: answer checking and the worked solution stay deterministic, while the tutor handles free-form questions the fixed scaffolding can’t anticipate.
An irrational-answer mode (answers like 1/√5)
This needs its own answer-entry design — radical or symbolic input rather than decimals only — and matching checking rules, so it is treated as future design work rather than a hidden switch.
Reflection
Looking back, relevant experience is what made each challenge manageable. Streamlit came quickly because earlier Vercel and Render deployments provided the mental model, and AI shortened the rest. The problem was modeled correctly the first time because of math teaching and math-edtech product experience. The design decisions drew on HCI research work and learning-sciences training at Carnegie Mellon. AI sped up every step, but the experience set the direction.
Working with Claude Code shortened implementation time considerably, but it sharpened rather than reduced my role: the value came from precise specifications, verifying the mathematics, reviewing every line, and running the tests an AI cannot run — sessions with real learners. This workflow, human direction and quality control over AI execution, is how I want to keep building learning tools: small, evidence-based, and carefully finished.