Free course
The Buffer Stack: A Design Engineer's Field Guide
A focused prep course for Buffer's Senior Design Engineer role — Next.js Pages-to-App-Router, CSS Modules, Motion, Radix/Base UI, Recharts, and the marketing analytics stack, framed the way a marketing-site design engineer actually uses them.
What you'll learn
Buffer's marketing site is the window into everything they build, and the Senior Design Engineer on the Marketing team owns how it looks, feels, moves, and performs. This course walks the exact stack named in the role: Next.js 15+ on the Pages Router with a planned App Router migration, Express middleware giving way to Next.js middleware, CSS Modules for styling, Motion for animation, Radix UI migrating gradually to Base UI for accessible components, Recharts for data visualization, and a marketing technology layer of Segment, Google Tag Manager, Mixpanel, and BigQuery fed by content from Ghost CMS, Notion, Redash, and Google Sheets. Each module pairs the technology with the design-engineering judgment the role demands — when to reach for ISR versus SSR, how to evolve an existing design system rather than rebuild it, how to make animation feel consumer-grade without wrecking Core Web Vitals, and how to talk about all of it in an async, transparent, No-Ego-Doers culture. Built as interview preparation, useful as a working reference afterward.
Curriculum
Module 1 — The Rendering Layer: Next.js, Two Routers, One Migration
- The Pages Router you'll inheritreading · 12 min
- The App Router migration: what changes and how to stage itreading · 12 min
- Rendering strategy as a design decisionreading · 12 min
- Module 1 Check-In — Rendering and Routingquiz · 6 min
Module 2 — Styling and the Component System: CSS Modules, Radix, Base UI
- CSS Modules in a design-system worldreading · 12 min
- Headless components: Radix today, Base UI tomorrowreading · 12 min
- Evolving an existing design system without breaking the sitereading · 12 min
Module 3 — Motion and Interaction Craft
- Motion (the library): the animation workhorsereading · 12 min
- CSS animation, and choosing the right tool per interactionreading · 12 min
- Consumer-grade feel: the details checklistreading · 12 min
- Module 3 Check-In — Motion and Craftquiz · 6 min
Module 4 — Data, Content, and the Marketing Analytics Stack
- Content pipelines: Ghost CMS, Notion, Redash, Sheetsreading · 12 min
- Recharts: data visualization that matches the brandreading · 12 min
- The martech layer: Segment, GTM, Mixpanel, BigQueryreading · 12 min
- Module 4 Check-In — Data and Analyticsquiz · 6 min
Module 5 — Accessibility, Performance Practice, and Working the Buffer Way
- Accessibility as an ongoing practice, not an auditreading · 12 min
- Performance auditing: the working methodreading · 12 min
- Working the Buffer way: async, transparent, No Ego Doers — and the interviewreading · 12 min
- Final Check — The Full Stack, End to Endquiz · 8 min
Your instructor
Zen Lara
Design systems leader and educator focused on the craft seam between design and engineering — component systems, motion, accessibility, and the web experiences that carry a brand.
Free, funded by supporters
There is no paywall on this course. If it helps you, you can choose to support it — that keeps it free for everyone else.