build 1

2026-03-28 01:06:30 -05:00
parent 796c374d38
commit ecb708790d
35 changed files with 2347 additions and 37 deletions
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en" class="dark">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Memer</title>
+    <link rel="icon" type="image/svg+xml" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🎭</text></svg>" />
+  </head>
+  <body class="bg-zinc-950 text-zinc-100 min-h-screen">
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -0,0 +1,28 @@
+{
+  "name": "memer-frontend",
+  "version": "1.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@tanstack/react-query": "^5.28.6",
+    "lucide-react": "^0.370.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-router-dom": "^6.22.3"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.1",
+    "@types/react-dom": "^18.3.0",
+    "@vitejs/plugin-react": "^4.2.1",
+    "autoprefixer": "^10.4.19",
+    "postcss": "^8.4.38",
+    "tailwindcss": "^3.4.3",
+    "typescript": "^5.4.5",
+    "vite": "^5.2.8"
+  }
+}
--- a/frontend/postcss.config.js
+++ b/frontend/postcss.config.js
@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -0,0 +1,11 @@
+import { Routes, Route, Navigate } from 'react-router-dom';
+import { Gallery } from './pages/Gallery';
+
+export default function App() {
+  return (
+    <Routes>
+      <Route path="/" element={<Gallery />} />
+      <Route path="*" element={<Navigate to="/" replace />} />
+    </Routes>
+  );
+}
--- a/frontend/src/api/client.ts
+++ b/frontend/src/api/client.ts
@@ -0,0 +1,101 @@
+export interface Meme {
+  id: string;
+  title: string;
+  description: string | null;
+  file_path: string;
+  file_name: string;
+  file_size: number;
+  mime_type: string;
+  width: number;
+  height: number;
+  parent_id: string | null;
+  created_at: string;
+  tags: string[];
+  children?: Meme[];
+}
+
+export interface Tag {
+  id: number;
+  name: string;
+  meme_count: number;
+}
+
+export interface MemesResponse {
+  memes: Meme[];
+  total: number;
+  page: number;
+  limit: number;
+}
+
+export interface ListParams {
+  tag?: string;
+  q?: string;
+  page?: number;
+  limit?: number;
+  parent_only?: boolean;
+}
+
+async function apiFetch<T>(url: string, init?: RequestInit): Promise<T> {
+  const res = await fetch(url, init);
+  if (!res.ok) {
+    const err = await res.json().catch(() => ({ error: res.statusText }));
+    throw new Error(err.error ?? res.statusText);
+  }
+  return res.json() as Promise<T>;
+}
+
+export const api = {
+  memes: {
+    list(params: ListParams = {}): Promise<MemesResponse> {
+      const qs = new URLSearchParams();
+      if (params.tag) qs.set('tag', params.tag);
+      if (params.q) qs.set('q', params.q);
+      if (params.page) qs.set('page', String(params.page));
+      if (params.limit) qs.set('limit', String(params.limit));
+      if (params.parent_only !== undefined) qs.set('parent_only', String(params.parent_only));
+      return apiFetch<MemesResponse>(`/api/memes?${qs}`);
+    },
+
+    get(id: string): Promise<Meme & { children: Meme[] }> {
+      return apiFetch(`/api/memes/${id}`);
+    },
+
+    upload(formData: FormData): Promise<Meme> {
+      return apiFetch('/api/memes', { method: 'POST', body: formData });
+    },
+
+    update(id: string, body: { title?: string; description?: string; tags?: string[] }): Promise<Meme> {
+      return apiFetch(`/api/memes/${id}`, {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(body),
+      });
+    },
+
+    delete(id: string): Promise<{ ok: boolean }> {
+      return apiFetch(`/api/memes/${id}`, { method: 'DELETE' });
+    },
+
+    rescale(id: string, body: { width?: number; height?: number; quality?: number; label?: string }): Promise<Meme> {
+      return apiFetch(`/api/memes/${id}/rescale`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(body),
+      });
+    },
+  },
+
+  tags: {
+    list(): Promise<Tag[]> {
+      return apiFetch('/api/tags');
+    },
+
+    delete(id: number): Promise<{ ok: boolean }> {
+      return apiFetch(`/api/tags/${id}`, { method: 'DELETE' });
+    },
+  },
+
+  imageUrl(filePath: string): string {
+    return `/images/${filePath}`;
+  },
+};
--- a/frontend/src/components/GalleryGrid.tsx
+++ b/frontend/src/components/GalleryGrid.tsx
@@ -0,0 +1,31 @@
+import type { Meme } from '../api/client';
+import { MemeCard } from './MemeCard';
+
+interface Props {
+  memes: Meme[];
+  onOpen: (meme: Meme) => void;
+  onShare: (meme: Meme) => void;
+}
+
+export function GalleryGrid({ memes, onOpen, onShare }: Props) {
+  if (memes.length === 0) {
+    return (
+      <div className="flex flex-col items-center justify-center py-32 text-center">
+        <div className="text-6xl mb-4">🎭</div>
+        <h2 className="text-xl font-semibold text-zinc-400 mb-2">No memes yet</h2>
+        <p className="text-zinc-600 text-sm">Upload your first meme to get started.</p>
+      </div>
+    );
+  }
+
+  return (
+    <div
+      className="columns-1 sm:columns-2 lg:columns-3 xl:columns-4 gap-3"
+      style={{ columnFill: 'balance' }}
+    >
+      {memes.map((meme) => (
+        <MemeCard key={meme.id} meme={meme} onOpen={onOpen} onShare={onShare} />
+      ))}
+    </div>
+  );
+}
--- a/frontend/src/components/MemeCard.tsx
+++ b/frontend/src/components/MemeCard.tsx
@@ -0,0 +1,104 @@
+import { useState } from 'react';
+import { Share2, Eye, Layers } from 'lucide-react';
+import type { Meme } from '../api/client';
+import { api } from '../api/client';
+
+interface Props {
+  meme: Meme;
+  onOpen: (meme: Meme) => void;
+  onShare: (meme: Meme) => void;
+}
+
+export function MemeCard({ meme, onOpen, onShare }: Props) {
+  const [loaded, setLoaded] = useState(false);
+  const [hovered, setHovered] = useState(false);
+
+  return (
+    <div
+      className="relative group break-inside-avoid mb-3 rounded-xl overflow-hidden bg-zinc-900 cursor-pointer shadow-lg hover:shadow-accent/20 hover:shadow-xl transition-shadow duration-300"
+      onMouseEnter={() => setHovered(true)}
+      onMouseLeave={() => setHovered(false)}
+      onClick={() => onOpen(meme)}
+    >
+      {/* Image */}
+      <img
+        src={api.imageUrl(meme.file_path)}
+        alt={meme.title}
+        loading="lazy"
+        onLoad={() => setLoaded(true)}
+        className={`w-full block transition-all duration-500 ${
+          loaded ? 'opacity-100' : 'opacity-0'
+        } ${hovered ? 'scale-[1.02]' : 'scale-100'} transition-transform duration-300`}
+      />
+
+      {/* Skeleton while loading */}
+      {!loaded && (
+        <div
+          className="absolute inset-0 bg-zinc-800 animate-pulse"
+          style={{ paddingTop: `${(meme.height / meme.width) * 100}%` }}
+        />
+      )}
+
+      {/* Hover overlay */}
+      <div
+        className={`absolute inset-0 bg-gradient-to-t from-zinc-950/90 via-zinc-950/40 to-transparent transition-opacity duration-200 ${
+          hovered ? 'opacity-100' : 'opacity-0'
+        }`}
+      >
+        <div className="absolute bottom-0 left-0 right-0 p-3">
+          <p className="text-sm font-semibold text-white truncate mb-2">{meme.title}</p>
+
+          {/* Tags */}
+          {meme.tags.length > 0 && (
+            <div className="flex flex-wrap gap-1 mb-2">
+              {meme.tags.slice(0, 3).map((tag) => (
+                <span
+                  key={tag}
+                  className="text-xs px-1.5 py-0.5 rounded bg-accent/30 text-purple-300"
+                >
+                  {tag}
+                </span>
+              ))}
+              {meme.tags.length > 3 && (
+                <span className="text-xs text-zinc-400">+{meme.tags.length - 3}</span>
+              )}
+            </div>
+          )}
+
+          <div className="flex gap-2">
+            <button
+              onClick={(e) => {
+                e.stopPropagation();
+                onOpen(meme);
+              }}
+              className="flex items-center gap-1 text-xs px-2 py-1 rounded-lg bg-white/10 hover:bg-white/20 text-white transition-colors"
+            >
+              <Eye size={12} />
+              View
+            </button>
+            <button
+              onClick={(e) => {
+                e.stopPropagation();
+                onShare(meme);
+              }}
+              className="flex items-center gap-1 text-xs px-2 py-1 rounded-lg bg-accent/30 hover:bg-accent/50 text-purple-200 transition-colors"
+            >
+              <Share2 size={12} />
+              Share
+            </button>
+          </div>
+        </div>
+      </div>
+
+      {/* Child indicator */}
+      {/* (shown from parent detail) — not needed on card itself */}
+
+      {/* Dimensions badge */}
+      <div className="absolute top-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity">
+        <span className="text-xs px-1.5 py-0.5 rounded bg-zinc-900/80 text-zinc-400">
+          {meme.width}×{meme.height}
+        </span>
+      </div>
+    </div>
+  );
+}
--- a/frontend/src/components/MemeDetail.tsx
+++ b/frontend/src/components/MemeDetail.tsx
@@ -0,0 +1,278 @@
+import { useState } from 'react';
+import { X, Minimize2, Trash2, Edit2, Check, Layers } from 'lucide-react';
+import { useMeme, useDeleteMeme, useUpdateMeme } from '../hooks/useMemes';
+import { SharePanel } from './SharePanel';
+import { RescaleModal } from './RescaleModal';
+import { api, type Meme } from '../api/client';
+
+interface Props {
+  memeId: string;
+  onClose: () => void;
+}
+
+function formatBytes(bytes: number): string {
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+  return `${(bytes / 1024 / 1024).toFixed(1)} MB`;
+}
+
+function formatDate(iso: string): string {
+  return new Date(iso).toLocaleDateString('en-US', {
+    year: 'numeric', month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit',
+  });
+}
+
+export function MemeDetail({ memeId, onClose }: Props) {
+  const { data, isLoading, refetch } = useMeme(memeId);
+  const deleteMeme = useDeleteMeme();
+  const updateMeme = useUpdateMeme();
+
+  const [editing, setEditing] = useState(false);
+  const [editTitle, setEditTitle] = useState('');
+  const [editDesc, setEditDesc] = useState('');
+  const [editTags, setEditTags] = useState('');
+  const [showRescale, setShowRescale] = useState(false);
+  const [activeChild, setActiveChild] = useState<Meme | null>(null);
+
+  const meme = data;
+  const displayMeme = activeChild ?? meme;
+
+  function startEdit() {
+    if (!meme) return;
+    setEditTitle(meme.title);
+    setEditDesc(meme.description ?? '');
+    setEditTags(meme.tags.join(', '));
+    setEditing(true);
+  }
+
+  async function saveEdit() {
+    if (!meme) return;
+    await updateMeme.mutateAsync({
+      id: meme.id,
+      title: editTitle,
+      description: editDesc || undefined,
+      tags: editTags.split(',').map((t) => t.trim()).filter(Boolean),
+    });
+    setEditing(false);
+  }
+
+  async function handleDelete() {
+    if (!meme) return;
+    if (!confirm(`Delete "${meme.title}"? This also removes all rescaled copies.`)) return;
+    await deleteMeme.mutateAsync(meme.id);
+    onClose();
+  }
+
+  if (isLoading) {
+    return (
+      <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/70">
+        <div className="w-10 h-10 border-2 border-accent border-t-transparent rounded-full animate-spin" />
+      </div>
+    );
+  }
+
+  if (!meme) return null;
+
+  return (
+    <>
+      <div
+        className="fixed inset-0 z-40 bg-black/80 animate-fade-in"
+        onClick={onClose}
+      />
+
+      <div className="fixed inset-4 md:inset-8 z-50 flex flex-col bg-zinc-900 rounded-2xl shadow-2xl border border-zinc-800 overflow-hidden animate-scale-in">
+        {/* Header */}
+        <div className="flex items-center justify-between px-5 py-4 border-b border-zinc-800 flex-shrink-0">
+          {editing ? (
+            <input
+              autoFocus
+              value={editTitle}
+              onChange={(e) => setEditTitle(e.target.value)}
+              className="flex-1 bg-zinc-800 border border-zinc-700 rounded-lg px-3 py-1.5 text-sm font-semibold focus:outline-none focus:border-accent mr-3"
+            />
+          ) : (
+            <h2 className="text-lg font-semibold truncate flex-1 mr-3">{meme.title}</h2>
+          )}
+          <div className="flex items-center gap-2 flex-shrink-0">
+            {editing ? (
+              <button
+                onClick={saveEdit}
+                disabled={updateMeme.isPending}
+                className="flex items-center gap-1 text-sm px-3 py-1.5 rounded-lg bg-accent hover:bg-accent-hover text-white transition-colors"
+              >
+                <Check size={14} /> Save
+              </button>
+            ) : (
+              <button
+                onClick={startEdit}
+                className="text-zinc-500 hover:text-zinc-300 transition-colors p-1"
+                title="Edit"
+              >
+                <Edit2 size={16} />
+              </button>
+            )}
+            {!meme.parent_id && (
+              <button
+                onClick={() => setShowRescale(true)}
+                className="flex items-center gap-1 text-sm px-3 py-1.5 rounded-lg bg-zinc-800 hover:bg-zinc-700 text-zinc-300 transition-colors"
+                title="Create rescaled copy"
+              >
+                <Minimize2 size={14} />
+                <span className="hidden sm:inline">Rescale</span>
+              </button>
+            )}
+            <button
+              onClick={handleDelete}
+              disabled={deleteMeme.isPending}
+              className="text-zinc-500 hover:text-red-400 transition-colors p-1"
+              title="Delete"
+            >
+              <Trash2 size={16} />
+            </button>
+            <button onClick={onClose} className="text-zinc-500 hover:text-zinc-300 transition-colors p-1">
+              <X size={20} />
+            </button>
+          </div>
+        </div>
+
+        {/* Body */}
+        <div className="flex flex-col md:flex-row flex-1 overflow-hidden">
+          {/* Image panel */}
+          <div className="flex-1 flex items-center justify-center bg-zinc-950 p-4 overflow-hidden">
+            {displayMeme && (
+              <img
+                key={displayMeme.id}
+                src={api.imageUrl(displayMeme.file_path)}
+                alt={displayMeme.title}
+                className="max-w-full max-h-full object-contain rounded-lg animate-fade-in"
+              />
+            )}
+          </div>
+
+          {/* Sidebar */}
+          <div className="md:w-80 border-t md:border-t-0 md:border-l border-zinc-800 flex flex-col overflow-y-auto">
+            <div className="p-5 space-y-5 flex-1">
+
+              {/* Share */}
+              {displayMeme && (
+                <section>
+                  <h3 className="text-xs font-semibold text-zinc-500 uppercase tracking-wider mb-2">Share</h3>
+                  <SharePanel meme={displayMeme} />
+                </section>
+              )}
+
+              {/* Description */}
+              <section>
+                <h3 className="text-xs font-semibold text-zinc-500 uppercase tracking-wider mb-2">Description</h3>
+                {editing ? (
+                  <textarea
+                    value={editDesc}
+                    onChange={(e) => setEditDesc(e.target.value)}
+                    rows={3}
+                    placeholder="Add a description…"
+                    className="w-full bg-zinc-800 border border-zinc-700 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-accent resize-none"
+                  />
+                ) : (
+                  <p className="text-sm text-zinc-400">{meme.description ?? 'No description.'}</p>
+                )}
+              </section>
+
+              {/* Tags */}
+              <section>
+                <h3 className="text-xs font-semibold text-zinc-500 uppercase tracking-wider mb-2">Tags</h3>
+                {editing ? (
+                  <input
+                    type="text"
+                    value={editTags}
+                    onChange={(e) => setEditTags(e.target.value)}
+                    placeholder="funny, reaction, wholesome"
+                    className="w-full bg-zinc-800 border border-zinc-700 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-accent"
+                  />
+                ) : (
+                  <div className="flex flex-wrap gap-1.5">
+                    {meme.tags.length > 0
+                      ? meme.tags.map((t) => (
+                          <span key={t} className="text-xs px-2 py-0.5 rounded-full bg-accent/20 text-purple-300">
+                            {t}
+                          </span>
+                        ))
+                      : <span className="text-sm text-zinc-600">No tags</span>
+                    }
+                  </div>
+                )}
+              </section>
+
+              {/* Metadata */}
+              <section>
+                <h3 className="text-xs font-semibold text-zinc-500 uppercase tracking-wider mb-2">Info</h3>
+                <dl className="space-y-1.5 text-sm">
+                  <div className="flex justify-between">
+                    <dt className="text-zinc-500">Dimensions</dt>
+                    <dd className="text-zinc-300">{meme.width} × {meme.height}</dd>
+                  </div>
+                  <div className="flex justify-between">
+                    <dt className="text-zinc-500">Size</dt>
+                    <dd className="text-zinc-300">{formatBytes(meme.file_size)}</dd>
+                  </div>
+                  <div className="flex justify-between">
+                    <dt className="text-zinc-500">Type</dt>
+                    <dd className="text-zinc-300">{meme.mime_type.replace('image/', '')}</dd>
+                  </div>
+                  <div className="flex justify-between">
+                    <dt className="text-zinc-500">Uploaded</dt>
+                    <dd className="text-zinc-300 text-right text-xs">{formatDate(meme.created_at)}</dd>
+                  </div>
+                </dl>
+              </section>
+
+              {/* Rescaled variants */}
+              {meme.children && meme.children.length > 0 && (
+                <section>
+                  <h3 className="text-xs font-semibold text-zinc-500 uppercase tracking-wider mb-2 flex items-center gap-1">
+                    <Layers size={12} /> Rescaled Copies ({meme.children.length})
+                  </h3>
+                  <div className="space-y-1.5">
+                    <button
+                      onClick={() => setActiveChild(null)}
+                      className={`w-full text-left text-xs px-3 py-2 rounded-lg transition-colors ${
+                        activeChild === null
+                          ? 'bg-accent/20 text-purple-300'
+                          : 'bg-zinc-800 text-zinc-400 hover:bg-zinc-700'
+                      }`}
+                    >
+                      Original — {meme.width}×{meme.height} ({formatBytes(meme.file_size)})
+                    </button>
+                    {meme.children.map((child) => (
+                      <button
+                        key={child.id}
+                        onClick={() => setActiveChild(activeChild?.id === child.id ? null : child)}
+                        className={`w-full text-left text-xs px-3 py-2 rounded-lg transition-colors ${
+                          activeChild?.id === child.id
+                            ? 'bg-accent/20 text-purple-300'
+                            : 'bg-zinc-800 text-zinc-400 hover:bg-zinc-700'
+                        }`}
+                      >
+                        {child.title.replace(meme.title, '').trim() || child.title} — {child.width}×{child.height} ({formatBytes(child.file_size)})
+                      </button>
+                    ))}
+                  </div>
+                </section>
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {showRescale && (
+        <RescaleModal
+          meme={meme}
+          onClose={() => setShowRescale(false)}
+          onDone={() => {
+            setShowRescale(false);
+            refetch();
+          }}
+        />
+      )}
+    </>
+  );
+}
--- a/frontend/src/components/RescaleModal.tsx
+++ b/frontend/src/components/RescaleModal.tsx
@@ -0,0 +1,131 @@
+import { useState } from 'react';
+import { X, Minimize2 } from 'lucide-react';
+import type { Meme } from '../api/client';
+import { useRescaleMeme } from '../hooks/useMemes';
+
+interface Props {
+  meme: Meme;
+  onClose: () => void;
+  onDone: () => void;
+}
+
+export function RescaleModal({ meme, onClose, onDone }: Props) {
+  const [width, setWidth] = useState('');
+  const [height, setHeight] = useState('');
+  const [quality, setQuality] = useState('85');
+  const [label, setLabel] = useState('');
+  const rescale = useRescaleMeme();
+
+  async function handleSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    if (!width && !height) return;
+
+    await rescale.mutateAsync({
+      id: meme.id,
+      width: width ? Number(width) : undefined,
+      height: height ? Number(height) : undefined,
+      quality: Number(quality),
+      label: label || undefined,
+    });
+    onDone();
+  }
+
+  const isGif = meme.mime_type === 'image/gif';
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/70 animate-fade-in">
+      <div className="bg-zinc-900 rounded-2xl shadow-2xl w-full max-w-md border border-zinc-800 animate-scale-in">
+        <div className="flex items-center justify-between p-5 border-b border-zinc-800">
+          <div className="flex items-center gap-2">
+            <Minimize2 size={18} className="text-accent" />
+            <h2 className="text-lg font-semibold">Rescale Meme</h2>
+          </div>
+          <button onClick={onClose} className="text-zinc-500 hover:text-zinc-300 transition-colors">
+            <X size={20} />
+          </button>
+        </div>
+
+        <form onSubmit={handleSubmit} className="p-5 space-y-4">
+          <p className="text-sm text-zinc-400">
+            Creates a new derived image. Original ({meme.width}×{meme.height}) is never modified.
+          </p>
+
+          <div className="grid grid-cols-2 gap-3">
+            <div>
+              <label className="block text-xs text-zinc-500 mb-1">Width (px)</label>
+              <input
+                type="number"
+                value={width}
+                onChange={(e) => setWidth(e.target.value)}
+                placeholder={String(meme.width)}
+                min={1}
+                className="w-full bg-zinc-800 border border-zinc-700 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-accent"
+              />
+            </div>
+            <div>
+              <label className="block text-xs text-zinc-500 mb-1">Height (px)</label>
+              <input
+                type="number"
+                value={height}
+                onChange={(e) => setHeight(e.target.value)}
+                placeholder={String(meme.height)}
+                min={1}
+                className="w-full bg-zinc-800 border border-zinc-700 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-accent"
+              />
+            </div>
+          </div>
+
+          <p className="text-xs text-zinc-500 -mt-1">
+            Aspect ratio is preserved automatically (fit: inside).
+          </p>
+
+          {!isGif && (
+            <div>
+              <label className="block text-xs text-zinc-500 mb-1">Quality ({quality}%)</label>
+              <input
+                type="range"
+                min={10}
+                max={100}
+                value={quality}
+                onChange={(e) => setQuality(e.target.value)}
+                className="w-full accent-purple-500"
+              />
+            </div>
+          )}
+
+          <div>
+            <label className="block text-xs text-zinc-500 mb-1">Label (optional)</label>
+            <input
+              type="text"
+              value={label}
+              onChange={(e) => setLabel(e.target.value)}
+              placeholder={`e.g. "thumb" or "${width || meme.width}w"`}
+              className="w-full bg-zinc-800 border border-zinc-700 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-accent"
+            />
+          </div>
+
+          {rescale.error && (
+            <p className="text-red-400 text-sm">{(rescale.error as Error).message}</p>
+          )}
+
+          <div className="flex gap-3 pt-1">
+            <button
+              type="button"
+              onClick={onClose}
+              className="flex-1 py-2 rounded-lg border border-zinc-700 text-sm text-zinc-400 hover:bg-zinc-800 transition-colors"
+            >
+              Cancel
+            </button>
+            <button
+              type="submit"
+              disabled={(!width && !height) || rescale.isPending}
+              className="flex-1 py-2 rounded-lg bg-accent hover:bg-accent-hover text-white text-sm font-medium transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+            >
+              {rescale.isPending ? 'Rescaling…' : 'Create Rescaled Copy'}
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+}
--- a/frontend/src/components/SharePanel.tsx
+++ b/frontend/src/components/SharePanel.tsx
@@ -0,0 +1,69 @@
+import { useState } from 'react';
+import { Copy, Check, Send, MessageSquare, Download } from 'lucide-react';
+import type { Meme } from '../api/client';
+import { api } from '../api/client';
+
+interface Props {
+  meme: Meme;
+}
+
+export function SharePanel({ meme }: Props) {
+  const [copied, setCopied] = useState(false);
+  const imageUrl = `${window.location.origin}${api.imageUrl(meme.file_path)}`;
+
+  async function copyLink() {
+    await navigator.clipboard.writeText(imageUrl);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2000);
+  }
+
+  const telegramUrl = `https://t.me/share/url?url=${encodeURIComponent(imageUrl)}&text=${encodeURIComponent(meme.title)}`;
+  const smsUrl = `sms:?body=${encodeURIComponent(imageUrl)}`;
+
+  return (
+    <div className="flex flex-wrap gap-2">
+      <button
+        onClick={copyLink}
+        className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-zinc-800 hover:bg-zinc-700 text-sm font-medium transition-colors"
+        title="Copy image link"
+      >
+        {copied ? (
+          <Check size={14} className="text-green-400" />
+        ) : (
+          <Copy size={14} className="text-zinc-400" />
+        )}
+        {copied ? 'Copied!' : 'Copy link'}
+      </button>
+
+      <a
+        href={telegramUrl}
+        target="_blank"
+        rel="noopener noreferrer"
+        className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-[#229ED9]/20 hover:bg-[#229ED9]/30 text-[#229ED9] text-sm font-medium transition-colors"
+        title="Share on Telegram"
+      >
+        <Send size={14} />
+        Telegram
+      </a>
+
+      <a
+        href={smsUrl}
+        className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-green-900/30 hover:bg-green-900/50 text-green-400 text-sm font-medium transition-colors"
+        title="Share via SMS"
+      >
+        <MessageSquare size={14} />
+        SMS
+      </a>
+
+      <a
+        href={api.imageUrl(meme.file_path)}
+        download={meme.file_name}
+        className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-zinc-800 hover:bg-zinc-700 text-zinc-300 text-sm font-medium transition-colors"
+        title="Download original"
+      >
+        <Download size={14} />
+        Download
+      </a>
+    </div>
+  );
+}
--- a/frontend/src/components/TagFilter.tsx
+++ b/frontend/src/components/TagFilter.tsx
@@ -0,0 +1,42 @@
+import { X } from 'lucide-react';
+import type { Tag } from '../api/client';
+
+interface Props {
+  tags: Tag[];
+  activeTag: string | null;
+  onSelect: (tag: string | null) => void;
+}
+
+export function TagFilter({ tags, activeTag, onSelect }: Props) {
+  if (tags.length === 0) return null;
+
+  return (
+    <div className="flex flex-wrap gap-2 items-center">
+      <button
+        onClick={() => onSelect(null)}
+        className={`text-sm px-3 py-1 rounded-full border transition-colors ${
+          activeTag === null
+            ? 'bg-accent text-white border-accent'
+            : 'border-zinc-700 text-zinc-400 hover:border-zinc-500 hover:text-zinc-300'
+        }`}
+      >
+        All
+      </button>
+      {tags.map((tag) => (
+        <button
+          key={tag.id}
+          onClick={() => onSelect(activeTag === tag.name ? null : tag.name)}
+          className={`flex items-center gap-1 text-sm px-3 py-1 rounded-full border transition-colors ${
+            activeTag === tag.name
+              ? 'bg-accent text-white border-accent'
+              : 'border-zinc-700 text-zinc-400 hover:border-zinc-500 hover:text-zinc-300'
+          }`}
+        >
+          {tag.name}
+          <span className="text-xs opacity-60">({tag.meme_count})</span>
+          {activeTag === tag.name && <X size={12} />}
+        </button>
+      ))}
+    </div>
+  );
+}
--- a/frontend/src/components/UploadModal.tsx
+++ b/frontend/src/components/UploadModal.tsx
@@ -0,0 +1,174 @@
+import { useState, useRef, useCallback } from 'react';
+import { X, Upload, ImagePlus } from 'lucide-react';
+import { useUploadMeme } from '../hooks/useMemes';
+
+interface Props {
+  onClose: () => void;
+}
+
+const ALLOWED = ['image/jpeg', 'image/png', 'image/gif', 'image/webp'];
+
+export function UploadModal({ onClose }: Props) {
+  const [files, setFiles] = useState<File[]>([]);
+  const [title, setTitle] = useState('');
+  const [description, setDescription] = useState('');
+  const [tags, setTags] = useState('');
+  const [dragging, setDragging] = useState(false);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const upload = useUploadMeme();
+
+  const addFiles = useCallback((incoming: FileList | File[]) => {
+    const valid = Array.from(incoming).filter((f) => ALLOWED.includes(f.type));
+    setFiles((prev) => [...prev, ...valid]);
+  }, []);
+
+  function onDrop(e: React.DragEvent) {
+    e.preventDefault();
+    setDragging(false);
+    addFiles(e.dataTransfer.files);
+  }
+
+  function removeFile(idx: number) {
+    setFiles((prev) => prev.filter((_, i) => i !== idx));
+  }
+
+  async function handleSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    if (files.length === 0) return;
+
+    for (const file of files) {
+      const fd = new FormData();
+      fd.append('file', file);
+      fd.append('title', title || file.name.replace(/\.[^.]+$/, ''));
+      if (description) fd.append('description', description);
+      if (tags) fd.append('tags', tags);
+      await upload.mutateAsync(fd);
+    }
+
+    onClose();
+  }
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/70 animate-fade-in">
+      <div className="bg-zinc-900 rounded-2xl shadow-2xl w-full max-w-lg border border-zinc-800 animate-scale-in">
+        {/* Header */}
+        <div className="flex items-center justify-between p-5 border-b border-zinc-800">
+          <div className="flex items-center gap-2">
+            <ImagePlus size={18} className="text-accent" />
+            <h2 className="text-lg font-semibold">Upload Memes</h2>
+          </div>
+          <button onClick={onClose} className="text-zinc-500 hover:text-zinc-300 transition-colors">
+            <X size={20} />
+          </button>
+        </div>
+
+        <form onSubmit={handleSubmit} className="p-5 space-y-4">
+          {/* Drop zone */}
+          <div
+            onDragOver={(e) => { e.preventDefault(); setDragging(true); }}
+            onDragLeave={() => setDragging(false)}
+            onDrop={onDrop}
+            onClick={() => inputRef.current?.click()}
+            className={`border-2 border-dashed rounded-xl p-8 text-center cursor-pointer transition-colors ${
+              dragging
+                ? 'border-accent bg-accent/10'
+                : 'border-zinc-700 hover:border-zinc-500 hover:bg-zinc-800/50'
+            }`}
+          >
+            <Upload size={28} className="mx-auto mb-2 text-zinc-500" />
+            <p className="text-sm text-zinc-400">
+              Drag & drop images here, or{' '}
+              <span className="text-accent">browse files</span>
+            </p>
+            <p className="text-xs text-zinc-600 mt-1">JPG, PNG, GIF, WebP — max 100 MB each</p>
+            <input
+              ref={inputRef}
+              type="file"
+              accept="image/jpeg,image/png,image/gif,image/webp"
+              multiple
+              className="hidden"
+              onChange={(e) => e.target.files && addFiles(e.target.files)}
+            />
+          </div>
+
+          {/* Selected files */}
+          {files.length > 0 && (
+            <div className="space-y-1 max-h-32 overflow-y-auto">
+              {files.map((f, i) => (
+                <div key={i} className="flex items-center justify-between text-sm px-3 py-1.5 rounded-lg bg-zinc-800">
+                  <span className="truncate text-zinc-300">{f.name}</span>
+                  <button
+                    type="button"
+                    onClick={() => removeFile(i)}
+                    className="ml-2 text-zinc-500 hover:text-red-400 transition-colors flex-shrink-0"
+                  >
+                    <X size={14} />
+                  </button>
+                </div>
+              ))}
+            </div>
+          )}
+
+          {/* Metadata */}
+          <div>
+            <label className="block text-xs text-zinc-500 mb-1">
+              Title {files.length > 1 && <span className="text-zinc-600">(applied to all)</span>}
+            </label>
+            <input
+              type="text"
+              value={title}
+              onChange={(e) => setTitle(e.target.value)}
+              placeholder={files[0]?.name.replace(/\.[^.]+$/, '') ?? 'Untitled'}
+              className="w-full bg-zinc-800 border border-zinc-700 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-accent"
+            />
+          </div>
+
+          <div>
+            <label className="block text-xs text-zinc-500 mb-1">Description (optional)</label>
+            <textarea
+              value={description}
+              onChange={(e) => setDescription(e.target.value)}
+              rows={2}
+              placeholder="What's this meme about?"
+              className="w-full bg-zinc-800 border border-zinc-700 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-accent resize-none"
+            />
+          </div>
+
+          <div>
+            <label className="block text-xs text-zinc-500 mb-1">Tags (comma-separated)</label>
+            <input
+              type="text"
+              value={tags}
+              onChange={(e) => setTags(e.target.value)}
+              placeholder="funny, reaction, wholesome"
+              className="w-full bg-zinc-800 border border-zinc-700 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-accent"
+            />
+          </div>
+
+          {upload.error && (
+            <p className="text-red-400 text-sm">{(upload.error as Error).message}</p>
+          )}
+
+          <div className="flex gap-3 pt-1">
+            <button
+              type="button"
+              onClick={onClose}
+              className="flex-1 py-2 rounded-lg border border-zinc-700 text-sm text-zinc-400 hover:bg-zinc-800 transition-colors"
+            >
+              Cancel
+            </button>
+            <button
+              type="submit"
+              disabled={files.length === 0 || upload.isPending}
+              className="flex-1 py-2 rounded-lg bg-accent hover:bg-accent-hover text-white text-sm font-medium transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+            >
+              {upload.isPending
+                ? 'Uploading…'
+                : `Upload ${files.length > 0 ? files.length : ''} Meme${files.length !== 1 ? 's' : ''}`}
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+}
--- a/frontend/src/hooks/useMemes.ts
+++ b/frontend/src/hooks/useMemes.ts
@@ -0,0 +1,78 @@
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import { api, type ListParams } from '../api/client';
+
+export function useMemes(params: ListParams = {}) {
+  return useQuery({
+    queryKey: ['memes', params],
+    queryFn: () => api.memes.list(params),
+  });
+}
+
+export function useMeme(id: string | null) {
+  return useQuery({
+    queryKey: ['meme', id],
+    queryFn: () => api.memes.get(id!),
+    enabled: !!id,
+  });
+}
+
+export function useTags() {
+  return useQuery({
+    queryKey: ['tags'],
+    queryFn: () => api.tags.list(),
+  });
+}
+
+export function useUploadMeme() {
+  const qc = useQueryClient();
+  return useMutation({
+    mutationFn: (formData: FormData) => api.memes.upload(formData),
+    onSuccess: () => {
+      qc.invalidateQueries({ queryKey: ['memes'] });
+      qc.invalidateQueries({ queryKey: ['tags'] });
+    },
+  });
+}
+
+export function useUpdateMeme() {
+  const qc = useQueryClient();
+  return useMutation({
+    mutationFn: ({ id, ...body }: { id: string; title?: string; description?: string; tags?: string[] }) =>
+      api.memes.update(id, body),
+    onSuccess: (_, vars) => {
+      qc.invalidateQueries({ queryKey: ['memes'] });
+      qc.invalidateQueries({ queryKey: ['meme', vars.id] });
+      qc.invalidateQueries({ queryKey: ['tags'] });
+    },
+  });
+}
+
+export function useDeleteMeme() {
+  const qc = useQueryClient();
+  return useMutation({
+    mutationFn: (id: string) => api.memes.delete(id),
+    onSuccess: () => {
+      qc.invalidateQueries({ queryKey: ['memes'] });
+      qc.invalidateQueries({ queryKey: ['tags'] });
+    },
+  });
+}
+
+export function useRescaleMeme() {
+  const qc = useQueryClient();
+  return useMutation({
+    mutationFn: ({
+      id,
+      ...body
+    }: {
+      id: string;
+      width?: number;
+      height?: number;
+      quality?: number;
+      label?: string;
+    }) => api.memes.rescale(id, body),
+    onSuccess: (_, vars) => {
+      qc.invalidateQueries({ queryKey: ['meme', vars.id] });
+    },
+  });
+}
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -0,0 +1,24 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  * {
+    box-sizing: border-box;
+  }
+
+  ::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+  }
+  ::-webkit-scrollbar-track {
+    background: transparent;
+  }
+  ::-webkit-scrollbar-thumb {
+    background: #3f3f46;
+    border-radius: 3px;
+  }
+  ::-webkit-scrollbar-thumb:hover {
+    background: #52525b;
+  }
+}
--- a/frontend/src/main.tsx
+++ b/frontend/src/main.tsx
@@ -0,0 +1,25 @@
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { BrowserRouter } from 'react-router-dom';
+import App from './App';
+import './index.css';
+
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      staleTime: 30_000,
+      retry: 1,
+    },
+  },
+});
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <QueryClientProvider client={queryClient}>
+      <BrowserRouter>
+        <App />
+      </BrowserRouter>
+    </QueryClientProvider>
+  </StrictMode>
+);
--- a/frontend/src/pages/Gallery.tsx
+++ b/frontend/src/pages/Gallery.tsx
@@ -0,0 +1,182 @@
+import { useState, useCallback } from 'react';
+import { Search, Upload as UploadIcon, X, Share2 } from 'lucide-react';
+import { useMemes, useTags } from '../hooks/useMemes';
+import { GalleryGrid } from '../components/GalleryGrid';
+import { MemeDetail } from '../components/MemeDetail';
+import { UploadModal } from '../components/UploadModal';
+import { SharePanel } from '../components/SharePanel';
+import type { Meme } from '../api/client';
+
+export function Gallery() {
+  const [activeTag, setActiveTag] = useState<string | null>(null);
+  const [search, setSearch] = useState('');
+  const [debouncedSearch, setDebouncedSearch] = useState('');
+  const [selectedMemeId, setSelectedMemeId] = useState<string | null>(null);
+  const [quickShareMeme, setQuickShareMeme] = useState<Meme | null>(null);
+  const [showUpload, setShowUpload] = useState(false);
+
+  // Debounce search
+  const [searchTimer, setSearchTimer] = useState<ReturnType<typeof setTimeout> | null>(null);
+  function handleSearchChange(val: string) {
+    setSearch(val);
+    if (searchTimer) clearTimeout(searchTimer);
+    const t = setTimeout(() => setDebouncedSearch(val), 300);
+    setSearchTimer(t);
+  }
+
+  const { data, isLoading, isError } = useMemes({
+    tag: activeTag ?? undefined,
+    q: debouncedSearch || undefined,
+    parent_only: true,
+  });
+
+  const { data: tags } = useTags();
+
+  const handleOpen = useCallback((meme: Meme) => {
+    setSelectedMemeId(meme.id);
+  }, []);
+
+  const handleShare = useCallback((meme: Meme) => {
+    setQuickShareMeme(meme);
+  }, []);
+
+  return (
+    <div className="min-h-screen bg-zinc-950">
+      {/* Topbar */}
+      <header className="sticky top-0 z-30 bg-zinc-950/80 backdrop-blur-md border-b border-zinc-800/60">
+        <div className="max-w-screen-2xl mx-auto px-4 py-3 flex items-center gap-3">
+          {/* Logo */}
+          <div className="flex items-center gap-2 mr-2 flex-shrink-0">
+            <span className="text-2xl">🎭</span>
+            <span className="font-bold text-lg tracking-tight hidden sm:block">Memer</span>
+          </div>
+
+          {/* Search */}
+          <div className="flex-1 relative max-w-md">
+            <Search size={15} className="absolute left-3 top-1/2 -translate-y-1/2 text-zinc-500 pointer-events-none" />
+            <input
+              type="text"
+              value={search}
+              onChange={(e) => handleSearchChange(e.target.value)}
+              placeholder="Search memes…"
+              className="w-full bg-zinc-900 border border-zinc-700 rounded-lg pl-8 pr-3 py-1.5 text-sm focus:outline-none focus:border-accent placeholder-zinc-600"
+            />
+            {search && (
+              <button
+                onClick={() => { setSearch(''); setDebouncedSearch(''); }}
+                className="absolute right-2 top-1/2 -translate-y-1/2 text-zinc-500 hover:text-zinc-300"
+              >
+                <X size={14} />
+              </button>
+            )}
+          </div>
+
+          <div className="ml-auto flex-shrink-0">
+            <button
+              onClick={() => setShowUpload(true)}
+              className="flex items-center gap-1.5 px-4 py-2 rounded-lg bg-accent hover:bg-accent-hover text-white text-sm font-medium transition-colors"
+            >
+              <UploadIcon size={15} />
+              <span className="hidden sm:inline">Upload</span>
+            </button>
+          </div>
+        </div>
+
+        {/* Tag filter strip */}
+        {tags && tags.length > 0 && (
+          <div className="max-w-screen-2xl mx-auto px-4 pb-2.5 flex gap-2 overflow-x-auto scrollbar-none">
+            <button
+              onClick={() => setActiveTag(null)}
+              className={`text-xs px-2.5 py-1 rounded-full border whitespace-nowrap transition-colors flex-shrink-0 ${
+                activeTag === null
+                  ? 'bg-accent text-white border-accent'
+                  : 'border-zinc-700 text-zinc-400 hover:border-zinc-500 hover:text-zinc-300'
+              }`}
+            >
+              All
+            </button>
+            {tags.map((tag) => (
+              <button
+                key={tag.id}
+                onClick={() => setActiveTag(activeTag === tag.name ? null : tag.name)}
+                className={`text-xs px-2.5 py-1 rounded-full border whitespace-nowrap transition-colors flex-shrink-0 ${
+                  activeTag === tag.name
+                    ? 'bg-accent text-white border-accent'
+                    : 'border-zinc-700 text-zinc-400 hover:border-zinc-500 hover:text-zinc-300'
+                }`}
+              >
+                {tag.name} <span className="opacity-50">({tag.meme_count})</span>
+              </button>
+            ))}
+          </div>
+        )}
+      </header>
+
+      {/* Gallery */}
+      <main className="max-w-screen-2xl mx-auto px-4 py-6">
+        {/* Status bar */}
+        <div className="flex items-center justify-between mb-4">
+          <p className="text-sm text-zinc-500">
+            {isLoading
+              ? 'Loading…'
+              : isError
+              ? 'Failed to load'
+              : `${data?.total ?? 0} meme${data?.total !== 1 ? 's' : ''}${activeTag ? ` tagged "${activeTag}"` : ''}${debouncedSearch ? ` matching "${debouncedSearch}"` : ''}`}
+          </p>
+        </div>
+
+        {isLoading ? (
+          <div className="columns-1 sm:columns-2 lg:columns-3 xl:columns-4 gap-3">
+            {Array.from({ length: 12 }).map((_, i) => (
+              <div
+                key={i}
+                className="break-inside-avoid mb-3 rounded-xl bg-zinc-900 animate-pulse"
+                style={{ height: `${120 + Math.random() * 200}px` }}
+              />
+            ))}
+          </div>
+        ) : isError ? (
+          <div className="text-center py-32 text-red-400">Failed to load memes.</div>
+        ) : (
+          <GalleryGrid
+            memes={data?.memes ?? []}
+            onOpen={handleOpen}
+            onShare={handleShare}
+          />
+        )}
+      </main>
+
+      {/* Meme detail modal */}
+      {selectedMemeId && (
+        <MemeDetail
+          memeId={selectedMemeId}
+          onClose={() => setSelectedMemeId(null)}
+        />
+      )}
+
+      {/* Quick share popover */}
+      {quickShareMeme && (
+        <div className="fixed inset-0 z-50 flex items-end sm:items-center justify-center p-4 bg-black/60 animate-fade-in">
+          <div className="bg-zinc-900 rounded-2xl border border-zinc-800 p-5 w-full max-w-sm shadow-2xl animate-scale-in">
+            <div className="flex items-center justify-between mb-3">
+              <div className="flex items-center gap-2">
+                <Share2 size={16} className="text-accent" />
+                <span className="font-semibold text-sm truncate">{quickShareMeme.title}</span>
+              </div>
+              <button
+                onClick={() => setQuickShareMeme(null)}
+                className="text-zinc-500 hover:text-zinc-300 transition-colors"
+              >
+                <X size={18} />
+              </button>
+            </div>
+            <SharePanel meme={quickShareMeme} />
+          </div>
+        </div>
+      )}
+
+      {/* Upload modal */}
+      {showUpload && <UploadModal onClose={() => setShowUpload(false)} />}
+    </div>
+  );
+}
--- a/frontend/tailwind.config.ts
+++ b/frontend/tailwind.config.ts
@@ -0,0 +1,32 @@
+import type { Config } from 'tailwindcss';
+
+export default {
+  content: ['./index.html', './src/**/*.{ts,tsx}'],
+  darkMode: 'class',
+  theme: {
+    extend: {
+      colors: {
+        accent: {
+          DEFAULT: '#a855f7',
+          hover: '#9333ea',
+          muted: '#7c3aed33',
+        },
+      },
+      animation: {
+        'fade-in': 'fadeIn 0.2s ease-out',
+        'scale-in': 'scaleIn 0.15s ease-out',
+      },
+      keyframes: {
+        fadeIn: {
+          from: { opacity: '0' },
+          to: { opacity: '1' },
+        },
+        scaleIn: {
+          from: { opacity: '0', transform: 'scale(0.95)' },
+          to: { opacity: '1', transform: 'scale(1)' },
+        },
+      },
+    },
+  },
+  plugins: [],
+} satisfies Config;
--- a/frontend/tsconfig.json
+++ b/frontend/tsconfig.json
@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "strict": true,
+    "noUnusedLocals": false,
+    "noUnusedParameters": false
+  },
+  "include": ["src"]
+}
--- a/frontend/vite.config.ts
+++ b/frontend/vite.config.ts
@@ -0,0 +1,16 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+export default defineConfig({
+  plugins: [react()],
+  server: {
+    proxy: {
+      '/api': 'http://localhost:3000',
+      '/images': 'http://localhost:3000',
+    },
+  },
+  build: {
+    outDir: '../backend/public',
+    emptyOutDir: true,
+  },
+});