I have been searching for the holy grail of folder structure. Scaleable, maintainable, testable, and visually pleasing.
For further actions, you may consider blocking this person and/or reporting abuse
I have been searching for the holy grail of folder structure. Scaleable, maintainable, testable, and visually pleasing.
For further actions, you may consider blocking this person and/or reporting abuse
Head over to our Welcome Thread and tell us a bit about yourself!
Thomas Bnt -
Bas codes -
Cher -
Phil Wolstenholme -
Once suspended, mattdevio will not be able to comment or publish posts until their suspension is removed.
Once unsuspended, mattdevio will be able to comment and publish posts again.
Once unpublished, all posts by mattdevio will become hidden and only accessible to themselves.
If mattdevio is not suspended, they can still re-publish their posts from their dashboard.
Once unpublished, this post will become invisible to the public and only accessible to Matt G.
They can still re-publish the post if they are not suspended.
Thanks for keeping DEV Community π©βπ»π¨βπ» safe. Here is what you can do to flag mattdevio:
Unflagging mattdevio will restore default visibility to their posts.
Top comments (4)
At work, we structure our app following the atomic design system. Weβve found it to be a great way to work and collaborate closely with designers and build reusable components. Thereβs minor deviation in parts but we mostly stick to that pattern. We literally have folders labeled, atoms, molecules, organisms, templates, and pages. Itβs working great for us!
That coupled with styled components, and styled themeing makes our frontend development more logic/state/side effects focused and less on the βstyleβ per se.
Itβs still a WIP but both designers and developers are fans of it.
That is super cool. I am actually on a team at work in charge of test driving atomic design w/ pattern lab. It is a long process, but I am enjoying so far as well.
Last night I decided to try it out on my personal project and I like the structure so far. Breaking my components folder into atoms, molecules, organisms, and pages has offered me a lot of clarity. The only problem is deciding which category my existing modules fit into.
Are you using Pattern Lab or are you using another system to work with your designers?
Wow I'm super late to this comment Sorry!
We've been using a combination of things we're experimenting with. We've tried using Framer X but getting our coded components into it is proving difficult. The ideal setup with them is nice because then you get the code for the designed component and it's prop-types and you have to less work from the ground up. Haven't quite figured that out.
Right now we're using good solid documentation in Notion. Our designer builds a feature, uses Storybook to figure out what components are available to him, and then documents new ones and places sizes for different browser widths etc. That's working for us right now until we come up with a more robust solution.
Atomic design is great. I was recently at React Day New York and a lot of companies use that same pattern to organize their component library.
I like to keep things simple so I put all my components are in
src/components
and my pages are insrc/pages
(suffixed with -Page). All API stuff is insrc/api
and I also have asrc/utils
for stuff that doesn't fit anywhere else.It looks something like this:
Recommended reading material: hackernoon.com/the-100-correct-way...