／ryankwan.dev
／ryankwan.dev
My name is Ryan, a Full-stack Engineer with frontend depth and full-stack range — React and Next.js at work, Laravel and Firebase on side projects, and the infra glue (Docker, tunnels, typed boundaries) that keeps it all maintainable.
About me
I build products end to end — from typed React and Next.js interfaces to Laravel APIs, Firebase backends, and the Docker and tunneling that keeps side projects running. Frontend is where I spend most of my day job at BuiltByPixel; full-stack is how I ship personal work, including a personal AI assistant (Maria) and a map-first mobile marketplace I am building in my own time with Expo, Firebase, and Stripe.
Approach
How I work
Four things I keep coming back to, and what they cost in practice.
Build the primitives first
Shared components and tokens before features. It costs more on day one and far less every day after, because the next screen becomes assembly rather than invention.
Motion is information
Animation should tell you where you are, what changed, and what is loading. If it does none of those, it is decoration — and decoration gets a reduced-motion switch.
Types at the edges
Validate API responses and authored content at the boundary so the rest of the app can trust its data. Most UI bugs I have chased turned out to be shape bugs in disguise.
Optimise for the next maintainer
Fast to ship and fast to change are the same goal at different timescales. I keep the code boring and obvious, and save the cleverness for the interaction design.
Selected work
What I have built
Client platforms, personal infra, and side projects — each case study leads with the problem, approach, and outcome.
Client work · 2025 — Present
Parfetts
Cash & Carry digital platform for independent retailers
- Problem
- Parfetts is an employee-owned Cash & Carry wholesaler whose customers are independent retailers — corner shops and forecourts running on thin margins and thinner time.
- Outcome
- Both properties are live and maintained in parallel — the marketing site at parfetts.co.uk and the ordering platform at online.parfetts.co.uk — on a shared component and token layer, with lint, formatting, unit tests and component review enforced on every commit rather than left to good intentions.
- Next.js 16
- React 19
- TypeScript
- Chakra UI 3
- Zod
Read the case study
Personal project · 2026 — Present
Immich — self-hosted image server
Private family photo platform on always-on home hardware
- Problem
- Family photos were spread across Google Photos and iCloud, with storage costs rising and no real control over where any of it lived.
- Outcome
- A production-grade self-hosted alternative to Google and Apple Photos, running on hardware I own, reachable at gallery.ryankwan.dev.
- Docker
- Immich
- cloudflared
- Cloudflare DNS
- Tailscale
Read the case study
Personal project · 2026 — Present
Maria — personal AI assistant
Obsidian vault memory, Slack conversations, and Cursor automations
- Problem
- Useful conversations disappear when a chat window closes.
- Outcome
- A working personal assistant I use daily: it remembers preferences and project state across sessions, routes captures into the right folders, commits vault updates to main, and integrates with Google Calendar through a self-hosted MCP server.
- Obsidian
- Markdown
- Cursor
- Slack
- Google Calendar MCP
Read the case study
Client work · 2022 — 2024
Kubrick CMS & component library
E-learning platform, internal CMS, and the Storybook library between them
- Problem
- Kubrick ran an e-learning platform and an internal CMS that were built by different people at different times, in different frameworks.
- Outcome
- A component library both applications could draw on, with Storybook as the place design and engineering met.
- React
- Next.js
- Vue
- Nuxt
- Storybook
Read the case study
Personal project · 2023 — Present
Portfolio experiments lab
Where interaction ideas get tested before they reach client work
- Problem
- Interaction ideas are cheap to describe and expensive to discover halfway through a client build.
- Outcome
- A working set of judgements rather than opinions: which effects are worth their cost, which need capability gating, and which need to be switched off entirely when someone has asked for reduced motion.
- Next.js
- React Three Fiber
- three.js
- Motion
- Canvas 2D
Read the case study
Personal project · 2026 — Present
AI-assisted engineering loops
Using coding agents without losing the plot
- Problem
- Coding agents are fast at producing plausible code and indifferent to whether it matches your conventions.
- Outcome
- Agents do the mechanical work — audits, migrations, repetitive refactors — while architectural decisions stay with me.
- Cursor
- Project rules
- Structured prompts
- Code review
- TypeScript
Read the case study
Experience
Where I have worked
Most recent first. Live links where the work is public.
2025 — Present
BuiltByPixel
Mid-level Frontend Engineer · London, UK
Build and maintain web applications for Parfetts, an employee-owned UK Cash & Carry wholesaler that supplies independent retailers.
- Work across two public properties in parallel — a marketing site and a trade ordering platform — keeping them recognisably one brand while their jobs differ.
- Maintain a shared Chakra UI 3 design system driven by semantic tokens, so theming and spacing decisions are made once rather than per page.
- Consume the Parfetts REST API through a typed fetch client, with Zod validating responses at the boundary so bad payloads surface immediately instead of halfway down a component tree.
- Build ordering and enquiry forms on react-hook-form with Zod schemas shared between client validation and API contracts.
- Integrate Algolia to make the product catalogue searchable on the routes that need it, keeping the index work off the pages that do not.
- Instrument the platform with PostHog for product analytics and Pusher for real-time updates.
- Keep the codebase enforceable rather than aspirational: Biome for lint and format, Vitest for unit tests, Storybook for component review, and Lefthook to run all of it before anything lands.
- Next.js 16 (App Router, Turbopack)
- React 19
- TypeScript
- Chakra UI 3
- Zod
- react-hook-form
- Zustand
- Algolia
- PostHog
- Pusher
- Motion
- Bun
- Biome
- Vitest
- Storybook
- Lefthook
2024 — 2025
Executives Place Limited
Web Applications Developer · London, UK
Frontend development on Ezekia, a software platform used by executive search firms to run their assignments and candidate pipelines.
- Built and maintained frontend features in a large existing Vue.js application backed by Laravel.
- Worked across the stack where the boundary demanded it, touching Laravel and MySQL to get features shipped end to end.
- Vue
- Laravel
- MySQL
- JavaScript
2022 — 2024
Kubrick Group Limited
Full-stack Developer · London, UK
First role after moving to London. Contributed to an e-learning platform, an internal CMS, and the Storybook-driven component library shared between them.
- Developed features across an e-learning platform and a CMS application using React/Next.js and Vue/Nuxt.
- Built and documented shared components in Storybook so design and engineering could review UI in isolation before it reached a page.
- Handled the interaction and animation work with GSAP, which is where my interest in motion as part of the interface started.
- React
- Next.js
- Vue
- Storybook
- Apollo GraphQL
- GSAP
- Tailwind
- Figma
2021 — 2022
Gymism Club
Full-stack Developer · Remote
A coach-matching platform built solo during COVID, connecting people with personal trainers across a range of sports.
- Designed, built and shipped the whole product alone — frontend, backend and deployment.
- Built the frontend as a Nuxt.js PWA with Firebase and Apollo GraphQL behind it, deployed on Google Cloud Run.
- Integrated Stripe for payments.
- Nuxt
- Vue
- Firebase
- Apollo GraphQL
- Stripe
- Cloud Run
- PWA
Stack
What I build with
Grouped by the job it does rather than by how fashionable it is.
Core
- Next.js
- React
- TypeScript
- App Router
- Expo
Styling & design systems
- Chakra UI 3
- Tailwind CSS
- Semantic tokens
- Storybook
- Figma
Data & state
- Typed REST clients
- Zod
- react-hook-form
- Zustand
- Apollo GraphQL
Backend & APIs
- Laravel
- MySQL
- Firebase
- Stripe
- GraphQL
- Docker
Motion
- Motion
- GSAP
- React Three Fiber
- three.js
Search & product analytics
- Algolia
- PostHog
- Pusher
Tooling & quality
- Bun
- Biome
- Vitest
- Lefthook
- ESLint
- GitHub Actions
Infrastructure
- Vercel
- Docker
- Cloudflare Tunnel
- Firebase
- Cloud Run
Contact
Get in touch
Open to frontend engineering roles in London or remote across the UK. Send a message or email me directly — whichever you prefer.