Portfolio — 2026

David Clydesdale Fullstack Product Engineer

I design and build digital products end to end — from the design system and the interface down to the code that ships them.

React & TypeScript Node · Python · PHP REST/MCP Real-time & web sockets Product & interface design
01 About

I'm a senior full-stack developer who likes owning the whole arc of a product — the architecture and the APIs as much as the interface on top of them.

Day to day that's React and TypeScript on the front end against Node, Python and PHP services behind it: REST APIs, JWT and OAuth flows, web-socket rooms, payment and search integrations, and the performance work that keeps a dense interface fast. REPLO, SYNAPSO, Listofonik and QUIZIKAL are the side of that I own end to end — architected, built, shipped — and a design background is why they don't look like developer side projects.

FrontendReact · TypeScript · Next.js · Vue
BackendNode · Express · Django / Python · PHP
APIs & authREST · JWT / OAuth
Real-timeWebSockets · LLM streaming
StylingSASS · Tailwind · Design systems
PerformanceProfiling · perf optimisation
AIMCP · LLM integration
02 Selected work

Things I've designed and shipped.

01 / REPLO

REPLO

Strength training log & AI coach · 2026

A dark, brutalist-leaning training app for serious lifters — designed and built end to end, from routine planning to an AI coach wired to your own data.

React · TypeScript Node · REST API AI / MCP Data modelling Design system
Read the case
REPLO dashboard — a bold 'Welcome back' greeting with an up-next card and a start-a-session action, over a faint grid on near-black.
02 / SYNAPSO

SYNAPSO

Personal organisation OS · 2026

A light, calm workspace for the whole self — habits, tasks, daily mood and energy, and a library of the ideas, films and books worth keeping. Designed and built end to end.

React · TypeScript Node · REST API JWT auth State management Design system
Read the case
SYNAPSO home — a light, violet-accented daily overview with a habit-progress ring, mood and energy readouts, a mental check-in panel and an activity snapshot.
03 / LISTOFONIK

LISTOFONIK

Real-time collaborative playlist · 2025

A shared jukebox for a room full of people. Join a session by QR or party code, add songs, and upvote each other's picks to decide what plays next — queue, votes and chat synced over web sockets.

React · TypeScript Node · Express Web sockets Real-time state Product design
Read the case
Listofonik session — a glowing purple-magenta orbit visualiser with album art, a collaborative 'Coming up' queue with upvote counts, and a live chat panel.
04 / QUIZIKAL

QUIZIKAL

Real-time remote quiz platform · 2025

A live quiz you run from one seat. The host drives every round and question from a control panel while friends play along from anywhere — kept in sync over web sockets.

React · TypeScript Node · Express Web sockets Session state Product design
Read the case
QUIZIKAL host control panel — a dark session dashboard with round and question controls, quick actions to pause or advance, an active image question, and a live list of participants with answer-status bars.
Case study REPLO

A whole product, from the design system up.

REPLO is a dark-mode, brutalist-leaning fitness app for serious lifters. I designed it as a connected, multi-screen product — routine planning, live in-gym set logging, post-session analysis, and an AI coach that reasons over the user's own training data — plus a marketing site to launch it.

Visit the live app
16
Screens & states
6
Core features
40+
Exercise library
3
Exploration sheets
The product surface
Core features
01

Coach — AI + MCP

A persistent AI coach that answers from your real training history.

  • Always-on “Square Orbit” widget opens a slide-in chat drawer
  • An MCP server exposes logs to Claude, ChatGPT or Cursor
  • Analysis, recommendations and custom plans saved back to routines
The differentiator
02

Routine builder

Exercise selection treated as real search, not a dropdown.

  • Search by exercise or muscle group with matched-tag highlighting
  • Equipment filters across barbell, dumbbell, cable, machine, bodyweight
  • Live build list with set steppers, reordering and a coverage tracker
Information-dense UX
03

Live set logging

