> For the complete documentation index, see [llms.txt](https://pavewise.gitbook.io/pavewise-style-guide-and-more/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://pavewise.gitbook.io/pavewise-style-guide-and-more/frontend/our-systems/overview.md).

# Overview

### Main

* [**Pages**](/pavewise-style-guide-and-more/frontend/our-systems/pages.md) [**🎥**](https://youtu.be/1tVduWwZNaM) 
  * [**file-based routing pattern**](/pavewise-style-guide-and-more/frontend/our-systems/pages/file-based-routing.md) [\[1\]](https://nextjs.org/docs/app/building-your-application/routing)[\[2\]](https://docs.expo.dev/develop/file-based-routing/) 
  * [**"route" folders**](/pavewise-style-guide-and-more/frontend/our-systems/pages/route-folder.md) *(layout.tsx, page.tsx, index.ts)*
* [**Components**](/pavewise-style-guide-and-more/frontend/our-systems/components.md) [**🎥**](https://youtu.be/5kctgs6mRgU) **(**[**🎥**](https://youtu.be/Vx3A1ws9On4) **example)**
  * [**general**](/pavewise-style-guide-and-more/frontend/our-systems/components/overview.md) *(component file, component folder + \_x folders + index.ts)* 
    * [**database-related component folders**](https://pavewise.gitbook.io/pavewise-style-guide-and-more/frontend/our-systems/components/overview#database-related-component-folders) *(\_config.ts, useMutations, base components)*
    * [**reusable components**](https://pavewise.gitbook.io/pavewise-style-guide-and-more/frontend/our-systems/components/overview#reusable-components) *(Storybookized, Non-Storybookized)*
    * [**local components**](https://pavewise.gitbook.io/pavewise-style-guide-and-more/frontend/our-systems/components/overview#local-components) *(\_components folder)*
  * [**MUI**](/pavewise-style-guide-and-more/frontend/our-systems/components/mui.md) (UI library)
  * [**Storybook**](/pavewise-style-guide-and-more/frontend/our-systems/components/storybookjs.md) (UI documentation & testing)
* [**State Management**](/pavewise-style-guide-and-more/frontend/our-systems/state-management.md) [**🎥**](https://youtu.be/d7rogi0l8Fc)
  * [**general state strategy**](/pavewise-style-guide-and-more/frontend/our-systems/state-management/general-state-strategy.md) ([KISS](https://en.wikipedia.org/wiki/KISS_principle): local > prop passing > Context or Global; external vs internal) 
  * [**client global state**](/pavewise-style-guide-and-more/frontend/our-systems/state-management/client-global-state.md) [**🎥**](https://youtu.be/1Rg7pK6rdHw) (Zustand, slices pattern)
  * [**server global state**](/pavewise-style-guide-and-more/frontend/our-systems/state-management/server-global-state.md) [**🎥**](https://youtu.be/f-UX9pu7u9Y?si=DqBD3EV7BDjRGP4D) (TanStack/React Query)
  * [**URL state**](/pavewise-style-guide-and-more/frontend/our-systems/state-management/url-state.md) (`useUrlState` custom hook)
* [**Data Fetching & API interactions**](/pavewise-style-guide-and-more/frontend/our-systems/data-fetching-and-apis.md)
  * [**"api" object**](/pavewise-style-guide-and-more/frontend/our-systems/data-fetching-and-apis/api-object.md) **(**[**🎥**](https://youtu.be/f-UX9pu7u9Y?si=DqBD3EV7BDjRGP4D) **to 15min)** *(tRPC-like, React Query-wrapped, Axios-based HTTP requests)*
  * [**"router" folders**](/pavewise-style-guide-and-more/frontend/our-systems/data-fetching-and-apis/router-folder.md) [**🎥**](https://youtu.be/f-UX9pu7u9Y?si=XRL7u32pii4s0aj5\&t=938) *(route.ts, schemas.ts, types.ts, adapterFns.ts, \_mock)*

### **Other** 

* [**Forms**](/pavewise-style-guide-and-more/frontend/our-systems/forms.md) (FormCRUD, useFormLocal, useFormFields)
* [**Charts**](/pavewise-style-guide-and-more/frontend/our-systems/charts.md) (ApexCharts; Chart.tsx, ChartDatetime.tsx, ChartDatetimeSingleDay.tsx, ...)
* [**Tables**](/pavewise-style-guide-and-more/frontend/our-systems/tables.md) (MRT.tsx)
* ...