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

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

Real-world applications of functional programming
02:00 MIN

Real-world applications of functional programming

A Guide To Functional Programming

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 learned28: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 Scale43:20

Microfrontends at Scale

Josh Goldberg

Front-End Micro Apps35:17

Front-End Micro Apps

Serg Hospodarets

Vuejs and TypeScript- Working Together like Peanut Butter and Jelly44:31

Vuejs and TypeScript- Working Together like Peanut Butter and Jelly

Rob Richardson

The Art and Craft of Type Development43: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

To New Frontiers: The Future of Frontend Development26:00

To New Frontiers: The Future of Frontend Development

Rainer Hahnekamp

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
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.