The in-gym screen, sized for sweaty hands and one thumb.

  • Accordion of exercises with the active one expanded
  • Per-set rep/weight steppers, one-tap Log Set and auto-advance
  • Progress segments and running session totals
State modelling + ergonomics
04

Session recap

Every finished workout becomes a read-only analysis page.

  • Volume, sets, reps and duration stat band
  • Gold PR cards for lifts that hit records
  • Volume-by-muscle bars and per-exercise top sets
Data viz + read/write modes
05

Rest timer

Timer and stopwatch in one, opened from a header clock.

  • Count-down with progress bar, or count-up stopwatch
  • Three presets, configurable in 15-second steps
  • Centered modal on desktop, bottom sheet on mobile
Configurability + responsive
06

Progress & planning

The loop that brings people back: plan, train, review, adjust.

  • Dashboard with weekly volume, streaks, muscle split and heatmap
  • Favourited, schedulable routines
  • Session history that links straight to recaps
Systems thinking
Standout feature

An AI coach that reads your own logs.

An MCP server exposes each user's training history to any AI client they authorise. In-app, a persistent Coach widget opens a drawer that reads real logs to answer questions — grounded in the user's own numbers, not generic advice.

  • Spots stalls, imbalances and volume trends across muscle groups
  • Recommendations tied to the user's actual data
  • Generates custom plans, savable straight back into REPLO
  • User-authorised, revocable — the AI reads only what's allowed
Coach · reading your data
My bench has stalled for 3 weeks. What should I change?
Across your last 8 push sessions, bench volume is flat at 65 kg × 6 and triceps volume is low. Add close-grip work, deload a week, then wave up to 67.5 kg.
8 sessions readdeload plan
Design system — acid green on black
Acid Greenoklch(0.88 0.21 124)Accent · CTAs, data
Near-Blackoklch(0.14 0.012 145)Canvas
Paneloklch(0.175 0.014 145)Cards, modals
Insetoklch(0.145 0.012 145)Rows, inputs
Borderoklch(0.27 0.02 145)Hairlines
Tealoklch(0.74 0.14 165)Success · logged
Goldoklch(0.8 0.15 85)Personal records
Textoklch(0.96 0.006 140)Copy

MOTIFS — faint grid background, radial accent glow, left accent rail on cards, 999px pill tags, a pulsing live dot and a conic light-trail on the coach widget.

Anton — Display
SESSIONS · 84.6T
Screen titles, exercise names, numbers. Always uppercase.
Space Mono — Data
THIS WEEK · 24:18 · +350%
Eyebrows, metrics, timers, tags. Wide tracking, often green.
Manrope — UI & Body
Load a saved plan and start lifting.
Descriptions, labels, form text.
Case study SYNAPSO

One place for the body, the mind and the backlog.

SYNAPSO — your mind, organised. A personal operating system that holds habits, tasks, daily mood and energy, and a growing library of ideas, films and books — in one light, unhurried workspace. Designed and built end to end, and the tool I actually run my own projects from.

Home
Daily overview + check-in
Habits
Weekly & monthly streaks
Actions
Pending → completed board
Atoms
Ideas, films, books & links
The product surface
What's inside
01

Home — daily command centre

A week-at-a-glance that covers the body and the mind.

  • Habit-progress ring beside mood, energy, focus and stress
  • A mental check-in with sliders and a quick daily reflection
  • Activity snapshot with durations, calories and running totals
Daily overview + mental health
02

Habits

Build streaks across the days that matter.

  • Weekly and monthly views
  • Per-day check / skip toggles with streak counts
  • New habits by category — exercise, nutrition, reading
Streaks + consistency
03

Actions

A calm board that moves work from idea to done.

  • Pending → Active → Waiting → Completed columns
  • Cards carry dates and project context
  • The board I run my own projects from — REPLO's included
Task workflow
04

Atoms

A commonplace book for everything worth keeping.

  • Quotes, movies, series, books and links in one library
  • Ratings, reviews and metadata — IMDB, Metascore, year
  • Filter by type, open a card for the full note
Personal knowledge base
05

