File Structure

The following is an explanation for the file structure and directories that are used in the Foundry site.

---

Importing files from directories

For these directories, you can import files from them with these short names:

Short name	Directory
@components	src/components
@images	src/images
@pages	src/pages
@styles	src/styles
@utils	src/utils
@app	src/components/App
@Firebase	src/components/Firebase

These can always be changed in the gatsby-node.js file.

🧐 Structure:

  .
  ├── functions # backend (firebase cloud functions)
  ├── node_modules # modules
  ├── src # source folder
      └── components # main components
          └── App # app components
          └── Firebase # firebase and auth logic
          └── Home # home components
          └── layouts
            ├── Head.js # SEO and meta tags that go in the head
            ├── index.js # layout file
          └── icons # collection of svg icons
          ├── hero.js
          ├── footer.js
          ├── nav.js # navigation bar
          ├── menu.js # sidebar menu for mobile
          ├── serializeHyperlink.js
      └── images
      └── pages
          ├── index.js
          ├── 404.js
      └── styles # styled components styles
      └── utils # various tools for prismic and styling
          ├── config.js # website info for SEO
  ├── .gitignore
  ├── .prettierrc
  ├── gatsby-config.js # imports
  ├── gatsby-browser.js # wrap page with layout
  ├── gatsby-ssr.js # wrap page with layout
  ├── LICENSE
  ├── package-lock.json
  ├── package.json
  ├── README.md

In-depth:

/functions

The functions directory is the source code for Firebase Cloud Functions. This is the server backend code that is responsible for things like creating new user accounts, updating club credits, and verifying ReCaptcha tokens.

/src/components

This is where the app's main components lie. If there is a file in this directory that doesn't have a folder, like the file Title.js, this means the file is a global file or a higher-order component, that is used throughout the app.

/src/components/App

This is where the components for the App lie. You will find all the components for any URL that starts with /app/ in this directory. The App directory should hold component logic (other than Firebase) specifically for the app side of the website.

/src/components/Firebase

This is an extremely important directory and the project is dependent upon it. The Firebase directory is where the FirebaseContext is created that is used throughout the app. Any page you need a bit of Firebase in, you import from here.

/src/components/icons

Holds all the SVG icons that are used throughout the site

/components/Layouts

Holds the head metadata and layout wrapper for the entire website.

/styles

One of the most important directories. This folder holds reusable styles that are used throughout the website.