Overview

Main

• Pages 🎥

  • file-based routing pattern [1][2]

  • "route" folders (layout.tsx, page.tsx, index.ts)

• Components 🎥 (🎥 example)

  • general (component file, component folder + _x folders + index.ts)

    • database-related component folders (_config.ts, useMutations, base components)

    • reusable components (Storybookized, Non-Storybookized)

    • local components (_components folder)

  • MUI (UI library)

  • Storybook (UI documentation & testing)

• State Management 🎥

  • general state strategy (KISS: local > prop passing > Context or Global; external vs internal)

  • client global state 🎥 (Zustand, slices pattern)

  • server global state 🎥 (TanStack/React Query)

  • URL state (useUrlState custom hook)

• Data Fetching & API interactions

  • "api" object (🎥 to 15min) (tRPC-like, React Query-wrapped, Axios-based HTTP requests)

  • "router" folders 🎥 (route.ts, schemas.ts, types.ts, adapterFns.ts, _mock)

Other

• Forms (FormCRUD, useFormLocal, useFormFields)

• Charts (ApexCharts; Chart.tsx, ChartDatetime.tsx, ChartDatetimeSingleDay.tsx, ...)

• Tables (MRT.tsx)

• ...