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
26:11 MIN

How atomic design prevents common frontend anti-patterns

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

Organizing UI components using the atomic design methodology
17:07 MIN

Organizing UI components using the atomic design methodology

Microfrontends at Scale

Adopting atomic design for structure and clarity
02:36 MIN

Adopting atomic design for structure and clarity

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

Audience Q&A on patterns, typescript, and frameworks
25:14 MIN

Audience Q&A on patterns, typescript, and frameworks

10 must-know design patterns for JS Devs

Structuring a production project with web components
13:55 MIN

Structuring a production project with web components

Frameworkless: How to use Web-Components in production?

Structuring code with the atomic design methodology
14:36 MIN

Structuring code with the atomic design methodology

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

Best practices for documenting a design system
21:40 MIN

Best practices for documenting a design system

Microfrontends at Scale

The benefits of a composable JavaScript ecosystem
34:34 MIN

The benefits of a composable JavaScript ecosystem

GraphQL + Apollo + Next.js: A Lovely Trio

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

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

Multiple Ships to the Island - Micro Frontends & Island Architectures

Florian Rappl

Accessibility in React Application30:07

Accessibility in React Application

Julia Undeutsch

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

WeAreDevelopers LIVE – Frontend Inspirations, Web Standards and more

Chris Heilmann, Daniel Cranney & Jan Deppisch

Building Interactive Async UI with React 19 and Ariakit25:22

Building Interactive Async UI with React 19 and Ariakit

Aurora Scharff

Microfrontends at Scale43:20

Microfrontends at Scale

Josh Goldberg

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
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
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
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
CH
Chris Heilmann
Building a "shoutout" component in plain HTML/CSS/JavaScript
Every Wednesday we meet at noon to talk about a lot of tech news, tools and resources in something we call WeAreDevelopers Live . We go live on YouTube and afterwards we cut out short videos to post on social media. What we needed was an obvious “sho...
Building a "shoutout" component in plain HTML/CSS/JavaScript

From learning to earning

Jobs that call for the skills explored in this talk.