Activity logging

Structured capture without the friction.

  • Title, activity type and a custom icon
  • Time, duration, distance, location and calories
  • Free-text description for the rest
Fast structured input
06

Idea Cloud

Somewhere to park a thought before it's gone.

  • Drop quick ideas with tags
  • Sort and revisit to develop later
  • Lives right on the home screen
Frictionless capture
Standout feature

It tracks how you feel, not just what you finish.

Most organisers stop at tasks. SYNAPSO puts a daily mental check-in on the home screen, right next to the to-do list — mood, energy, focus and stress, plus a line of reflection — so the work sits beside the state you did it in.

  • Mood, energy, focus and stress logged each day
  • A reflection field for context, not just metrics
  • Trends sit alongside habits and activity, in one view
Daily check-in · today
EnergyHigh
FocusSharp
StressLow
Back in Dursley after a long weekend in London and four days in Tenby.
Mood · Very goodReflection saved
Design language — violet on light · sampled from the build
Violet#7C5CFC → #B46EFFAccent · gradient CTAs
Lavender#EFECFBCanvas tint
White#FFFFFFCards, sheets
Ink#18191EText
Mint#6FF266Completed · streaks
Coral#ED6568Status · categories

MOTIFS — soft 16–20px card radii, pill category chips, rounded avatar tokens, violet→magenta gradients on primary actions, and an animated particle field of nodes and links behind the login.

Tone — light & unhurried
Calm surfaces, generous spacing, one violet accent doing the pointing.
The opposite register to REPLO — the language serves the product, not a house style.
Signature — the synapse field
Connected nodes drift behind the login — the name made visible.
Synapso · your mind, organised.
Case study LISTOFONIK

A jukebox the whole room controls.

Listofonik is a real-time collaborative playlist — a shared jukebox for a room full of people. One person hosts a session; everyone else joins by scanning a QR code or typing a short party code, then adds songs and upvotes each other's picks to decide what plays next. Queue, votes, the now-playing and a live chat all stay in sync over web sockets.

Visit the live app
Host
Start a party session
Join
QR or party code
Add
Queue up any song
Vote
Upvotes shape what's next
The product surface
What's inside
01

Shared queue & upvotes

A jukebox the whole room controls.

  • Anyone in the session adds songs to the queue
  • Upvote other people's picks to push them up next
  • The order re-sorts live as votes come in
Collaborative, real-time
02

Join in seconds

Scan a code and you're in.

  • Join by QR or a short party code, like BOP15
  • No app to install — it's just a link
  • Host from one screen, everyone plays along
QR + code
03

Now playing

A music video, or the visualiser — your call.

  • Plays the video, or a purple-magenta orbit with album art
  • Host playback controls — prev, play, next
  • Volume and now-playing details
Player + visualiser
04

Add any track

Search and queue in a couple of taps.

  • Search songs and drop them into the queue
  • See who added what
  • Order and duplicates handled for you
Fast add
05

Live chat & reactions

The party talks back.

  • A session chat alongside the queue
  • Emoji reactions in the moment
  • Everyone sees it instantly
Social layer
06

One room, in sync

Everything broadcast over web sockets.

  • Queue, votes, playback and chat pushed to everyone
  • Host drives the session — dashboard, end session
  • Real-time, wherever people are
Web sockets
Standout feature

Everyone in the room picks the next song.

Listofonik turns a playlist into something a group builds together. Add a track, upvote someone else's, and the queue re-sorts live — the crowd decides what plays next. Votes, queue order, the now-playing and the chat are all broadcast over web sockets, so every phone in the room stays on the same beat.

  • Add songs and upvote others' — the queue re-orders live
  • Join by QR or a short party code, no install
  • Playback, votes and chat sync instantly over web sockets
  • Host drives the session; everyone else just plays along
