Our recommended structure for ReactJS, GatsbyJS or NextJS projects

The source folder is the base folder of the code for the project and is found at the root level of the project.

We recommend breaking it down into the following folders:

We suggest this folder to hold all the components used by the project.

Our suggested sub structure is:

We suggest this folder to hold all scrollable carousels available within the website.

Examples of carousels are available on our careers page and our service page.

We suggest this folder to hold all common components for the website, such as buttons or typography.

We suggest this folder to hold all forms for the website, such as the application or contact form.

We suggest this folder to hold all the grids for the website.

Examples of these are available in our about page, blog or a project page.

We suggest this folder to hold all the lists for the project.

Examples of lists are available in a service page or a project page.

This is where we suggest that you hold enums that allow you quick access to preset things.

We use this in our styleguide to make sure that we only offer the available colors or styles and that we guarantee that when we code in that color or style, that it is gathered correctly.

We suggest this folder to hold components that are available across the entire project.

For us this is the Navigation Bar, Footer and Styleguide.

We suggest this folder to hold your project images.

We only use it for our favicon.

We suggest this folder to hold the layouts that are made available to our page templates, which are dynamically generated from data that Gatsby pulls via the GraphQL from our Craft CMS.

We suggest this folder to hold your GatsbyJS pages that are not generated programatically.

Their structure dictates their URL i.e.

• 404.tsx is your 404
• index.tsx is your "/"
• about.tsx is your "/about"
• A page named "sample" under a folder called "folder" would have a url called "folder/sample".

We suggest this folder to hold the websites redux functionality.

We suggest this folder to hold the templates for the pages that are created programatically by Gatsby using the GraphQL.

The purpose for separating them from the page folder is to avoid duplicates.

i.e. A page in the "pages" folder will automatically be included in your website with an allocated URL.

We suggest this folder to hold Typescript Types.

For more information about our recommended type structure, please scroll to the next section of this guide.

We suggest this folder to hold all your utilities that are used across your website.

We use this for things that include:

• Algolia functionality.
• To return the right media component with standardized dimensions based on the data that is passed in.
• To standardize messaging that include errors or confirmation messages.
• To standardize how we send custom Google Analytics events.
• To standardize how we return colors or styles from our styleguide.
• To standardize how we offer SEO.

Typescript types reduce errors and help make your code more reliable and reusable.

Our suggested substructure for types is:

This holds all the types for the fields of your CMS to ease reusability.

This holds all the types for the form.

This holds all the types for portions of types that are reused across the project.

For example, a project is a full layout but parts of it are used across the website to guarantee consistency. The parts that are used are part of this fragment.

This holds all the types that are used across the entire website, such as the navigation bar, styleguide or footer.

This holds all the types for your website media.

This holds all the types for all the pages.

Suggested types are Props, Context and Layout.

• The props are what is sent to the page template that you create programatically and include the path for the page and the context.
• The context is the details that are passed down from the backend to the page when creating pages programmatically - this includes the layout.
• The layout is all the data related to the page that is created.

This holds all the types for the redux modules of the project.

This holds all the types related to SEO.

We are actively looking for feedback on how to improve this resource. Please send us a note to inquiries@delasign.com with any thoughts or feedback you may have.