Jude MusyokiJude Musyoki

02Who I am

I’m Jude, a senior frontend engineer in Aarhus, originally from Nairobi. I lead the web and mobile frontend of a 2,000-user IoT platform at Spiio, and I like the problems where a UI has to make complex, changing data feel simple enough for someone to make a better decision.

Years shipping production frontends

5+

Users on the platform I lead

2,000+

Products built end to end, data model to deployment

3

1. 01

   Organise by feature, not file type

   Clear boundaries for what each slice owns and what it can import. Feature-sliced design formalises how the Spiio codebase already works, so new features land in a predictable place.

2. 02

   The component library is a product

   I architected 130+ shared components at Spiio. The lesson: consistent APIs and strict typing matter more than the number of components.

3. 03

   Make the right thing the easy thing

   Rules only hold if tooling enforces them: 400+ Vitest and Testing Library files with coverage thresholds, Playwright on every pull request, pre-commit gates for format, lint, test and build. Our Claude Code setup follows the same conventions, so AI-assisted code does too.

4. 04

   Observability closes the loop

   Sentry with Slack alerts, plus Smartlook and GA flow tracking, show where the architecture or the UX is actually hurting, instead of leaving us to guess.

1. May 2023 – Present Now

   Spiio

   Senior Frontend Engineer

   Lead frontend engineer on GreenCast Connect, a production SaaS platform for 2,000+ users on web and mobile. I rebuilt the web app from scratch, spent over a year on the React Native app, own the architecture and conventions, and built the visualisation layer that turns sensor data into decisions.

   What I shipped+

   • Rebuilt the web app from scratch on Next.js (now Next.js 16 / React 19), replacing the original Redux app, and set the engineering standards: feature-based architecture, directory structure, testing and coding conventions.
   • Architected a shared library of 130+ reusable components used across the platform.
   • Spent over a year on the React Native mobile app, in both Expo and bare React Native, building it from scratch alongside the web platform so both clients share the same data model and conventions.
   • Designed and built the data-visualisation layer in Apache ECharts: 30+ custom charts, a drag-and-drop widget dashboard and a Data Explorer that turn raw sensor data into clear insight.
   • Built the interactive map dashboard on Google Maps and Places API (New), with marker clustering, location search and a map-first view of sites and sensors.
   • Built the testing and CI/CD setup: 400+ Vitest and Testing Library test files with coverage thresholds, Playwright end-to-end tests on every pull request via GitHub Actions, and Husky pre-commit gates.
   • Hardened frontend security (Auth0 on every page, bearer-token API requests, a nonce-based Content Security Policy, clickjacking protection) and set up Sentry alerting plus Smartlook and Google Analytics flow tracking.
   • Led a major API data-model migration to nested time-series structures; shipped i18n in 5 languages, new-user onboarding and an in-app product tour; set up Claude Code with shared conventions and an MCP integration for the team.

   Next.js 16 / React 19 / TypeScript / React Native (Expo and bare) / MUI / Apache ECharts / Google Maps & Places API / Auth0 / next-intl (5 locales) / Sentry / Vitest + Testing Library / Playwright / GitHub Actions

2. Apr 2021 – Dec 2022

   Acter

   Full Stack Developer

   A web platform that helps organisations network, communicate and coordinate. I worked across the stack, from the Next.js front end to the GraphQL API and database layer.

   What I shipped+

   • Built and optimised UI components in TypeScript, Next.js and Material-UI — the same front-end stack I work in today at Spiio.
   • Developed and tuned the backend: a GraphQL server with a URQL client and Prisma ORM on PostgreSQL.
   • Implemented Auth0 authentication and wrote Jest test suites; documented components in Storybook.

   Next.js / TypeScript / Material-UI / GraphQL / URQL / Prisma / PostgreSQL / Auth0 / Jest / Storybook

3. Jun 2020 – Nov 2020

   WasteHero

   Frontend Developer Intern

   A smart waste-management platform: the same problem space as my SmartBin project, on a commercial product with real customers.

   What I shipped+

   • Shipped new features in React and TypeScript, working with Apollo Client, GraphQL, Material UI and Redux.
   • Worked with the Google Maps API — my first map-heavy product interface, and the start of a thread that runs through everything I've built since.
   • Implemented scalable features to improve the user experience; finished with a recommendation letter and certificate of internship.

   React / TypeScript / Apollo Client / GraphQL / Material UI / Redux / Google Maps API

4. 2013 – 2019

   Earlier career

   Digital marketing & technology consulting

   Before engineering I spent six years on the business side: rolling out a core banking system, then running marketing, SEO and e-commerce for consumer brands in Kenya. It's why I start from the person using the interface and the decision they need to make.

   • 2018 – 2019

     Sandstorm Kenya · Marketing Lead Consultant

     Oversaw the Shopify e-commerce site for local and international markets, and all marketing.

   • 2016

     EatOut Kenya · Digital Marketing Manager

     Led digital strategy for East Africa's largest online restaurant guide.

   • 2015 – 2016

     Jumia Food · Marketing Manager

     Marketing strategy and budget, CRM, campaign tracking and a brand-ambassador acquisition programme.

   • 2014 – 2015

     MagicBox · Technical Director & Campaign Manager

     Website structure, SEO, email and search-advertising strategy.

   • 2013 – 2014

     Vistaar Finance (India) · Associate Consultant, Technology

     Implemented a new core banking system: coordinated UAT, trained users across 90+ branches and migrated 35+ of them.

1. 01

   Understand the decision

   Who uses the screen, what they need to decide, and which data has to feed it. Six years in marketing taught me to start here.

2. 02

   Shape the data and the hierarchy

   What must be obvious in seconds, what can wait a click. Volumes, latency and rendering cost are decided now, not fixed later.

3. 03

   Build from shared parts

   Typed, reusable components and clear feature boundaries, so new screens, on web or mobile, come from parts that already exist, and the product can grow in directions nobody planned without a rewrite.

4. 04

   Prove it

   Unit tests for the logic, Playwright for the flows, coverage thresholds and pre-commit gates. CI blocks the merge, not a reviewer’s memory.

5. 05

   Watch it live

   Sentry alerts, Smartlook and GA flow tracking show where the architecture or the UX actually hurts. That drives the next iteration.

1. 01Senior frontend depth

   I’ve led a full rewrite, built a React Native app alongside the web platform, set the architecture and conventions for a team, and kept a large React codebase healthy for years. Not just features — the system they live in.

2. 02Built for growth nobody planned for

   Feature boundaries, a typed component library and performance decided up front, so the product can grow in new directions, or onto a new platform, without a second rewrite.

3. 03I start from the user’s decision

   Six years in marketing and consulting taught me to ask what someone needs to decide before I ask what to put on the screen. It shows in the interfaces.

4. 04Production habits from day one

   Strict TypeScript, tests, CI gates, error monitoring and a Content Security Policy are the default, not a phase two — and I document and hand over properly.