Skip to main content
Full Stack Radio

122: Matt Biilmann - Architecting the Netlify Dashboard with React and Redux

55 min episode · 2 min read
·
Matt Biilmann

Episode

55 min

Read time

2 min

Topics

Leadership, Design & UX, Software Development

AI-Generated Summary

Key Takeaways

  • Container-Component Pattern: Separate presentational components from container components that handle state. Presentational components accept props only, making them testable in isolation via Storybook, while containers dispatch Redux actions and connect to the store without containing markup.
  • Redux Store Structure: Use resource actions to generate standard CRUD operations automatically. Store entities in ID-keyed maps separate from paginated list views. This prevents duplicate data storage and simplifies state management when objects appear across multiple pages or views.
  • Loading State Design: Display placeholder components immediately that visually match final content before data loads. This creates perceived responsiveness by showing application structure from CDN instantly, then populating with API data, rather than waiting for complete server-side rendering.
  • API Request Strategy: Make multiple small parallel API requests instead of large nested queries. This enables progressive rendering as individual responses complete, improves caching, and lets users see partial data faster than waiting for one expensive combined request to finish.

What It Covers

Matt Biilmann explains Netlify's dashboard architecture using React, Redux, and component separation patterns. He covers state management, API design, data fetching strategies, and development workflows that prioritize performance and developer experience.

Key Questions Answered

  • Container-Component Pattern: Separate presentational components from container components that handle state. Presentational components accept props only, making them testable in isolation via Storybook, while containers dispatch Redux actions and connect to the store without containing markup.
  • Redux Store Structure: Use resource actions to generate standard CRUD operations automatically. Store entities in ID-keyed maps separate from paginated list views. This prevents duplicate data storage and simplifies state management when objects appear across multiple pages or views.
  • Loading State Design: Display placeholder components immediately that visually match final content before data loads. This creates perceived responsiveness by showing application structure from CDN instantly, then populating with API data, rather than waiting for complete server-side rendering.
  • API Request Strategy: Make multiple small parallel API requests instead of large nested queries. This enables progressive rendering as individual responses complete, improves caching, and lets users see partial data faster than waiting for one expensive combined request to finish.

Notable Moment

Biilmann reveals Netlify maintains immutable deploy history, allowing him to log into old Angular versions with Bootstrap UI from years ago. The deployments still function because the team maintained API compatibility throughout multiple frontend rewrites and architectural changes.

Know someone who'd find this useful?

Episode Transcript

In this episode of Fullstack Radio, I talked to Matt Bealman, the CEO of Netlify about the architecture behind the Netlify dashboard, which is probably one of my absolute favorite apps that I get to interact with on a daily basis. This is Fullstack Radio episode one twenty two. Hey, everyone. Welcome to another episode of the Fullstack Radio podcast. I'm your host, Adam Wadden. And today, it's my pleasure to be speaking with Matt Bealman, who is the CEO of Netlify. How's it going, Matt? Good. Thanks for having me. Yeah. I'm really excited to talk to you actually because, Netlify is sort of my go to, kind of example application when I wanna just kind of see what I feel what I feel like, how good an app can actually feel to use on the Internet. And I know, like, your core product at Netlify is creating an incredible sort of hosting and deployment experience for people building all sorts of, modern websites. But I think something that haven't seen anyone, talk about at least in detail is sort of the Netlify dashboard and web app itself because it's it's it's truly an amazing experience. It's probably my favorite, app that I interact with on a daily basis. So, if it's, all good with you, I thought it would be really interesting to sort of do a deep dive into sort of how it all works and how you guys have made it, as excellent of an experience as it is. Absolutely. And thank you so much for the for the kind words. That's, that's that's really encouraging to hear, especially from for the team that's actually put in a lot a lot of that work of of building out the the UI and the application. Yeah. Absolutely. So I guess maybe the best place to start, as far as I have been told by the people at Netlify that I spoke to when sort of trying to arrange this conversation, you were the one who initially broke ground on, like, the the dashboard sort of web app application. Am I right in thinking that? Yes. Yes. That's that's true. So Netlify originally started the company with with me and Chris, my my cofounder, building the the initial version from from scratch. So, so the very the very, very first early predecessor was, was BitBalloon, which was like a a simpler tool in the same space, right, for for deploying front end. It didn't have the CICD component and so on. Right? And originally, when when when I bootstrapped that, it's it's started out as like a c natural application and then merged into a a rails application. And and and back then, the the UI was actually built in in sort of the traditional rails approach where where where the UI was part of the application and so on. Right? And and I felt that really, like, I sort of kept kept running into the constraints of …

Get the full transcript (9,723 words) + summary by email — free

One-time email with the complete transcript and AI summary of this episode. No account needed.

One email, no spam. We’ll also show you what SignalCast does.

Browse all Full Stack Radio transcripts →

You just read a 3-minute summary of a 52-minute episode.

Get Full Stack Radio summarized like this every Monday — plus up to 2 more podcasts, free.

Pick Your Podcasts — Free

Keep Reading

Books, tools, and gear mentioned in this episode

SignalCast may earn commission on purchases via these links.

Tools

  • SPONSORS: [DigitalOcean]
  • Matt Biilmann explains Netlify's dashboard architecture using React, Redux, and component separation patterns.
  • Presentational components accept props only, making them testable in isolation via Storybook, while containers dispatch Redux actions and connect to the store without containing markup.
  • SPONSORS: [Cloudinary]
  • Matt Biilmann explains Netlify's dashboard architecture using React, Redux, and component separation patterns.

More from Full Stack Radio

We summarize every new episode. Want them in your inbox?

Similar Episodes

Related episodes from other podcasts

Explore Related Topics

This podcast is featured in Best Cybersecurity Podcasts (2026) — ranked and reviewed with AI summaries.

Read this week's Software Engineering Podcast Insights — cross-podcast analysis updated weekly.

You're clearly into Full Stack Radio.

Every Monday, we deliver AI summaries of the latest episodes from Full Stack Radio and 192+ other podcasts. Free for one show.

Start My Monday Digest

No credit card · Unsubscribe anytime