Use when setting up new pages/routes, understanding folder structure, configuring Vite, adding new path aliases, or navigating the codebase for the first time.
| Layer | Technology |
|---|---|
| Framework | React 19, TypeScript 5, Vite 7 |
| Routing | React Router v7 |
| Styling | Tailwind CSS v4 + SCSS/Sass modules |
| State | Redux Toolkit + redux-persist |
| Theme | Custom ThemeContext (dark/light) |
| Forms | Formik + Yup |
| HTTP | Axios with token refresh |
src/
├── pages/ # Page components
│ ├── auth/
│ │ ├── login/
│ │ │ └── login.tsx
│ │ └── register/
│ │ └── register.tsx
│ ├── dashboard/
│ │ └── dashboard.tsx
│ └── home/
│ └── home.tsx
├── shared/ # All shared code lives here
│ ├── components/
│ │ ├── ui/ # Reusable UI primitives
│ │ ├── forms/ # Form-level components
│ │ └── providers/ # StoreProvider, ThemeProvider, ToastProvider
│ └── lib/
│ ├── api/ # Axios instance + interceptors
│ ├── config/ # routes.ts (ROUTES, PUBLIC_ROUTES, etc.)
│ ├── hooks/ # useAuth, useTheme, useRedux, useToast
│ ├── store/ # Redux slices + store config
│ ├── types/ # Global TypeScript types
│ └── validations/ # Yup schemas
├── styles/
│ └── globals.css # Tailwind + CSS custom properties
├── App.tsx # Root app component with routing
├── main.tsx # App entry point
└── vite-env.d.ts # Vite environment types
public/
├── icons/index.ts
├── images/index.ts
└── fonts/index.ts
index.html # HTML entry point
vite.config.ts # Vite configuration
The @/* alias maps to the src folder.
@/shared/lib/* // Utilities, hooks, store, API
@/shared/components/* // Shared components
@/shared/lib/config/routes // Route configuration
@/shared/lib/hooks/useAuth // Auth hook
@/shared/lib/store/store // Redux store
@/shared/lib/utils/storage // Cookie utilities
@/public/images // Image asset exports
@/public/icons // Icon asset exports
Always use
@/shared/prefix when importing from shared folders. Never use relative paths like../../lib/.
vite.config.ts)@ alias maps to /srcCreate .env.local with:
VITE_API_BASE_URL=http://localhost:3000/api
NODE_ENV=development
VITE_API_BASE_URL — used in src/shared/lib/api/axios.tsNODE_ENV — affects cookie secure flag in src/shared/lib/utils/storage.tsNote: Vite requires
VITE_prefix for env vars exposed to the client.
Create the page component in the appropriate folder:
src/pages/auth/yourPage/yourPage.tsxsrc/pages/dashboard/yourPage/yourPage.tsxsrc/pages/yourPage/yourPage.tsxAdd the route constant to src/shared/lib/config/routes.ts
Register the route in src/App.tsx within the appropriate route group
Update PUBLIC_ROUTES, PROTECTED_ROUTES, or AUTH_ROUTES in routes.ts as needed