Front-End

Presenter, Container Pattern

TLDR: Presenter components answer how UI is rendered. Container components answer what UI is rendered.

tsconfig

tsconfig.json with comments and explanations

Folder structure

Please refer to Monorepo Architecture tab for more info.

We follow the Angular style guide for naming files. The file name should be in kebab-case, not capitalized, and should describe the content of the file. For example, a component file should be named event-card.component.ts.

Note: Presenter and component files must be prefixed with a .presenter or a .container and do not need a .component suffix

Examples:

event-card.component.tsx
event-card.container.tsx
event-card.presenter.tsx
event.service.tsx
event.helper.tsx

Scaffolding Shadcn Ecosystem Library

Find desired library from Awesome Shadcn or elsewhere.
Create path aliases

tsconfig.base.json

    "paths": {
      "@aceternity": ["libs/external/aceternity/index.ts"],
      "@aceternity/*": ["libs/external/aceternity/*"],
      "@magic-ui": ["libs/external/magic-ui/index.ts"],
      "@magic-ui/*": ["libs/external/magic-ui/*"],
      "@farm-ui": ["libs/external/farm-ui/index.ts"], 
      "@farm-ui/*": ["libs/external/farm-ui/*"], 
      "@cuhacking/docs": ["libs/docs/index.ts"],
      "@cuhacking/docs/*": ["libs/docs/*"],
      "@cuhacking/shared": ["libs/shared/index.ts"],
      "@cuhacking/shared/*": ["libs/shared/*"],
      "@shadcn": ["libs/external/shadcn/index.ts"],
      "@shadcn/*": ["libs/external/shadcn/*"],
      "@website/*": ["libs/website/*"]
    },

Front-End

Presenter, Container Pattern

tsconfig

Folder structure

File Naming Convention

Scaffolding Shadcn Ecosystem Library

On this page