--- title: React Clean Architecture | daily.dev description: A simple React project structure based on Atomic Design and Clean Architecture principles. The setup is organized to help kick off a scalable project quickly,... canonical: https://daily.dev/posts/react-clean-architecture-lwsd3qxel twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: React Clean Architecture | daily.dev og:description: A simple React project structure based on Atomic Design and Clean Architecture principles. The setup is organized to help kick off a scalable project quickly,... og:url: https://daily.dev/posts/react-clean-architecture-lwsd3qxel og:image: https://api.daily.dev/og/posts/LwsD3QxeL.png og:image:alt: React Clean Architecture og:image:width: 1200 og:image:height: 630 og:locale: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # React Clean Architecture **[ReactTsx](https://daily.dev/sources/reactjsx)** · [@shpendrrustemi](https://daily.dev/shpendrrustemi) · 1 min read · 834 upvotes · 67 comments ## Summary A simple React project structure based on Atomic Design and Clean Architecture principles. The setup is organized to help kick off a scalable project quickly, though it does not include error handling, authentication, or logic. ## Content Hey folks 👋 Just dropped a simple React project structure based on Atomic Design and Clean Architecture principles. It’s not a full starter kit — no error handling, auth, or logic — just a clean, organized folder setup to kick off your own scalable project. Hope it helps someone get started faster! ⭐ Give it a star if you find it useful https://github.com/Shpendrr/react-clean-architecture ## Community discussion Top comments from developers on daily.dev. **@fadamakis** · 34 upvotes > Not a fun of atomic design anymore. For example you classify the button as an atom, but what if you want to have an icon inside it? Then becomes a molecule! This fuzziness can become problematic in atomic design and this is why I moved to a feature sliced architecture approach which works much better with a component based framework. **@lucasayabe** · 22 upvotes > The post is misleading, it doesn't use clean architecture at all, its just a generic React folder structure (the only difference is that everything that is inside lib, usually is at root level) with the components folder being organized around atomic design. > > It doesn't have the domain as the heart of the application, the things aren't being constructed around the use cases available at the application, almost everything exists at the frameworks and drivers level, being a type of interface adapter at the best, and the relationships between the modules aren't defined by the OCP and DIP... **@zamanshahed** · 13 upvotes > This is a good starter template also, will use it for my next new react apps ! **@karlatt** · 3 upvotes > WTF ? @lucasayabe you are so right , but your are very gentle ! > OP is speaking about very complicated and important concepts, mixing totally different notions as CLEAN architecture , Atomic Design and so on , just to show us at the end .... a folder STRUCTURE ? > Architecture is not structure ! > CLEAN architecture is about dependencies, not folders and files ! > Atomic design is a DESIGN technique, that has nothing to do neither with architecture, or directory structure or placing files into directories ! > I understand you, OP, want to help people and as a (junior?) Front-End developper you found... **@10orderscom** · 3 upvotes > Imho using a simpler structure like, ui, features and pages (maybe hooks/helpers folders) is enough. > The module boundaries are straightforward (eg featrues can import from ui, pages can import from ui + features). > > The so called "services" folder in this repo are just state hooks that derive from server state (data fetching). > > Also manually creating .d.ts files is not a good practice. > Declarations files should always be omitted automatically through a build step (eg tsc) of a regular ts file. > > I tend to try and keep things simple, can't see why this structure should be considered "more... ## Similar posts on daily.dev - [Don’t just attend KubeCon \+ CloudNativeCon, Merge Forward your experience\!](https://daily.dev/posts/don-t-just-attend-kubecon-cloudnativecon-merge-forward-your-experience--l0rpp73x8) · CNCF · 1 upvotes · 0 comments - [Announcing H2 2026 KCDs](https://daily.dev/posts/announcing-h2-2026-kcds-m96goajm1) · CNCF · 1 upvotes · 0 comments - [Two months of Open Community Groups](https://daily.dev/posts/two-months-of-open-community-groups-asf52zhbs) · CNCF · 0 upvotes · 0 comments - [CNCF Unveils Schedule for KubeCon \+ CloudNativeCon Europe 2026](https://daily.dev/posts/cncf-unveils-schedule-for-kubecon-cloudnativecon-europe-2026-ikhcoa5cb) · CNCF · 2 upvotes · 0 comments - [CNCF Debuts KubeCon \+ CloudNativeCon Japan 2026 Schedule](https://daily.dev/posts/cncf-debuts-kubecon-cloudnativecon-japan-2026-schedule-xp5pyudub) · CNCF · 1 upvotes · 0 comments --- Tags: [#webdev](https://daily.dev/tags/webdev), [#react](https://daily.dev/tags/react), [#architecture](https://daily.dev/tags/architecture), [#frontend](https://daily.dev/tags/frontend) [View this post on daily.dev](https://daily.dev/posts/react-clean-architecture-lwsd3qxel) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@type":"DiscussionForumPosting","mainEntityOfPage":"https://daily.dev/posts/react-clean-architecture-lwsd3qxel","headline":"React Clean Architecture","text":"A simple React project structure based on Atomic Design and Clean Architecture principles. The setup is organized to help kick off a scalable project quickly, though it does not include error handling, authentication, or logic.","url":"https://daily.dev/posts/react-clean-architecture-lwsd3qxel","datePublished":"2025-03-22T23:19:02.280Z","dateModified":"2025-03-22T23:19:15.632Z","author":{"@type":"Person","name":"Shpend Rrustemi","url":"https://daily.dev/shpendrrustemi","image":"https://avatars.githubusercontent.com/u/104890083?v=4","interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"EndorseAction"},"userInteractionCount":860}},"image":"https://media.daily.dev/image/upload/s--0choBsqH--/f_auto/v1742685542/posts/LwsD3QxeL","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":834},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":67}],"comment":[{"@type":"Comment","text":"Not a fun of atomic design anymore. For example you classify the button as an atom, but what if you want to have an icon inside it? Then becomes a molecule! This fuzziness can become problematic in atomic design and this is why I moved to a feature sliced architecture approach which works much better with a component based framework.","datePublished":"2025-03-23T21:33:28.142Z","url":"https://daily.dev/posts/LwsD3QxeL#c-m4q3TqX21","author":{"@type":"Person","name":"Fotis","url":"https://daily.dev/fadamakis","image":"https://media.daily.dev/image/upload/s--KOPPk6Si--/f_auto,q_auto/v1/avatars/avatar_EsUYS1j4youWBm81ZEe4G"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":34}},{"@type":"Comment","text":"The post is misleading, it doesn’t use clean architecture at all, its just a generic React folder structure (the only difference is that everything that is inside lib, usually is at root level) with the components folder being organized around atomic design.\nIt doesn’t have the domain as the heart of the application, the things aren’t being constructed around the use cases available at the application, almost everything exists at the frameworks and drivers level, being a type of interface adapter at the best, and the relationships between the modules aren’t defined by the OCP and DIP principles.\nAlso it doesn’t express the main concept of the clean architecture that is the idea of screaming architecture, the first thing that everyone will know after seeing this folder structure isn’t that is an medical schedule app, or a banking app, or a e-commerce app, but that is a React app instead, that is something that you try to avoid when you use clean architecture, so the architecture presented isn’t clean at all, since it doesn’t implement any of its concepts.","datePublished":"2025-03-24T04:50:30.302Z","url":"https://daily.dev/posts/LwsD3QxeL#c-dFwZ3jSHM","author":{"@type":"Person","name":"Lucas Ayabe","url":"https://daily.dev/lucasayabe","image":"https://lh3.googleusercontent.com/a-/AOh14Ght1VAD_wMUn2QGKCYw3wYXfC3HWT68UDbvk2dP5Q=s100"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":22}},{"@type":"Comment","text":"This is a good starter template also, will use it for my next new react apps !","datePublished":"2025-03-23T04:16:24.209Z","url":"https://daily.dev/posts/LwsD3QxeL#c-OIP16c8Ht","author":{"@type":"Person","name":"MD Shahed","url":"https://daily.dev/zamanshahed","image":"https://lh3.googleusercontent.com/a-/AOh14Gid5XcU7LHXTayrbu9gmtGZXEain1M6mG5G70Fw8z0=s100"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":13}},{"@type":"Comment","text":"WTF ? @lucasayabe you are so right , but your are very gentle !\nOP is speaking about very complicated and important concepts, mixing totally different notions as CLEAN architecture , Atomic Design and so on , just to show us at the end … a folder STRUCTURE ?\nArchitecture is not structure !\nCLEAN architecture is about dependencies, not folders and files !\nAtomic design is a DESIGN technique, that has nothing to do neither with architecture, or directory structure or placing files into directories !\nI understand you, OP, want to help people and as a (junior?) Front-End developper you found that ordering your folders a certain way gives you , perhaps, a particular “state of mind” that helps you to build your components .\nBut please, don’t misuse terms that already have a strong and understandable meaning, just to fit with the way you are sorting your files !\nWhat you are doing is just a little bit of cleaning, as when a housecleaner (don’t get me wrong , i’m very bad at cleaning my house , so I give full respect to house cleaning people) is taking something on the ground and put it in a basket .\nThis has nothing to do with aarchitecture , not to speak about design!\nPlease , let’s be serious !\nOh, and by the way , you use atomic design when building a design system, not an application .\nSo , when you use your Design system within your application, you DO NOT see the Atoms/Molecules and very few Organisms .\nYou are really mixing a lot of different concepts, and sometimes difficult to hard systems, just to make …a few folders .\nYou call it Clean Architecture ? Let’s forget all the DDD, and “backend principles”(architecture is architecture and there’s not any difference , should you speak about back , front , middle , east, north or west !).\nE.G. Clean architecture is supposed to respect and help developpers apply SOLID principles. Can you explain where , in your folder structure, you leverage such practices ?","datePublished":"2025-03-25T19:44:03.400Z","dateModified":"2025-03-25T20:01:18.586Z","url":"https://daily.dev/posts/LwsD3QxeL#c-bW2hnzz5W","author":{"@type":"Person","name":"Karlatt Hoaok","url":"https://daily.dev/karlatt","image":"https://lh3.googleusercontent.com/a/ALm5wu0oIgZk0V4Ds8Wm95B38_20w-Jvm3UdWzCh_gtK=s100"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":3}},{"@type":"Comment","text":"Imho using a simpler structure like, ui, features and pages (maybe hooks/helpers folders) is enough.\nThe module boundaries are straightforward (eg featrues can import from ui, pages can import from ui + features).\nThe so called “services” folder in this repo are just state hooks that derive from server state (data fetching).\nAlso manually creating .d.ts files is not a good practice.\nDeclarations files should always be omitted automatically through a build step (eg tsc) of a regular ts file.\nI tend to try and keep things simple, can’t see why this structure should be considered “more scalable” than others, it just feels more verbose tbh.\nPS. On another note, using both react query and zustand/redux should only be considered for extreme state management scenarios (eg a super complex dashboard) imho.\nFor me react-query with ReactContext seems to do the trick 98% of the times without over-engineering stuff.\n(That has nothing to do with the showcased repo, just my two cents on this matter)","datePublished":"2025-03-25T10:36:22.195Z","url":"https://daily.dev/posts/LwsD3QxeL#c-u62KHN6wP","author":{"@type":"Person","name":"Christos Sirmakezis","url":"https://daily.dev/10orderscom","image":"https://media.daily.dev/image/upload/f_auto/v1656771026/avatars/2mGsahGQGPKnEzp5qNq59"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":3}}],"isPartOf":{"@type":"WebPage","url":"https://daily.dev/squads/reactjsx","name":"ReactTsx"}} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"ReactTsx","item":"https://daily.dev/squads/reactjsx"},{"@type":"ListItem","position":3,"name":"React Clean Architecture"}]} ```