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

Recreating React components using AI and dev tools
04:56 MIN

Recreating React components using AI and dev tools

WeAreDevelopers LIVE – AI, Freelancing, Keeping Up with Tech and More

The industry's focus on frameworks over web fundamentals
11:32 MIN

The industry's focus on frameworks over web fundamentals

WeAreDevelopers LIVE – Frontend Inspirations, Web Standards and more

Navigating the growing complexity of modern CSS
09:00 MIN

Navigating the growing complexity of modern CSS

WeAreDevelopers LIVE – You Don’t Need JavaScript, Modern CSS and More

Why you might not need JavaScript for everything
02:33 MIN

Why you might not need JavaScript for everything

WeAreDevelopers LIVE – You Don’t Need JavaScript, Modern CSS and More

The only frontend stack that truly matters
11:10 MIN

The only frontend stack that truly matters

WeAreDevelopers LIVE – Frontend Inspirations, Web Standards and more

Building collaborative design tools and the neo-brutalism trend
03:05 MIN

Building collaborative design tools and the neo-brutalism trend

Slopquatting, API Keys, Fun with Fonts, Recruiters vs AI and more - The Best of LIVE 2025 - Part 2

The value of progressive enhancement and semantic HTML
03:31 MIN

The value of progressive enhancement and semantic HTML

WeAreDevelopers LIVE – You Don’t Need JavaScript, Modern CSS and More

Improving the developer feedback loop with specialized tools
03:16 MIN

Improving the developer feedback loop with specialized tools

Developer Time Is Valuable - Use the Right Tools - Kilian Valkhof

Featured Partners

Related Videos

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

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 26:51

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

Rita Castro

WeAreDevelopers LIVE – Frontend Inspirations, Web Standards and more1:06:20

WeAreDevelopers LIVE – Frontend Inspirations, Web Standards and more

Chris Heilmann, Daniel Cranney & Jan Deppisch

Microfrontends at Scale43:20

Microfrontends at Scale

Josh Goldberg

Accessibility in React Application30:07

Accessibility in React Application

Julia Undeutsch

Multiple Ships to the Island - Micro Frontends & Island Architectures59:03

Multiple Ships to the Island - Micro Frontends & Island Architectures

Florian Rappl

Front-End Micro Apps35:17

Front-End Micro Apps

Serg Hospodarets

Meet Your New BFF: Backend to Frontend without the Duct Tape51:04

Meet Your New BFF: Backend to Frontend without the Duct Tape

Noam Honig

Related Articles

View all articles
DC
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
BR
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
S
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

From learning to earning

Jobs that call for the skills explored in this talk.