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 · WWC 2022

5:49 min

Building cohesive interfaces utilizing atomic design system principles

Josh Goldberg · WWC 2021

2:22 min

Transitioning user interfaces toward atomic design architecture

Rita Castro · WWC 2022

1:20 min

Exploring tooling choices for interactive UI components

Aurora Scharff Aurora Scharff · WWC 2025

10:09 min

Transitioning from graphic design to large scale frontend architecture

Erasmo Hernandez Erasmo Hernandez · WWC Europe 2026

9:46 min

Questions on architecture typing and team organization

Trishul Goel · JS Congress

More from WeAreDevelopers LIVE

Aliens in Quarantine, Python Deprecates Loops, and AI Buys Old Books - Zbyszek Tenerowicz thumbnail
5:43
5 days ago

Aliens in Quarantine, Python Deprecates Loops, and AI Buys Old Books - Zbyszek Tenerowicz

Chris Heilmann, Daniel Cranney

WeAreDevelopers LIVE - Node and Package Security thumbnail
1:08:30
5 days ago

WeAreDevelopers LIVE - Node and Package Security

Chris Heilmann, Daniel Cranney, Zbyszek Tenerowicz

WeAreDevelopers LIVE - Streaming HTML thumbnail
1:10:26
12 days ago

WeAreDevelopers LIVE - Streaming HTML

Chris Heilmann, Daniel Cranney, Jad Joubran

WeAreDevelopers LIVE - CODE100 at WeAreDevelopers Europe thumbnail
1:02:34
19 days ago

WeAreDevelopers LIVE - CODE100 at WeAreDevelopers Europe

Chris Heilmann, Daniel Cranney, Justin Halsall, Werner Jeschko, Nicole Jeschko, Mirco Tomić

WeAreDevelopers LIVE - Web Performance in an AI World thumbnail
1:07:59
26 days ago

WeAreDevelopers LIVE - Web Performance in an AI World

Chris Heilmann, Daniel Cranney

FIFA Hack, Midjourney Does Ultrasounds, and Trampoline Traffic Lights - Nicole Jeschko and Werner Jeschko thumbnail
5:55
about 2 months ago

FIFA Hack, Midjourney Does Ultrasounds, and Trampoline Traffic Lights - Nicole Jeschko and Werner Jeschko

Chris Heilmann, Daniel Cranney

Upcoming sessions on this topic

Open session

World Congress 2026 North America

Architecting AI in Angular: WebMCP, A2UI, and the Agent Experience

Ankita Sood

Sr. Principal Engineer @ Secureworks | Angular GDE

Ankita Sood
Open session

World Congress 2026 North America

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

Shubham Chaurasia

Senior Software Engineer @ Meta

Shubham Chaurasia
Open session

World Congress 2026 North America

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

Paweł Matynia, Bartosz Leczycki

Paweł Matynia
Bartosz Leczycki
Open session

World Congress 2026 North America

Testing React Backends Like a Pro: Mocking Databases with SQLite

David Morris

Solution Architect

David Morris
Open session

World Congress 2026 North America

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
Open session

World Congress 2026 North America

When Humans Stop Writing Code: Rethinking Languages, Compilers, and Responsibility

Simon Auer

Organizer of flutter vienna meetup and CEO of marqably

Simon Auer

Related videos

Building a large, complex product from the ground up with typescript & Atomic Design:lessons learned thumbnail
28:13
WWC 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
WWC 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 • about 1 month ago

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

Ana Gil Amor

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

Microfrontends at Scale

Josh Goldberg

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

But, you're not Facebook

Kristijan Ristovski

Building software that scales with Typescript thumbnail
37:18
WWC 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.