Full-stack developer in Pretoria, South Africa.
Enterprise Java by day · Spring Boot + Angular/React after hours · tests, docs and trade-offs included.
Hiring? hlongwanabino@gmail.com or LinkedIn. Every project below has its code and docs in the open.
I write enterprise Java web applications during the day, the kind with long-lived business rules, workflow engines and a QA process behind every release. After hours I build on the modern stack: Spring Boot APIs and Angular/React front ends.
That split is deliberate. Work taught me how software survives in production. My own projects are where I go deep on the modern stack (stateless JWT auth, Angular Signals, WebGL, transactional checkouts) and then write down why I chose what I chose.
- 💼 3 years of professional full-stack experience, since June 2023
- 🎓 BSc Information Technology, North-West University (2023)
- 🧭 "Less but better": simple interfaces, dependable code, honest docs
- 🕹️ Side quests: producing music, soccer, reading, and far too much anime 🗡️
- 🐍 The snake at the bottom of this page eats my commit history. Stick around for it.
Updated October 2026
- 🔨 Deploying: GameStore, from localhost to live. Docker and a production profile first, then the API on an Oracle Cloud Always-Free VM and the UI on Cloudflare Pages, then CI on every push. It is feature-complete locally; a URL is the next gap.
- 📚 Studying: AWS Certified Cloud Practitioner · Oracle Certified Associate, Java SE 8 Programmer (1Z0-808)
- 🤖 Next up: AI engineering in Java, starting with retrieval-augmented generation (RAG), and running LLMs locally with Ollama.
Languages
Frontend
➕ Angular Signals · RxJS · React Router · WebGL (OGL) · GLSL
Backend & Data
➕ Spring Security · JWT · Spring Data JPA · Flyway · Java EE · Oracle SQL · ASP.NET Core · EF Core · SQL Server
Testing & Quality
➕ JUnit 5 · MockMvc · H2 · Jasmine · Karma · ESLint · Prettier · Architecture Decision Records
Tools & Platforms
➕ Claude Code for AI-assisted development
| Project | What it is |
|---|---|
| 🎮 GameStore · API · UI | Full-stack game store with a simulated checkout, rewards and an admin portal |
| 👔 Employee Manager · API · UI | Spring Boot API and Angular client with JWT auth across the seam |
| 🃏 Code Pairs · Repo · Live | Memory game on Angular Signals, with combo scoring and ranks from S to C |
| 🌌 Personal Portfolio · Repo · Live | One looping scroll over a WebGL aurora and star map, no router, 15 ADRs |
Started as a React UI exercise. I kept asking what an actual store needs behind the pretty grid, and it turned into a full-stack app with the whole loop: discover → wishlist → cart → checkout → own. Two audiences share one API: customers get live search, a wishlist, checkout, a library, a profile with their rewards ledger and a settings page; admins get a separate portal with full CRUD over games and users.
🔗 Backend · Frontend · In-repo handbook: API side · UI side
Engineering notes: checkout, auth, schema, tests
- Checkout that respects money, even fake money. One transaction snapshots each line's title and price, grants ownership and returns a
DEMO-receipt. The rewards ledger (earn 10 points per R1, redeem 100 points for R1 off) is always recomputed on the server. Card, Stripe and Payflex are all simulated: card details never leave the browser, and a card number ending in 0002 is declined locally so the failure path can be exercised. - Security is the backbone, not a bolt-on. Stateless JWTs, USER/ADMIN roles in one ordered filter chain, identity taken only from the token (never from a
?userId=), and authorities reloaded from the database on every request: one extra read per call, in exchange for a role change taking effect immediately. A public/demopage walks through the 401 → 403 → 200 access ladder. - Built to be trusted. Flyway owns the schema through six versioned migrations with
ddl-auto=validate, so drift stops the app at startup instead of hiding. The API is 26 routes across 7 controllers, and 63 integration tests run it against in-memory H2 (MySQL-only constraints are on the known-limitations list). The two repos share one engineering handbook, searchable, with diagrams and a scorecard, and each README keeps a plain list of known limitations. - Small things that add up. Debounced live search with a keyboard-navigable combobox, server-side pagination, optimistic wishlist toggles, skeleton loaders, and a motion system that respects
prefers-reduced-motion.
Plenty of tutorials stop at "login works". I built this one to find out where token-based auth actually leaks: the seam between an API and a client that has to remember everything. Login and the filter chain are done; the employee routes themselves are still open, and closing them is the first item on the MVP roadmap.
Engineering notes: the JWT seam, theming, decisions
- Java 17 / Spring Boot 3 REST API over employee records. Registering and logging in issue JWTs, and a once-per-request filter validates the Bearer token on every call. The employee routes themselves are still open; the architecture doc names closing that gap as the first of four scoped MVP changes, alongside a global error contract, server-side pagination and CSV export.
- The Angular side holds up its end. An HTTP interceptor attaches the token and signs out on a 401 or 403; a route guard keeps the protected routes protected, with a return URL, instead of just hiding the nav link.
- A UI that only promises what it does. Light and dark themes with measured WCAG AA contrast (lowest 6.16:1 in light, 5.04:1 in dark), a dense table that drops columns by priority on smaller screens, distinct loading, empty, no-results and error states, and toasts instead of
alert(). Three buttons that led nowhere were removed, not styled. - Decisions on paper. The API ships an architecture and MVP roadmap doc; the client records its theme and layout choices as three ADRs and keeps a
CONTEXT.mdglossary that separates User, Employee and Employee Code.
A code-themed card matching game that I tore down and rebuilt on Angular's standalone components and Signals. The rewrite was the point.
🔗 Repository · Live Demo
Engineering notes: derived state, game design, accessibility
- Game state as derived state. One service holds the raw state in writable signals, and everything else (multiplier, accuracy, rank) is
computedfrom it, which removes a whole class of stale-UI bugs. The board locks during a mismatch, every deal gets fresh card ids, and the confetti runs outside Angular's zone. - Actual game design. Three difficulties, each with its own grid, lives and par time, from a 2×2 board in 12 seconds to 4×3 in 70. Consecutive matches ramp a combo multiplier from 1× to 3×, and every win is graded S, A, B or C.
- Neo-brutalist "Paper & Ink" design system built on CSS custom properties, with 3D CSS card flips. Every button splits into a stationary hit box and a moving face, so a press can't slide off its own target.
- Playable by everyone. Keyboard controls, screen-reader announcements for every flip and match, full reduced-motion support, and Jasmine/Karma unit tests on the game rules, the scoreboard and the card.
I didn't want a résumé with a nav bar. Boring. This one is a single continuous scroll: five destinations (Home, Experience, About, Certifications, Contact) that wrap into a seamless loop, floating over a WebGL aurora and a star map drawn from real stars.
-000000?style=flat-square&logo=webgl&logoColor=white){kind=icon}
🔗 Repository · Live Demo · ADRs
Engineering notes: the loop, the frame pulse, the dependency diet
- No router. The whole site is one scroll loop with a cloned first section at the end, so reaching the bottom wraps back to the top without a jump or a route change.
- One frame loop drives everything. A GLSL aurora and a WebGL star map, both rendered with OGL, share a single
requestAnimationFramepulse outside Angular's zone, which keeps change detection off the 60 fps hot path. The star map sets each star's depth from its real distance (log-scaled), tints the halos by spectral class in dark mode and swings one camera between destinations; if WebGL is slow or software-rendered it falls back to SVG for the session, and phones get a CSS aurora instead. - Lean by decision. The only third-party runtime libraries beyond Angular are OGL and RxJS: no UI kit, no animation library, no icon font. three.js was rejected at roughly 129 kB gzipped, inline SVG icons replaced an icon font, fonts are self-hosted, and every component is OnPush, enforced by lint. The move to Angular 21 took
npm auditfrom 3 critical and 33 high findings to zero critical and zero high. - Every real decision is an ADR. Fifteen so far, including one that was proposed and rejected, and each records the alternatives it turned down. The repo also ships an interactive onboarding guide for anyone reading the code cold.
- Every push to
mainand every pull request is checked. CI runs lint, a format check, all 29 spec files, and a build that generates the Content-Security-Policy and fails if it can't.
- Decisions get written down. 15 ADRs in the portfolio, 3 in Employee Manager, and one engineering handbook spanning both GameStore repos.
- Tests live where the logic lives. 63 integration tests on the GameStore API, 29 spec files in the portfolio's CI, unit tests on the Code Pairs game rules.
- The schema is code. Flyway, six migrations,
ddl-auto=validate: drift fails startup instead of hiding. - Accessibility is part of done. Keyboard play, screen-reader announcements and reduced motion in Code Pairs and the portfolio; measured WCAG AA contrast in both Employee Manager themes.
- Limitations are stated plainly. Both GameStore READMEs keep a "Known limitations" section, and the Employee Manager architecture doc names its own auth gap as the first thing to fix.
| Project | What it is | Built with |
|---|---|---|
| 📋 Agile Board | Kanban-style task manager: switch between boards, TODO / DOING / DONE columns, and a light/dark theme that is remembered along with your sidebar and active board | Vanilla JS (ES modules) · CSS · localStorage |
| 😂 Meme Generator | Pulls templates from the Imgflip API and lets you caption them; my hands-on lesson in React state and controlled forms, built while following Scrimba's Learn React course | React 19 (RC) · JavaScript · Vite |
| 🚚 EcoPower Logistics API | University project (NWU CMPG323, 2023): ASP.NET Core 6 Web API with ASP.NET Core Identity and JWT (Admin/User roles issued in the token), EF Core on SQL Server and Swagger docs. Ran on Azure for the module; retired since | C# · .NET 6 · EF Core · SQL Server |
| 🌦️ Weather App 🚧 | Paused: the first UI skeleton (nav, a current-conditions card with placeholder values, an hourly-forecast stub) is in place; live data is next when I pick it back up | React 19 · Vite |
| Certificate | Issuer | Issued | Proof |
|---|---|---|---|
| Claude Code 101 | Anthropic Academy | Apr 2026 | Verify |
| Claude 101 | Anthropic Academy | Apr 2026 | Verify |
| JavaScript | Scrimba | Dec 2025 | Verify |
| Learn HTML and CSS | Scrimba | Dec 2025 | Verify |
| Artificial Intelligence Fundamentals | IBM SkillsBuild | Oct 2024 | Verify |
Looking for a full-stack developer who writes the docs too?
hlongwanabino@gmail.com · LinkedIn