Folder Structure

Folder Structure

This page gives a general overview of the primary folders in the project.

Folders

• .github
  • This folder contains the Github Actions workflows and issue templates
• .storybook
  • Configuration files for Storybook
• public
  • Contains all the static files for React.
• src
  • Contains all the React components in the project
• cypress
  • Contains all the cypress test and configuration files

Atomic design

We have decided to go for an atomic design structure for the components residing inside the src folder. This means that we split our components into a set of different categories.

• Atoms:
  • The most basic component, it is not possible to split an atom into more components. Atoms are entirely self-contained. Examples of what an atom could be are a button, a label or a text input field. Atoms can include basic styling, like fonts, colours and animations.
• Molecules:
  • Single atoms flying around are not very useful for us. So we create molecules by bonding atoms together to create basic components with simple use cases. An example of this could be combining a button, an input field and a label to make a search bar. Molecules are also responsible for passing data down to their atoms.
• Organisms:
  • Now that we have molecules we can start building more complex components. An organism consists of multiple molecules, and together form an integral section of the interface. An perfect example of an organism is a navigation bar, which could consist of a logo, search bar and a set of navigation buttons.
• Layouts/Templates:
  • By putting together organisms we can finally create something that resembles a fully workable website. It is also in the layout we can see the websites final design.
• Page:
  • A page is a specific instance of a layout. All parts of the website are filled in with content, and together it forms what an end-user will see.

By using an atomic design, we promote reusability and make it easier to keep our styling consistent.