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

# Overview

### Main

* [**Pages**](broken://pages/glUzVIuTuinX31PxIiWs) [**🎥**](https://youtu.be/1tVduWwZNaM) 
  * [**file-based routing pattern**](broken://pages/5GjHMJ9BgCzw4m177Gf3) [\[1\]](https://nextjs.org/docs/app/building-your-application/routing)[\[2\]](https://docs.expo.dev/develop/file-based-routing/) 
  * [**"route" folders**](broken://pages/0MiBMIjkO3dETEHEcRin) *(layout.tsx, page.tsx, index.ts)*
* [**Components**](broken://pages/9VbqV1uHX12zmnLpNqWV) [**🎥**](https://youtu.be/5kctgs6mRgU) **(**[**🎥**](https://youtu.be/Vx3A1ws9On4) **example)**
  * [**general**](broken://pages/H9eb99oAHejFNw2DfwsG) *(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**](broken://pages/LkCndX5lHJAFBNJ8Iert) (UI library)
  * [**Storybook**](broken://pages/GnpIk6XEz7qiCNAtDnqe) (UI documentation & testing)
* [**State Management**](broken://pages/kLYXALMdAZ16OF8ByEQQ) [**🎥**](https://youtu.be/d7rogi0l8Fc)
  * [**general state strategy**](broken://pages/3gle7pmJfoMt9KfyrEbm) ([KISS](https://en.wikipedia.org/wiki/KISS_principle): local > prop passing > Context or Global; external vs internal) 
  * [**client global state**](broken://pages/DMtGFzj5WW1gMmptM9lh) [**🎥**](https://youtu.be/1Rg7pK6rdHw) (Zustand, slices pattern)
  * [**server global state**](broken://pages/PHr6zvuPUvARsIDTkjY5) [**🎥**](https://youtu.be/f-UX9pu7u9Y?si=DqBD3EV7BDjRGP4D) (TanStack/React Query)
* [**Data Fetching & API interactions**](broken://pages/KpPotpLF0MPzI5R5pGMw)
  * [**"api" object**](broken://pages/5dDkVLWnTHxV8mFtV1Py) **(**[**🎥**](https://youtu.be/f-UX9pu7u9Y?si=DqBD3EV7BDjRGP4D) **to 15min)** *(tRPC-like, React Query-wrapped, Axios-based HTTP requests)*
  * [**"router" folders**](broken://pages/miWotY6q42kUzNAXtyeO) [**🎥**](https://youtu.be/f-UX9pu7u9Y?si=XRL7u32pii4s0aj5\&t=938) *(route.ts, schemas.ts, types.ts, adapterFns.ts, \_mock)*

### **Other** 

* [**Forms**](broken://pages/t0EvFzHQ0gLrcrMM3HGM) (FormCRUD, useFormLocal, useFormFields)
* [**Charts**](broken://pages/KxKbvYLpfCeJC7nv3Dpc) (ApexCharts; Chart.tsx, ChartDatetime.tsx, ChartDatetimeSingleDay.tsx, ...)
* [**Tables**](broken://pages/bd0GdXpvkLk6bk1JCfga) (MRT.tsx)
* ...