# Overview

### Main

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

### **Other**&#x20;

* [**Forms**](broken-reference) (FormCRUD, useFormLocal, useFormFields)
* [**Charts**](broken-reference) (ApexCharts; Chart.tsx, ChartDatetime.tsx, ChartDatetimeSingleDay.tsx, ...)
* [**Tables**](broken-reference) (MRT.tsx)
* ...
