132 lines
4.0 KiB
Markdown
132 lines
4.0 KiB
Markdown
# Service Finder Frontend
|
||
|
||
Modern Vue 3 frontend for the Service Finder platform with dual layout system (B2B/B2C), internationalization, and Docker deployment.
|
||
|
||
## 🚀 Tech Stack
|
||
|
||
- **Vue 3** (Composition API)
|
||
- **TypeScript** for type safety
|
||
- **Vite** for fast development and builds
|
||
- **Pinia** for state management
|
||
- **Vue Router** for navigation
|
||
- **Vue I18n** for translations
|
||
- **Tailwind CSS** for styling
|
||
- **Axios** for HTTP requests
|
||
- **Docker** (multi-stage) + **Nginx** for production
|
||
|
||
## 📁 Project Structure
|
||
|
||
```
|
||
frontend/
|
||
├── src/
|
||
│ ├── assets/ # Styles, images, fonts
|
||
│ ├── components/ # Reusable Vue components
|
||
│ ├── layouts/ # Layout components (Corporate, Consumer)
|
||
│ ├── router/ # Vue Router configuration
|
||
│ ├── stores/ # Pinia stores (app mode, translations)
|
||
│ ├── services/ # API services (translation, auth)
|
||
│ ├── views/ # Page components (Home, About)
|
||
│ ├── locales/ # Translation files (future)
|
||
│ ├── App.vue # Root component
|
||
│ └── main.ts # Application entry point
|
||
├── public/ # Static assets
|
||
├── Dockerfile # Multi-stage Docker build
|
||
├── nginx.conf # Nginx configuration with API proxy
|
||
├── vite.config.ts # Vite configuration
|
||
├── tailwind.config.js # Tailwind CSS configuration
|
||
├── tsconfig.json # TypeScript configuration
|
||
└── package.json # Dependencies and scripts
|
||
```
|
||
|
||
## 🎯 Features
|
||
|
||
### 1. **Dual Layout System**
|
||
- **CorporateLayout**: Clean, data-oriented design for B2B users (fleet management)
|
||
- **ConsumerLayout**: Playful, bento-grid design for B2C users (individual vehicle owners)
|
||
- Dynamic switching via Pinia store
|
||
|
||
### 2. **Internationalization (i18n)**
|
||
- Integrated vue-i18n with backend translation API
|
||
- Language switcher component
|
||
- Fallback to English
|
||
- Translation loading from `/api/v1/translations`
|
||
|
||
### 3. **App Mode Store (Pinia)**
|
||
- Centralized state for app mode (B2B/B2C) and language
|
||
- Persistent storage in localStorage
|
||
- Reactive computed properties
|
||
|
||
### 4. **Docker Deployment**
|
||
- Multi-stage build (Node 20 + Nginx Alpine)
|
||
- Nginx reverse proxy to backend API (`sf_api:8000`)
|
||
- Health check endpoint
|
||
- Optimized production image (~50MB)
|
||
|
||
### 5. **Development Proxy**
|
||
- Vite dev server proxies `/api` requests to backend
|
||
- Hot module replacement (HMR)
|
||
- TypeScript support
|
||
|
||
## 🐳 Docker Commands
|
||
|
||
### Build the image
|
||
```bash
|
||
docker build -t service-finder-frontend .
|
||
```
|
||
|
||
### Run locally (with network)
|
||
```bash
|
||
docker run -p 8080:80 --network sf_net service-finder-frontend
|
||
```
|
||
|
||
### Development (with hot reload)
|
||
```bash
|
||
cd frontend
|
||
npm install
|
||
npm run dev
|
||
```
|
||
|
||
## 🔧 Configuration
|
||
|
||
### Environment Variables
|
||
Create `.env` file:
|
||
```env
|
||
VITE_API_BASE=/api
|
||
```
|
||
|
||
### Nginx Proxy
|
||
All `/api/*` requests are proxied to `http://sf_api:8000` (internal Docker network).
|
||
|
||
### Tailwind CSS
|
||
Custom colors for corporate (`corporate-blue`) and consumer (`consumer-orange`, `consumer-teal`, `consumer-purple`) themes.
|
||
|
||
## 📦 Scripts
|
||
|
||
- `npm run dev` – Start development server
|
||
- `npm run build` – Build for production
|
||
- `npm run preview` – Preview production build
|
||
- `npm run lint` – Lint code with ESLint
|
||
|
||
## 🔗 Backend Integration
|
||
|
||
The frontend expects the following backend endpoints:
|
||
|
||
- `GET /api/v1/translations?lang={code}` – Fetch translations
|
||
- `GET /api/v1/translations/all` – Fetch all translations
|
||
- `POST /api/v1/translations` – Update translations (admin)
|
||
|
||
## 🎨 Design System
|
||
|
||
### Corporate Theme
|
||
- Colors: Blue (#1e3a8a), Gray (#6b7280), Light (#f9fafb)
|
||
- Font: Inter (sans-serif)
|
||
- Layout: Sidebar navigation, data tables, analytics
|
||
|
||
### Consumer Theme
|
||
- Colors: Orange (#f97316), Teal (#0d9488), Purple (#7c3aed)
|
||
- Font: Inter (sans-serif) with playful elements
|
||
- Layout: Bento grid, cards, gradient backgrounds
|
||
|
||
## 📄 License
|
||
|
||
Proprietary – Service Finder Platform |