A suggestion of how the artsy folder structure could be

This project does not "run" it's just copy paste of code to showcase structure

We want to swift toward a less copy paste approach and have things developed once and reuse them.

"But why is copy and pasting a bad idea? My code works and I don't need to go around different folders, I can just quickly define things locally"

So, why is this a bad idea?

• It does take up extra developer time to create components from scratch when we could just reuse them
• It makes our code more prone to errors since all the component definitions need to be debugged in a case of a bug/error. Maybe we fix the component in one place where it's currently breaking but we forget to fix it in another place?
• Same goes for Design changes. Let's say the Designer decided to change something we then need to go and find every locally defined component and update it, while we could just update it one time if it was defined in a central place of information

In sort: Extra development time, more errors, harder to update designs. Less cohesion between the project.

We want to define components once and import them to whenever we need to use them.

Using an Atomic Design Pattern can help us structure that in an intuitive way instead of defining everything in a flat higherarchy.

If it uses an atom, it's a molecule.

If it uses a molecule, it's an atom.

And so on.

These definitions are just there as a guideline and not supposed to be super strict.

We also want to follow the same idea as we have on the Design, in Figma

Atoms: Buttons, radios, checkboxes, dropdown menus, input, icons, banners, tiles, pills

Molecules: headers, carousels, content, editorial

Atoms and Molecules are the suggested ones, but if we want to take it a step further we can also consider Organisms, Templates and Pages

Templates: auctions, fairs, galleries

Pages: Home, Fairs, Auctions, Sell With Artsy