WeAreDevelopers Logo WeAreDevelopers
Sign in
For You LIVE
WeAreDevelopers LIVE • Mar 24, 2021

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

Nathalia Rus

Are simple UI changes requiring endless cross-team communication? Learn how combining React and TypeScript with Atomic Design builds a predictable, strictly typed frontend architecture that eliminates developer overhead.

Pause
Mute Enter Fullscreen
#1 about 3 min

Overcoming the unmaintainable nature of hacking

Realizing that building scalable applications requires a fundamentally different mindset than rapid prototyping.

#2 about 2 min

Achieving developer velocity through rigid code structures

How clear systems lower communication overhead and actually enable greater flexibility during design changes.

#3 about 4 min

Drawing inspiration from the Airbnb design language

Adopting enterprise-level practices to unify design and engineering for a cohesive user experience.

#4 about 3 min

Introduction to the atomic design hierarchical methodology

Breaking down applications into atoms, molecules, organisms, and templates instead of disconnected pages.

#5 about 3 min

Categorizing user interface elements for faster feature development

Giving engineers a shared vocabulary to locate and modify components based on their logical complexity.

#6 about 2 min

Implementing atomic design from atoms to complete pages

Progressively assembling small, logic-free components into larger, interactive pages.

#7 about 2 min

Defining layout structures with templates and page wrappers

Standardizing repetitive layouts like text constraints or grids before assembling the final page content.

#8 about 2 min

Deconstructing page visuals into reusable design atoms

Training yourself to look at websites as cohesive systems of typography and stylized elements.

#9 about 3 min

Using public UI libraries to guide component architecture

Referencing Ant Design and public Storybooks to understand how complex projects isolate core atoms.

#10 about 3 min

Coding robust atoms with styled components and dynamic themes

Centralizing UI variations within a single functional component to simplify usage for new developers.

#11 about 2 min

Standardizing asset inclusion with an atomic icon component

Managing icons internally so updates automatically propagate consistently across the entire frontend application.

#12 about 2 min

Grouping associated atoms into logic-free structural molecules

Combining multiple basic inputs like radio buttons into unified groups without injecting presentation logic.

#13 about 2 min

Managing feature logic inside organism level React components

Routing data and conditions through specific component wrappers to generate interactive dynamic layouts.

#14 about 3 min

Establishing responsive constraints via programmatic template wrappers

Creating custom components for global scroll behaviors and media queries to align responsive rendering.

#15 about 3 min

Preventing runtime configuration errors with strict static typing

Using TypeScript to guarantee developers adhere exactly to the defined prop options within component interfaces.

#16 about 3 min

Declaring precise type definitions for customized atomic properties

Restricting themes and prop variations through typescript definition files to leverage inline editor intellisense.

#17 about 5 min

Documenting component variants visually using the Storybook environment

Providing an interactive catalog for cross-functional teams to experiment with front-end components and props.

Matching moments

2:40 min

Breaking down complexity with atomic design components

Nathalia Rus · World Congress 2022

5:49 min

Building cohesive interfaces utilizing atomic design system principles

Josh Goldberg · World Congress 2021

2:22 min

Transitioning user interfaces toward atomic design architecture

Rita Castro · World Congress 2022

1:20 min

Exploring tooling choices for interactive UI components

Aurora Scharff Aurora Scharff · World Congress 2025

10:09 min

Transitioning from graphic design to large scale frontend architecture

Erasmo Hernandez Erasmo Hernandez · World Congress 2026 Europe

9:46 min

Questions on architecture typing and team organization

Trishul Goel · JS Congress

More from WeAreDevelopers LIVE

WeAreDevelopers LIVE - Project Chopin: Make Your Team and Agents Play Along thumbnail
1:21:17
4 days ago

WeAreDevelopers LIVE - Project Chopin: Make Your Team and Agents Play Along

Chris Heilmann, Daniel Cranney, Krzysztof Cieślak

Fake or News - AI Toothbrushes, Carrier Pigeon Tech & Life on Mars - Krzysztof Cieślak thumbnail
4:23
6 days ago

