Nathalia Rus

Typescript, React and Atomic Design - a match made in heaven

Is your React app becoming unmaintainable as it scales? Learn to build a robust component library using Atomic Design and TypeScript.

Typescript, React and Atomic Design - a match made in heaven
#1about 4 minutes

The challenge of building scalable frontend applications

Moving from rapid prototyping to building maintainable, scalable code requires a structured system to manage complexity and team growth.

#2about 4 minutes

Learning from Airbnb's design language system

Large companies like Airbnb solve UI consistency and developer communication challenges by implementing a unified design language system (DLS).

#3about 5 minutes

Introducing the Atomic Design methodology

Atomic Design provides a methodology for creating design systems by breaking UIs into a hierarchical structure of reusable components.

#4about 7 minutes

Understanding the five levels of Atomic Design

The component hierarchy consists of atoms, molecules, organisms, templates, and pages, which are assembled from the bottom up like Lego bricks.

#5about 6 minutes

Implementing atoms and molecules in React code

Atoms are the smallest UI elements like buttons and icons, while molecules are simple groups of atoms without complex logic.

#6about 4 minutes

Building organisms and templates with logic and layout

Organisms combine smaller components to add business logic, while templates define page layouts and global styles like responsive breakpoints.

#7about 5 minutes

Enhancing component robustness with TypeScript

TypeScript's static typing enforces strict contracts for component props, preventing bugs and improving developer experience through autocompletion.

#8about 5 minutes

Documenting your component library with Storybook

Storybook creates an interactive website to visualize and document your UI components, making the design system accessible to the entire team.

Related jobs
Jobs that call for the skills explored in this talk.

Matching moments

How atomic design prevents common frontend anti-patterns
02:02 MIN

How atomic design prevents common frontend anti-patterns

Building a large, complex product from the ground up with typescript & Atomic Design:lessons learned

Structuring code with the atomic design methodology
02:23 MIN

Structuring code with the atomic design methodology

Building the Right Product and Building It Right: A Glimpse into Extreme Programming, Atomic Design

Organizing UI components using the atomic design methodology
04:33 MIN

Organizing UI components using the atomic design methodology

Microfrontends at Scale

Real-world applications of functional programming
02:00 MIN

Real-world applications of functional programming

A Guide To Functional Programming

Adopting atomic design for structure and clarity
02:29 MIN

Adopting atomic design for structure and clarity

Building a large, complex product from the ground up with typescript & Atomic Design:lessons learned

Solving UI challenges with a modern tech stack
01:24 MIN

Solving UI challenges with a modern tech stack

Building Interactive Async UI with React 19 and Ariakit

Separation of concerns versus modern web frameworks
05:23 MIN

Separation of concerns versus modern web frameworks

WeAreDevelopers LIVE - Performance and AI?, Social Media decline, Developer Events and more

Structuring a production project with web components
03:38 MIN

Structuring a production project with web components

Frameworkless: How to use Web-Components in production?

Featured Partners

Related Videos

See all videos
Building a large, complex product from the ground up with typescript & Atomic Design:lessons learned
28:13

Building a large, complex product from the ground up with typescript & Atomic Design:lessons learned

Nathalia Rus

What the heck do "declarative" and "reactive" actually mean?
30:40

What the heck do "declarative" and "reactive" actually mean?

André Kovac

Microfrontends at Scale
43:20

Microfrontends at Scale

Josh Goldberg

Front-End Micro Apps
35:17

Front-End Micro Apps

Serg Hospodarets

Vuejs and TypeScript- Working Together like Peanut Butter and Jelly
44:31

Vuejs and TypeScript- Working Together like Peanut Butter and Jelly

Rob Richardson

The Art and Craft of Type Development
43:20

The Art and Craft of Type Development

Michael Hladky & Stefan Baumgartner

Building the Right Product and Building It Right: A Glimpse into Extreme Programming, Atomic Design
26:51

Building the Right Product and Building It Right: A Glimpse into Extreme Programming, Atomic Design

Rita Castro

Hello generics, goodbye boilerplate!
42:16

Hello generics, goodbye boilerplate!

Miroslav Jonaš

Related Articles

View all articles
Daniel Cranney
Exploring TypeScript: Benefits for Large-Scale JavaScript Projects
JavaScript is the backbone of web development, powering everything from small websites to large-scale enterprise applications. However, as projects grow in complexity, maintaining JavaScript code can become increasingly difficult. This is where TypeS...
Exploring TypeScript: Benefits for Large-Scale JavaScript Projects
Benjamin Ruschin
The HTML Elements That You’re Probably Over-Engineering
As frameworks have become more and more commonplace in the world of web development, so too has the over-engineering of features made possible by our humble old friend, HTML. The mental models that come with using state management in React, Vue and o...
The HTML Elements That You’re Probably Over-Engineering
SciChart
The Fastest JavaScript Charts - Built for React and Beyond
For most developers, browser charting works fine — until it doesn’t. Once you push beyond tens of thousands of points, add live streaming, or need advanced interactions, the story changes: frame drops, frozen dashboards, memory issues. That’s where S...
The Fastest JavaScript Charts - Built for React and Beyond
Daniel Cranney, Chris Heilmann
Dev Digest 215: Agent Memory, JS2026, Googlebot Analysis & Canvas❤️HTML
Inside last week’s Dev Digest 215 . 🗿 Make AI talk like a caveman 🧠 A guide to context engineering for LLMs 🤖 Simon Willison on agentic engineering 🔐 Axios supply chain attack post mortem 🛡️ Designing AI agents to resist prompt injection 🎨 HTML in c...
Dev Digest 215: Agent Memory, JS2026, Googlebot Analysis & Canvas❤️HTML

From learning to earning

Jobs that call for the skills explored in this talk.

Frontend Developer

Frontend Developer

Turboneer LLC
Mount Morris, United States of America

Remote
€25-40K
Intermediate
React
Vue.js
Angular
+2