Typical Codebase

Q: What's a typical Stack for a project?

  • TypeScript, JavaScript, Node
  • REST API, GraphQL, gRPC
  • React
  • redux
  • Storybook
  • Styled-components
  • docker/k8s
  • MSW

Q: What is the structure of the codebase in a typical project?

The structure of the web project is:

  /components - app components, such as login form or filters panel
  /screens - app screen (also known as containers)
  /ui - atomic UI components, such as buttons, form fields, or icons
  /graphql - everything related to the GraphQL layer
    /mocks - mocks of GraphQL requests that are used in tests and stories
    /mutations - mutation documents
    /queries - query documents
    /hooks.ts - react hooks auto generated by the graphql-codegen
    /types.ts - TypeScript types auto generated by the graphql-codegen
  /hooks - our custom app-wide react hooks
  /providers - apollo, auth, etc.
  /routes - app routes (URL to container) definitions
  /store - redux layer
  /themes - styled components themes
  /utils - app-wide utils

The structure of the server is:

  /datasources - data access layer (including 3rd party APIs)
    /types.ts - GraphQL types auto generated by the graphql-codegen
  /graphql - everything related to the GraphQL layer
      /queries - query resolvers
      /mutations - mutation resolvers
    /schema.graphql - the GraphQL schema
  /server - everything related to setup and launch the server
  /services - service that provide access to gRPC API
  /utils - app-wide utils
/tests - unit tests
  /**/mocks - mocks used by the tests

Q: What kind of testing is used?

Manual and automated.

Q: Are there automated tests?

A typical project over a while will grow to 300+ scenarios to automated acceptance tests, depending on the complexity of the product.

Q: Who writes automated acceptance tests?

QA Automation engineers.