service-finder/frontend

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

docker build -t service-finder-frontend .

Run locally (with network)

docker run -p 8080:80 --network sf_net service-finder-frontend

Development (with hot reload)

cd frontend
npm install
npm run dev

🔧 Configuration

Environment Variables

Create .env file:

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