Add complete frontend implementation and Docker deployment setup

- Implement React frontend with TypeScript and Tailwind CSS
- Add scrappbook.de-inspired UI design with photo galleries
- Implement authentication, photo viewing, and download features
- Add Docker Swarm configuration with Traefik reverse proxy
- Set up Drone CI/CD pipeline for automated deployments
- Add monitoring stack with Prometheus and Grafana
- Create comprehensive deployment documentation
- Add simple local development setup with docker-compose.local.yml

Features:
- Password-protected galleries with expiration warnings
- Responsive photo grid with lightbox viewer
- Bulk download functionality
- Hot reload development environment
- Email testing with Mailhog
- Production-ready deployment scripts

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

frontend/src/services/auth.service.ts

@@ -0,0 +1,35 @@
+import { api, setAuthToken, clearAuthToken } from '../config/api';
+import type { LoginResponse, GalleryAuthResponse } from '../types';
+
+export const authService = {
+  // Admin authentication
+  async adminLogin(username: string, password: string): Promise<LoginResponse> {
+    const response = await api.post<LoginResponse>('/api/auth/admin/login', {
+      username,
+      password,
+    });
+    
+    setAuthToken(response.data.token, true);
+    return response.data;
+  },
+
+  adminLogout() {
+    clearAuthToken(true);
+    window.location.href = '/admin/login';
+  },
+
+  // Gallery authentication
+  async verifyGalleryPassword(slug: string, password: string): Promise<GalleryAuthResponse> {
+    const response = await api.post<GalleryAuthResponse>('/api/auth/gallery/verify', {
+      slug,
+      password,
+    });
+    
+    setAuthToken(response.data.token, false);
+    return response.data;
+  },
+
+  galleryLogout() {
+    clearAuthToken(false);
+  },
+};

frontend/src/services/events.service.ts

@@ -0,0 +1,85 @@
+import { api } from '../config/api';
+import type { Event } from '../types';
+
+interface CreateEventData {
+  event_type: string;
+  event_name: string;
+  event_date: string;
+  host_email: string;
+  admin_email: string;
+  password: string;
+  welcome_message?: string;
+  color_theme?: string;
+  expires_at: string;
+}
+
+interface UpdateEventData {
+  welcome_message?: string;
+  color_theme?: string;
+  expires_at?: string;
+  is_active?: boolean;
+}
+
+interface EventsListResponse {
+  events: Event[];
+  total: number;
+  page: number;
+  limit: number;
+}
+
+export const eventsService = {
+  // Get all events (admin)
+  async getEvents(
+    page: number = 1,
+    limit: number = 20,
+    status?: 'active' | 'inactive' | 'archived'
+  ): Promise<EventsListResponse> {
+    const params = new URLSearchParams({
+      page: page.toString(),
+      limit: limit.toString(),
+    });
+    
+    if (status) {
+      params.append('status', status);
+    }
+
+    const response = await api.get<EventsListResponse>(`/api/admin/events?${params}`);
+    return response.data;
+  },
+
+  // Get single event details (admin)
+  async getEvent(id: number): Promise<Event> {
+    const response = await api.get<Event>(`/api/admin/events/${id}`);
+    return response.data;
+  },
+
+  // Create new event (admin)
+  async createEvent(data: CreateEventData): Promise<Event> {
+    const response = await api.post<Event>('/api/admin/events', data);
+    return response.data;
+  },
+
+  // Update event (admin)
+  async updateEvent(id: number, data: UpdateEventData): Promise<Event> {
+    const response = await api.patch<Event>(`/api/admin/events/${id}`, data);
+    return response.data;
+  },
+
+  // Delete/deactivate event (admin)
+  async deleteEvent(id: number): Promise<void> {
+    await api.delete(`/api/admin/events/${id}`);
+  },
+
+  // Force archive event (admin)
+  async archiveEvent(id: number): Promise<void> {
+    await api.post(`/api/admin/events/${id}/archive`);
+  },
+
+  // Extend event expiration (admin)
+  async extendExpiration(id: number, newExpiryDate: string): Promise<Event> {
+    const response = await api.patch<Event>(`/api/admin/events/${id}`, {
+      expires_at: newExpiryDate,
+    });
+    return response.data;
+  },
+};

frontend/src/services/gallery.service.ts

@@ -0,0 +1,56 @@
+import { api } from '../config/api';
+import type { GalleryInfo, GalleryData, GalleryStats } from '../types';
+
+export const galleryService = {
+  // Get basic gallery info (no auth required)
+  async getGalleryInfo(slug: string): Promise<GalleryInfo> {
+    const response = await api.get<GalleryInfo>(`/api/gallery/${slug}/info`);
+    return response.data;
+  },
+
+  // Get gallery photos (requires auth)
+  async getGalleryPhotos(slug: string): Promise<GalleryData> {
+    const response = await api.get<GalleryData>(`/api/gallery/${slug}/photos`);
+    return response.data;
+  },
+
+  // Download single photo
+  async downloadPhoto(slug: string, photoId: number, filename: string): Promise<void> {
+    const response = await api.get(`/api/gallery/${slug}/download/${photoId}`, {
+      responseType: 'blob',
+    });
+
+    // Create download link
+    const url = window.URL.createObjectURL(new Blob([response.data]));
+    const link = document.createElement('a');
+    link.href = url;
+    link.setAttribute('download', filename);
+    document.body.appendChild(link);
+    link.click();
+    link.remove();
+    window.URL.revokeObjectURL(url);
+  },
+
+  // Download all photos as ZIP
+  async downloadAllPhotos(slug: string): Promise<void> {
+    const response = await api.get(`/api/gallery/${slug}/download-all`, {
+      responseType: 'blob',
+    });
+
+    // Create download link
+    const url = window.URL.createObjectURL(new Blob([response.data]));
+    const link = document.createElement('a');
+    link.href = url;
+    link.setAttribute('download', `${slug}.zip`);
+    document.body.appendChild(link);
+    link.click();
+    link.remove();
+    window.URL.revokeObjectURL(url);
+  },
+
+  // Get gallery statistics
+  async getGalleryStats(slug: string): Promise<GalleryStats> {
+    const response = await api.get<GalleryStats>(`/api/gallery/${slug}/stats`);
+    return response.data;
+  },
+};

frontend/src/services/index.ts

@@ -0,0 +1,3 @@
+export { authService } from './auth.service';
+export { galleryService } from './gallery.service';
+export { eventsService } from './events.service';