Portfolio

File Structure

Below is an explanation of the file structure:

src
  components   <- React components
  context      <- React context objects and providers
  fragments    <- GraphQL fragments
  pages        <- Website's pages, each file equates to a new route in the production website
  queries      <- GraphQL queries
  sections     <- React section components
  theme        <- Styled components-related objects
  typings      <- TypeScript definitions

Diving to more specific conventions, each React component should be structured as such:

src
  components
    Navigation                 <- Folder containing component-specific files
      Navigation.d.ts          <- Component-specific TypeScript definitions
      Navigation.query.ts      <- Component-specific GraphQL query
      Navigation.styles.ts     <- Component-specific styles
      Navigation.tsx           <- React component