Fake or News - AI Toothbrushes, Carrier Pigeon Tech & Life on Mars - Krzysztof Cieślak

Chris Heilmann, Daniel Cranney

Fake or News - AI Music Detectors, Translating Ancient Languages & Tiny Heads in Teslas - Eddie Jaoude thumbnail
6:16
13 days ago

Fake or News - AI Music Detectors, Translating Ancient Languages & Tiny Heads in Teslas - Eddie Jaoude

Chris Heilmann, Daniel Cranney

Fake or News: AI Agents Hire Each Other, Spider-Man Ads in Cars & RAM Thieves - Marc Plogas thumbnail
5:46
18 days ago

Fake or News: AI Agents Hire Each Other, Spider-Man Ads in Cars & RAM Thieves - Marc Plogas

Chris Heilmann, Daniel Cranney, Marc Plogas

WeAreDevelopers - Of Agents and Robots thumbnail
1:04:42
18 days ago

WeAreDevelopers - Of Agents and Robots

Chris Heilmann, Daniel Cranney, Marc Plogas

WeAreDevelopers LIVE - How DevRel Makes Tech More Human thumbnail
48:06
25 days ago

WeAreDevelopers LIVE - How DevRel Makes Tech More Human

Chris Heilmann, Daniel Cranney

Upcoming sessions on this topic

Open session

World Congress 2026 North America

September 24, 2026 · 12:50–13:20

Stage 7

Architecting Agentic Apps: WebMCP, A2UI, and Agent Experience

Ankita Sood

Sr. Principal Engineer @ Secureworks | Angular GDE

Ankita Sood
Open session

World Congress 2026 North America

September 24, 2026 · 12:30–12:35

Outdoor Stage

Software change is outpacing the platforms built to understand it.

Lee Faus

Git was built for humans. I'm building what comes next.

Lee Faus
Open session

World Congress 2026 North America

September 25, 2026 · 11:00–11:30

Stage 7

Beyond Vibe Coding: An AI Builder’s Guide to Migrating 10k+ React Components

Shubham Chaurasia

Senior Software Engineer at Meta

Shubham Chaurasia
Open session

World Congress 2026 North America

September 24, 2026 · 14:10–14:40

Stage 9

One Repo, One Strategy: Scalable Full-Stack Testing in a Monorepo World

Bartosz Leczycki, Paweł Matynia

Bartosz Leczycki
Paweł Matynia
Open session

World Congress 2026 North America

September 25, 2026 · 10:20–10:50

Stage 9

Testing React Backends Like a Pro: Mocking Databases with SQLite

David Morris

Solution Architect at Leidos

David Morris
Open session

World Congress 2026 North America

September 23, 2026 · 10:00–17:00

Stage 14

From Idea to Production with AI: Agentic Development in Practice

Daniel Ostrovsky

UI/UX Architect at Payoneer | AI Architect | Full Cycle Development Expert | Public Speaker | Open Source Contributor |

Daniel Ostrovsky

Related videos

Building a large, complex product from the ground up with typescript & Atomic Design:lessons learned thumbnail
28:13
World Congress 2022 • about 4 years ago

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

Nathalia Rus

Building the Right Product and Building It Right: A Glimpse into Extreme Programming, Atomic Design thumbnail
26:51
World Congress 2022 • about 4 years ago

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

Rita Castro

The Pragmatic Architect: Balancing Necessity vs. Sufficiency in React Systems thumbnail
20:49
Europe 2026 Virtual • 2 months ago

The Pragmatic Architect: Balancing Necessity vs. Sufficiency in React Systems

Ana Gil Amor

Microfrontends at Scale thumbnail
43:20
World Congress 2021 • about 5 years ago

Microfrontends at Scale

Josh Goldberg

But, you're not Facebook thumbnail
31:12
World Congress 2022 • about 4 years ago

But, you're not Facebook

Kristijan Ristovski

Building software that scales with Typescript thumbnail
37:18
World Congress 2022 • about 4 years ago

Building software that scales with Typescript

Tal Joffe

Related articles

From learning to earning

Jobs that call for the skills explored in this talk.