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
<a href="https://github.com/Shpendrr/react-clean-architecture" target="_blank" rel="noopener nofollow">https://github.com/Shpendrr/react-clean-architecture</a>

This squad goal to help the developer community!

ReactTsx

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.

React Clean Architecture

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.

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

This is a good starter template also, will use it for my next new react apps !

WTF ? <a href="https://app.daily.dev/lucasayabe" data-mention-id="bU9WJPvaYuFCMt7fxKfo8" data-mention-username="lucasayabe" translate="no">@lucasayabe</a> 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 that ordering your folders a certain way gives you , perhaps, a particular “state of mind” that helps you to build your components .
But please, don’t misuse terms that already have a strong and understandable meaning, just to fit with the way you are sorting your files !
What 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 .
This has nothing to do with aarchitecture , not to speak about design!
Please , let’s be serious !
Oh, and by the way , you use atomic design when building a design system, not an application .
So , when you use your Design system within your application, you DO NOT see the Atoms/Molecules and very few Organisms .
You are really mixing a lot of different concepts, and sometimes difficult to hard systems, just to make …a few folders .
You 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 !).
E.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 ?

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 scalable” than others, it just feels more verbose tbh.
PS. 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.
For me react-query with ReactContext seems to do the trick 98% of the times without over-engineering stuff.
(That has nothing to do with the showcased repo, just my two cents on this matter)