JavaScript · TypeScript · React · Node.js · Software Design · Project-Based Teaching
I teach programming through small, practical projects and build web applications with a focus on clear architecture, accessible interfaces, and explainable engineering decisions.
This account is both my engineering portfolio and a working classroom space. Many of its repositories were created while teaching students: live coding examples, focused exercises, starter projects, solutions, and experiments used to explain one concept at a time.
The number of repositories reflects that teaching workflow. For a quick review, start with the curated work below.
| Area | What you will find |
|---|---|
| Teaching | Progressive examples, beginner-friendly code, exercises, and written explanations |
| Software engineering | Architecture notes, explicit trade-offs, testing, APIs, and deployment work |
| Product development | Responsive, deployed applications built around real user flows |
My teaching approach is practical and incremental:
- Begin with a clear mental model before introducing syntax.
- Demonstrate one concept with a small, observable example.
- Let students predict, modify, and debug the code.
- Connect the lesson to maintainability and production behavior.
- Revisit the solution and discuss alternatives and trade-offs.
I want students to understand not only what works, but why it works, how to debug it, and when a different design would be better.
A visual learning environment that makes algorithm execution inspectable through animated state, synchronized pseudocode, and step-by-step reasoning.
- Repository and project overview
- Open the live application
- Architecture and engineering decisions
- Current milestone: five interactive array lessons, Binary Search candidate-range elimination and midpoint focus, directional sorting motion, custom inputs, typed routing, 100 passing tests, and quality-gated deployment
- Focus: semantic algorithm visualization, event-driven animation, accessibility, responsive product design, and educational UX
A full-stack prototype that turns recent product reviews into a concise AI-generated summary and caches the result for fast repeat requests.
- Repository and setup guide
- Implemented path: React review UI, Express API, local TinyLlama inference through Ollama, Prisma persistence, and seven-day summary caching
- Focus: AI integration boundaries, server-state UX, repository/service separation, and honest prototype documentation
- Current status: local development project; the screenshot below is a product-direction concept, not a deployed application
A ticket marketplace built incrementally to study service boundaries, database ownership, authentication, container orchestration, and distributed-system trade-offs.
- Repository · System architecture
- Implemented foundation: validated signup, password hashing, MongoDB persistence, Docker, Kubernetes, Ingress NGINX, and Skaffold
- Planned direction: independently owned ticket, order, expiration, and payment services coordinated through explicit events
- Current status: authentication foundation only; the marketplace screenshot below is a product-vision concept, not an implemented frontend
A React and TypeScript game-discovery interface with API-backed search, filtering, sorting, loading and error states, and responsive themes.
Live demo · Repository · System design
A fictional real-time simulation used to explore animation loops, Canvas rendering, detection geometry, collision handling, and entity lifecycles.
Live demo · Repository · System design
Frontend foundations HTML, CSS, JavaScript, accessibility, responsive UI
Application development TypeScript, React, Node.js, Express, REST APIs
Data and persistence MongoDB, PostgreSQL, Prisma, browser storage
Engineering practice Git, testing, Docker, CI/CD, documentation
Currently developing System design, Kubernetes, distributed systems
- Clear code that students and teammates can reason about
- Small functions and explicit responsibility boundaries
- Documentation that explains decisions rather than repeating code
- Tests that demonstrate behavior and protect important flows
- Honest labels for prototypes, learning projects, and production-ready work
- Technology choices driven by a real requirement
I am organizing my teaching repositories into clearer learning paths and upgrading representative projects with lesson objectives, exercises, solutions, and common debugging mistakes. In parallel, I am deepening my software-engineering work in testing, backend design, deployment, and distributed systems.
A professional JavaScript creative-coding studio for learning generative art, recursion, animation, canvas rendering, debugging, and modular frontend architecture.
Highlights: CodeMirror syntax highlighting · sandboxed Canvas runtime · animated fractal and flight lessons · visible console errors · written architecture documentation