# FRONTEND ARCHITECTURE

[← Về Overview](../../README.md) | [Next: UI/UX Specifications →](./02-ui-ux-specifications.md)

---

## Tech Stack

- **Build Tool**: Vite
- **Framework**: React hoặc Vue.js
- **Language**: TypeScript
- **State Management**: Zustand (React) hoặc Pinia (Vue)
- **UI Library**: Material-UI, Ant Design, hoặc Tailwind CSS
- **HTTP Client**: Axios
- **Routing**: React Router hoặc Vue Router
- **Form**: React Hook Form hoặc VeeValidate

---

## Architecture Pattern

- **Component-based**: Reusable components
- **State Management**: Centralized state với Zustand/Pinia
- **API Integration**: Service layer với Axios
- **Routing**: Client-side routing
- **Responsive Design**: Mobile-first approach

---

## Project Structure

```
frontend/
├── src/
│   ├── components/     # Reusable components
│   ├── pages/          # Page components
│   ├── store/          # State management
│   ├── services/       # API services
│   ├── hooks/          # Custom hooks
│   ├── utils/          # Utilities
│   ├── types/          # TypeScript types
│   └── router/         # Routing
```

Chi tiết: [Project Structure](../08-deployment/02-project-structure.md)

---

**Next**: [UI/UX Specifications](./02-ui-ux-specifications.md)