Coming up · live votes
NEXT This Must Be the Place — Talking Heads ▲ 5
Kiss — Prince & the Revolution ▲ 4
The End Of The World — The Cure ▲ 2
The Next Day — David Bowie ▲ 1
6 in the roomvotes live
Design language — neon on black · sampled from the build
Magenta#E35BC9Accent · visualiser, votes
Violet#7A3AD6Buttons, links
Orbit gradientviolet → magentaThe visualiser glow
Near-Black#0B0B0CCanvas
Panel#222328Cards, queue rows
Text#F6F8F8Copy

MOTIFS — a pulsing purple→magenta orbit visualiser, album art in its eye, glassy queue rows with upvote arrows, gradient wash along the bottom of the stage, and a chat rail down the side.

Tone — dark & neon
Nightclub energy on black — a purple-to-magenta glow and one bright accent.
Loud, but not cluttered — the stage stays about the music.
Signature — the orbit
A pulsing visualiser at the centre of every session, album art in its eye.
Listofonik · join the party.
Case study QUIZIKAL

A live quiz you run from one seat.

QUIZIKAL is a real-time, remote quiz platform. One host drives the whole game from a control panel — advancing rounds and questions, revealing answers, pausing and ending — while everyone else plays along from wherever they are, on a phone or a laptop, kept in sync over web sockets. Built to run a proper Christmas quiz with friends spread across the country.

Visit the live app
Build
Questions & rounds
Host
One control panel, live
Play
Join by code, anywhere
Score
Live reveals & cards
The product surface
What's inside
01

Host control panel

One screen runs the whole room, live.

  • Step through rounds and questions, show or hide the current one
  • Pause, skip, end a round or end the whole session
  • Watch every player's answer status update in real time
Real-time host control
02

Quiz builder

Write once, reuse every year.

  • Text and image questions grouped into rounds
  • A reusable quiz library — Crimbo 2025 and counting
  • Name a quiz, set the rounds, launch a session
Authoring + rounds
03

Play from anywhere

Join with a code, play on any screen.

  • Room codes like QUIZZING_123 — nothing to install
  • Phone or laptop, wherever people happen to be
  • Every screen kept in sync over web sockets
Remote by design
04

Picture rounds

Not just text — the fun kind of question.

  • Image-tile questions — “which image depicts…”
  • Tap to select, one highlighted answer
  • Mixed text and picture rounds in a single quiz
Question variety
05

Live scoring & reveals

The payoff between every question.

  • Animated round and question transition cards
  • Score reveals — “2 out of 10, based on improvement”
  • A gradient number you actually wait for
Motion + feedback
06

Sessions & state

Real rooms with a live pulse.

  • Named sessions with a live player count
  • Room and sidecar codes per session
  • The host can pause and resume the whole room
Session state
Standout feature

The host runs the room, live.

QUIZIKAL is built around one authoritative host. From a single panel they drive the session — advancing rounds and questions, revealing answers, pausing and ending — and every change is pushed to every player instantly over web sockets. The players just watch their screens keep up.

  • Host-authoritative: one source of truth for the whole room
  • Round / question stepper, show-hide, pause, next, end
  • Live participant panel — who's answered, who hasn't
  • Everyone stays in sync over web sockets, wherever they are
Host control · live
CLYDESDALE CRIMBO QUIZ · ROUND 2 · Q10
◀ PREV SHOW NEXT ▶
Dee
Panda123
crazlydesdale
Lina·
4 playing2 answered
Design language — gold & green on black · sampled from the build
Amber-Gold#F5A02AAccent · scores, logo
Lime#66BB23Go · correct, launch
Score gradientgreen → amber → redLive score cards
Near-Black#131313Canvas
Panel#272727Cards, controls
Text#F7F7F7Copy

MOTIFS — big display numbers, a living green→amber→red gradient on every score card, green “go” states, gold highlights on the active question, and a compact control-panel layout for the host.

Tone — dark & festive
Gameshow energy on near-black — gold for the score, green for go.
A third register again — loud and live, where SYNAPSO is calm and REPLO is severe.
Signature — the score card
A huge number on a living gradient between every round.
The moment everyone waits for.
03 Contact

Let's build something.