2026.06.04 frontend építés közben

2026-06-04 07:26:22 +00:00
parent 7adf6cc3e3
commit 59a30ac428
3302 changed files with 24091 additions and 1771 deletions
--- a/frontend/README.md
+++ b/frontend/README.md
@@ -1,5 +1,132 @@
-# Vue 3 + Vite
+# Service Finder Frontend

-This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
+Modern Vue 3 frontend for the Service Finder platform with dual layout system (B2B/B2C), internationalization, and Docker deployment.

-Learn more about IDE Support for Vue in the [Vue Docs Scaling up Guide](https://vuejs.org/guide/scaling-up/tooling.html#ide-support).
+## 🚀 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