Tool Stack

The tools I
reach for.

Figma for design, React for the frontend, Django for anything that needs a backend. I don't add tools unless the project actually needs them.

Design → Prototype Build → Ship Measure → Iterate

The Stack

01

Design & Prototype

Figma · Framer

UI flows, interaction drafts, and motion references are built in Figma or Framer before a single line of code is written. This keeps iteration cheap and decisions visual.

Component libraries· Design tokens· Prototyped motion

02

Frontend Build

React · Node.js

React for expressive, component-driven UIs. Node.js for tooling and lightweight APIs when needed—kept modular, testable, and production-ready from the start.

Reusable hooks· Accessible components· SSR-ready patterns

03

Styling System

CSS · Tailwind · Modules

Vanilla CSS when full control matters. Tailwind CSS for velocity on product work. CSS Modules when scoping needs to stay tight in large codebases. I pick the approach that fits the project's complexity.

Responsive grids· Design tokens· Micro-interactions

04

Backend & Delivery

Django

Secure, scalable backends with Django—admin-ready out of the box, API-driven, and built for quick iteration without sacrificing structure or security.

REST endpoints· Auth & sessions· Performance tuning· Agile Methodology

How I choose

Rapid concept

Figma or Framer → Tailwind → React. Fast to explore, fast to throw away.

Structured product

Figma component library → CSS Modules for scoping → React. Built to scale.

Data-heavy app

Django API → React views → modular CSS optimised for render performance.

Motion-led page

Framer prototype → Tailwind + CSS custom props → React with Framer Motion or GSAP.

Each project gets the smallest possible set of dependencies so shipping stays quick and maintenance stays simple.

Build flow

  1. 01

    Wireframes & clickable prototype

    Laid out in Figma or Framer before any code is touched.

  2. 02

    Design tokens + component approach

    CSS strategy chosen per project scope. Tokens extracted early.

  3. 03

    React build

    Accessible, reusable components. Hooks over boilerplate.

  4. 04

    API layer on Django

    Node.js scripts handle tooling where needed.

  5. 05

    Performance, QA & handoff

    Agile checkpoints, audits, docs, and a clean handoff that won't leave the next dev lost.

Next step

Have a project? Let's pair the right tools.

Tell me the goal, the audience, and the constraints—I'll assemble the stack that balances speed and craft.

Email me Book a call