static-ts-monorepo-starter-pack

Feature-heavy monorepo boilerplate for static web apps

---

Project maintained by Rock-n-Prog Hosted on GitHub Pages — Theme by mattgraham

General architecture

Software architecture

Diagrams might not work in GitHub Pages. If that’s the case, see them here.

Components architecture

graph TD;
  apps-api((Web API))
  packages-web-ui(Web UI Package)
  component-serverless-functions([Serverless Functions])
  component-storybook-web-app([Storybook Web App])
  component-db[(Database)]

  subgraph WEB
    subgraph WEB-UI
      packages-web-ui --> |Deploys into| component-storybook-web-app
    end

    subgraph WEB-API
      apps-api --> |Deploys into| component-serverless-functions
      component-serverless-functions -.-> |Communicates to| component-db
    end
  end

Packages architecture

graph TD;
  apps-api((Web API))
  packages-db(DB Package)
  packages-api(API Package)
  packages-theme(Theme Package)
  packages-web-ui(Web UI Package)
  packages-web-forms(Web Forms Package)
  packages-web-locales(Web Locales Package)
  packages-web-storage(Web Storage Package)

  subgraph WEB
    subgraph WEB-UI
      packages-web-forms -.-> |Uses| packages-web-ui
      packages-web-ui -.-> |Uses| packages-web-storage
    end

    subgraph WEB-API
      apps-api -.-> |Uses| packages-api
      packages-api -.-> |Uses| packages-db
    end
  end

  packages-web-ui -.-> |Uses| packages-theme

File structure

For more info, see Turborepo file structure.

• .github: GitHub repo config and workflows
• .husky: Pre-commit hook config
• apps: Running apps
  • api: Web API (see its docs)
• docs: Project documentation
• packages: Libraries
  • db: Prisma schema and client definitions (see its docs)
  • api: tRPC routes and context definitions (see its docs)
  • theme: Theme (color palette) definition (see its docs)
  • web: Web libraries
    • ui: Web UI library (see its docs)
    • forms: Web forms library (see its docs)
    • locales: Web translations library (see its docs)
    • storage: Web storage library (see its docs)
  • config: Shared config
    • eslint: Set of eslint configs for given technologies
    • stylelint: Set of stylelint configs for given technologies
    • tsconfig: Set of TypeScript configs for given technologies