feat(frontend): add react spa with wishlist flows and public profile

2026-04-23 16:05:27 +03:00
parent 5f6a551b6c
commit 00f01611ed
44 changed files with 2166 additions and 0 deletions
--- a/apps/frontend/src/App.tsx
+++ b/apps/frontend/src/App.tsx
@@ -0,0 +1,34 @@
+import { useEffect } from 'react';
+import { RouterProvider } from 'react-router-dom';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { Toaster } from 'sonner';
+import { router } from './routes';
+import { useAuthStore } from './features/auth/authStore';
+
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      refetchOnWindowFocus: false,
+      retry: 1,
+    },
+  },
+});
+
+function AuthBoot({ children }: { children: React.ReactNode }) {
+  const init = useAuthStore((s) => s.init);
+  useEffect(() => {
+    void init();
+  }, [init]);
+  return <>{children}</>;
+}
+
+export function App() {
+  return (
+    <QueryClientProvider client={queryClient}>
+      <AuthBoot>
+        <RouterProvider router={router} />
+      </AuthBoot>
+      <Toaster position="top-center" richColors closeButton />
+    </QueryClientProvider>
+  );
+}
--- a/apps/frontend/src/components/Layout/AppShell.tsx
+++ b/apps/frontend/src/components/Layout/AppShell.tsx
@@ -0,0 +1,15 @@
+import { Outlet } from 'react-router-dom';
+import { Header } from './Header';
+import { Footer } from './Footer';
+
+export function AppShell() {
+  return (
+    <div className="flex min-h-screen flex-col">
+      <Header />
+      <main className="container-page flex-1 py-6 sm:py-10">
+        <Outlet />
+      </main>
+      <Footer />
+    </div>
+  );
+}
--- a/apps/frontend/src/components/Layout/Footer.tsx
+++ b/apps/frontend/src/components/Layout/Footer.tsx
@@ -0,0 +1,32 @@
+import { useQuery } from '@tanstack/react-query';
+import { Gift } from 'lucide-react';
+import { api } from '@/lib/api';
+import { FRONTEND_VERSION } from '@/lib/version';
+
+interface VersionInfo {
+  backend: string;
+}
+
+export function Footer() {
+  const { data } = useQuery({
+    queryKey: ['version'],
+    queryFn: () => api.get<VersionInfo>('/api/version'),
+    staleTime: 10 * 60 * 1000,
+  });
+
+  return (
+    <footer className="container-page mt-10 py-6 text-xs text-muted">
+      <div className="flex flex-col items-center justify-between gap-2 sm:flex-row">
+        <div className="flex items-center gap-2">
+          <Gift className="h-4 w-4" aria-hidden />
+          <span className="font-display text-sm">Family Wishlist</span>
+        </div>
+        <div className="flex items-center gap-3">
+          <span>frontend v{FRONTEND_VERSION}</span>
+          <span className="opacity-50">·</span>
+          <span>backend v{data?.backend ?? '...'}</span>
+        </div>
+      </div>
+    </footer>
+  );
+}
--- a/apps/frontend/src/components/Layout/Header.tsx
+++ b/apps/frontend/src/components/Layout/Header.tsx
@@ -0,0 +1,79 @@
+import { Link, NavLink, useNavigate } from 'react-router-dom';
+import { Archive, Gift, LogOut, Sparkles, Trash2, UserCog, CheckCircle2 } from 'lucide-react';
+import { Button } from '../ui/Button';
+import { useAuthStore } from '@/features/auth/authStore';
+import { cn } from '@/lib/cn';
+
+const links = [
+  { to: '/', label: 'Active', icon: Sparkles, end: true },
+  { to: '/completed', label: 'Fulfilled', icon: CheckCircle2 },
+  { to: '/archive', label: 'Archive', icon: Archive },
+  { to: '/trash', label: 'Trash', icon: Trash2 },
+];
+
+export function Header() {
+  const user = useAuthStore((s) => s.user);
+  const logout = useAuthStore((s) => s.logout);
+  const navigate = useNavigate();
+
+  if (!user) return null;
+
+  return (
+    <header className="container-page pt-6">
+      <div className="flex flex-wrap items-center justify-between gap-3 rounded-lg border border-border bg-surface/80 px-4 py-3 backdrop-blur">
+        <Link to="/" className="flex items-center gap-2">
+          <span className="inline-flex h-9 w-9 items-center justify-center rounded-md bg-primary text-primary-foreground shadow-card">
+            <Gift className="h-4 w-4" />
+          </span>
+          <div>
+            <div className="font-display text-lg leading-tight">Family Wishlist</div>
+            <div className="text-xs text-muted">
+              signed in as <span className="font-medium text-ink">{user.displayName}</span>
+            </div>
+          </div>
+        </Link>
+
+        <nav className="flex flex-wrap items-center gap-1">
+          {links.map((l) => (
+            <NavLink
+              key={l.to}
+              to={l.to}
+              end={l.end}
+              className={({ isActive }) =>
+                cn(
+                  'inline-flex items-center gap-1.5 rounded-md px-3 py-1.5 text-sm font-medium transition-colors',
+                  isActive ? 'bg-primary text-primary-foreground shadow-card' : 'text-ink hover:bg-ink/5',
+                )
+              }
+            >
+              <l.icon className="h-4 w-4" />
+              {l.label}
+            </NavLink>
+          ))}
+        </nav>
+
+        <div className="flex items-center gap-1">
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={() => navigate('/settings')}
+            title="Profile settings"
+          >
+            <UserCog className="h-4 w-4" />
+            Profile
+          </Button>
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={() => {
+              void logout().then(() => navigate('/login'));
+            }}
+          >
+            <LogOut className="h-4 w-4" />
+            Log out
+          </Button>
+        </div>
+      </div>
+    </header>
+  );
+}
--- a/apps/frontend/src/components/Layout/ProtectedRoute.tsx
+++ b/apps/frontend/src/components/Layout/ProtectedRoute.tsx
@@ -0,0 +1,17 @@
+import { Navigate, useLocation } from 'react-router-dom';
+import type { ReactNode } from 'react';
+import { useAuthStore } from '@/features/auth/authStore';
+
+export function ProtectedRoute({ children }: { children: ReactNode }) {
+  const { user, status } = useAuthStore();
+  const location = useLocation();
+  if (status !== 'ready') {
+    return (
+      <div className="flex min-h-[50vh] items-center justify-center text-muted">Loading...</div>
+    );
+  }
+  if (!user) {
+    return <Navigate to="/login" replace state={{ from: location }} />;
+  }
+  return <>{children}</>;
+}
--- a/apps/frontend/src/components/WishBadges/WishBadges.tsx
+++ b/apps/frontend/src/components/WishBadges/WishBadges.tsx
@@ -0,0 +1,51 @@
+import { Check, Sparkles, Archive, Trash2 } from 'lucide-react';
+import type { Wish } from '@family-wishlist/shared';
+import { cn } from '@/lib/cn';
+
+interface Props {
+  wish: Wish & { isNewForOwner?: boolean };
+  view: 'owner' | 'guest';
+  className?: string;
+}
+
+export function WishBadges({ wish, view, className }: Props) {
+  const badges: JSX.Element[] = [];
+
+  const isNew =
+    view === 'owner' ? wish.isNewForOwner === true : wish.isNewForGuest === true;
+  if (isNew && wish.status === 'ACTIVE') {
+    badges.push(
+      <span className="wish-badge wish-badge--new" key="new">
+        <Sparkles className="h-3 w-3" aria-hidden />
+        new
+      </span>,
+    );
+  }
+  if (wish.status === 'COMPLETED') {
+    badges.push(
+      <span className="wish-badge wish-badge--completed" key="done">
+        <Check className="h-3 w-3" aria-hidden />
+        fulfilled
+      </span>,
+    );
+  }
+  if (wish.status === 'ARCHIVED' && view === 'owner') {
+    badges.push(
+      <span className="wish-badge wish-badge--archived" key="arch">
+        <Archive className="h-3 w-3" aria-hidden />
+        archived
+      </span>,
+    );
+  }
+  if (wish.status === 'DELETED' && view === 'owner') {
+    badges.push(
+      <span className="wish-badge wish-badge--deleted" key="del">
+        <Trash2 className="h-3 w-3" aria-hidden />
+        trash
+      </span>,
+    );
+  }
+
+  if (badges.length === 0) return null;
+  return <div className={cn('flex flex-wrap gap-1.5', className)}>{badges}</div>;
+}
--- a/apps/frontend/src/components/WishCard/WishCard.tsx
+++ b/apps/frontend/src/components/WishCard/WishCard.tsx
@@ -0,0 +1,191 @@
+import { memo, useState } from 'react';
+import type { Wish } from '@family-wishlist/shared';
+import {
+  Archive,
+  CheckCircle2,
+  Copy,
+  ExternalLink,
+  MoreHorizontal,
+  Pencil,
+  RotateCcw,
+  Trash2,
+} from 'lucide-react';
+import { WishBadges } from '../WishBadges/WishBadges';
+import { Button } from '../ui/Button';
+import { cn } from '@/lib/cn';
+import { formatPrice } from '@/lib/format';
+
+export type WishCardView = 'owner' | 'guest';
+
+export interface WishCardAction {
+  key: string;
+  icon: React.ComponentType<{ className?: string }>;
+  label: string;
+  onClick: () => void;
+  danger?: boolean;
+}
+
+interface WishCardProps {
+  wish: Wish & { isNewForOwner?: boolean };
+  view: WishCardView;
+  onEdit?: () => void;
+  onArchive?: () => void;
+  onComplete?: () => void;
+  onRestore?: () => void;
+  onDuplicate?: () => void;
+  onDelete?: () => void;
+  footer?: React.ReactNode;
+}
+
+function WishCardInner({
+  wish,
+  view,
+  onEdit,
+  onArchive,
+  onComplete,
+  onRestore,
+  onDuplicate,
+  onDelete,
+  footer,
+}: WishCardProps) {
+  const [menuOpen, setMenuOpen] = useState(false);
+  const completed = wish.status === 'COMPLETED';
+  const priceLabel = formatPrice(wish.price, wish.currency);
+  const imageSrc = wish.imageUrl ?? '/default-gift.svg';
+
+  const actions: WishCardAction[] = [];
+  if (view === 'owner') {
+    if (wish.status === 'ACTIVE') {
+      if (onEdit) actions.push({ key: 'edit', icon: Pencil, label: 'Edit', onClick: onEdit });
+      if (onComplete)
+        actions.push({
+          key: 'complete',
+          icon: CheckCircle2,
+          label: 'Mark fulfilled',
+          onClick: onComplete,
+        });
+      if (onArchive)
+        actions.push({ key: 'archive', icon: Archive, label: 'Archive', onClick: onArchive });
+      if (onDelete)
+        actions.push({
+          key: 'delete',
+          icon: Trash2,
+          label: 'Delete',
+          onClick: onDelete,
+          danger: true,
+        });
+    } else if (wish.status === 'ARCHIVED') {
+      if (onRestore)
+        actions.push({ key: 'restore', icon: RotateCcw, label: 'Restore', onClick: onRestore });
+      if (onDelete)
+        actions.push({
+          key: 'delete',
+          icon: Trash2,
+          label: 'Delete',
+          onClick: onDelete,
+          danger: true,
+        });
+    } else if (wish.status === 'COMPLETED') {
+      if (onDuplicate)
+        actions.push({
+          key: 'duplicate',
+          icon: Copy,
+          label: 'Create copy as new',
+          onClick: onDuplicate,
+        });
+      if (onDelete)
+        actions.push({
+          key: 'delete',
+          icon: Trash2,
+          label: 'Delete',
+          onClick: onDelete,
+          danger: true,
+        });
+    } else if (wish.status === 'DELETED') {
+      if (onRestore)
+        actions.push({ key: 'restore', icon: RotateCcw, label: 'Restore', onClick: onRestore });
+    }
+  }
+
+  return (
+    <article className={cn('wish-card', completed && 'wish-card--completed')}>
+      <div className="wish-card__image-wrap">
+        <img
+          className="wish-card__image"
+          src={imageSrc}
+          alt={wish.title}
+          loading="lazy"
+          onError={(e) => {
+            (e.currentTarget as HTMLImageElement).src = '/default-gift.svg';
+          }}
+        />
+        <div className="absolute left-3 top-3">
+          <WishBadges wish={wish} view={view} />
+        </div>
+        {actions.length > 0 && (
+          <div className="absolute right-3 top-3">
+            <div className="relative">
+              <Button
+                variant="secondary"
+                size="icon"
+                aria-label="Actions"
+                onClick={() => setMenuOpen((v) => !v)}
+              >
+                <MoreHorizontal className="h-4 w-4" />
+              </Button>
+              {menuOpen && (
+                <>
+                  <div
+                    className="fixed inset-0 z-10"
+                    onClick={() => setMenuOpen(false)}
+                    aria-hidden
+                  />
+                  <div className="absolute right-0 z-20 mt-2 w-48 overflow-hidden rounded-md border border-border bg-surface shadow-pop">
+                    {actions.map((a) => (
+                      <button
+                        key={a.key}
+                        type="button"
+                        onClick={() => {
+                          setMenuOpen(false);
+                          a.onClick();
+                        }}
+                        className={cn(
+                          'flex w-full items-center gap-2 px-3 py-2 text-left text-sm transition-colors hover:bg-surface-muted',
+                          a.danger && 'text-danger',
+                        )}
+                      >
+                        <a.icon className="h-4 w-4" />
+                        {a.label}
+                      </button>
+                    ))}
+                  </div>
+                </>
+              )}
+            </div>
+          </div>
+        )}
+      </div>
+      <div className="wish-card__body">
+        <h3 className="wish-card__title">{wish.title}</h3>
+        <div className="flex items-center gap-2">
+          {priceLabel && <span className="wish-card__price">{priceLabel}</span>}
+          {wish.url && (
+            <a
+              href={wish.url}
+              target="_blank"
+              rel="noreferrer noopener"
+              className="inline-flex items-center gap-1 text-xs font-medium text-primary hover:text-primary-600"
+            >
+              <ExternalLink className="h-3 w-3" />
+              open link
+            </a>
+          )}
+        </div>
+        {wish.comment && <p className="wish-card__comment">{wish.comment}</p>}
+        {footer}
+      </div>
+    </article>
+  );
+}
+
+export const WishCard = memo(WishCardInner);
--- a/apps/frontend/src/components/WishForm/WishForm.tsx
+++ b/apps/frontend/src/components/WishForm/WishForm.tsx
@@ -0,0 +1,197 @@
+import { useEffect, useRef, useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { createWishSchema, type CreateWishInput, type Wish } from '@family-wishlist/shared';
+import { Button } from '../ui/Button';
+import { Input } from '../ui/Input';
+import { Textarea } from '../ui/Textarea';
+import { Label } from '../ui/Label';
+import { Modal } from '../ui/Modal';
+import { ImageIcon, Loader2, RefreshCcw, Trash2, Upload } from 'lucide-react';
+import {
+  useCreateWish,
+  useRefreshOg,
+  useResetWishImage,
+  useUpdateWish,
+  useUploadWishImage,
+} from '@/features/wishes/wishes.hooks';
+
+interface Props {
+  open: boolean;
+  mode: 'create' | 'edit';
+  initial?: Wish;
+  onClose: () => void;
+}
+
+export function WishForm({ open, mode, initial, onClose }: Props) {
+  const create = useCreateWish();
+  const update = useUpdateWish();
+  const upload = useUploadWishImage();
+  const refreshOg = useRefreshOg();
+  const resetImage = useResetWishImage();
+
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const [pendingId, setPendingId] = useState<string | null>(null);
+
+  const {
+    register,
+    handleSubmit,
+    reset,
+    formState: { errors, isSubmitting },
+  } = useForm<CreateWishInput>({
+    resolver: zodResolver(createWishSchema),
+    defaultValues: {
+      title: initial?.title ?? '',
+      price: initial?.price ?? '',
+      currency: initial?.currency ?? 'RUB',
+      url: initial?.url ?? '',
+      comment: initial?.comment ?? '',
+    },
+  });
+
+  useEffect(() => {
+    if (!open) return;
+    reset({
+      title: initial?.title ?? '',
+      price: initial?.price ?? '',
+      currency: initial?.currency ?? 'RUB',
+      url: initial?.url ?? '',
+      comment: initial?.comment ?? '',
+    });
+    setPendingId(initial?.id ?? null);
+  }, [open, initial, reset]);
+
+  const submit = handleSubmit(async (values) => {
+    if (mode === 'create') {
+      const created = await create.mutateAsync(values);
+      setPendingId(created.id);
+    } else if (initial) {
+      await update.mutateAsync({ id: initial.id, input: values });
+    }
+    onClose();
+  });
+
+  const activeId = pendingId ?? initial?.id ?? null;
+  const canEditImage = activeId != null;
+
+  return (
+    <Modal
+      open={open}
+      onClose={onClose}
+      title={mode === 'create' ? 'Add a wish' : 'Edit wish'}
+      description={
+        mode === 'create'
+          ? 'Tell us what you want. A link helps us grab a preview image automatically.'
+          : 'Update the details of your wish.'
+      }
+      size="lg"
+      footer={
+        <>
+          <Button variant="ghost" onClick={onClose}>
+            Cancel
+          </Button>
+          <Button type="submit" form="wish-form" disabled={isSubmitting}>
+            {isSubmitting && <Loader2 className="h-4 w-4 animate-spin" />}
+            {mode === 'create' ? 'Add wish' : 'Save'}
+          </Button>
+        </>
+      }
+    >
+      <form id="wish-form" className="grid gap-4" onSubmit={submit}>
+        <div className="field">
+          <Label htmlFor="title">Title</Label>
+          <Input id="title" placeholder="Moka pot, size 3" {...register('title')} />
+          {errors.title && <span className="field__error">{errors.title.message}</span>}
+        </div>
+
+        <div className="grid gap-4 sm:grid-cols-[1fr_auto]">
+          <div className="field">
+            <Label htmlFor="price">Price (optional)</Label>
+            <Input id="price" placeholder="e.g. 2490" inputMode="decimal" {...register('price')} />
+            {errors.price && <span className="field__error">{errors.price.message as string}</span>}
+          </div>
+          <div className="field">
+            <Label htmlFor="currency">Currency</Label>
+            <Input id="currency" maxLength={3} className="uppercase w-24" {...register('currency')} />
+          </div>
+        </div>
+
+        <div className="field">
+          <Label htmlFor="url">Link (optional)</Label>
+          <Input id="url" type="url" placeholder="https://..." {...register('url')} />
+          {errors.url && <span className="field__error">{errors.url.message as string}</span>}
+          <p className="text-xs text-muted">
+            We will try to pull a preview image from the link after saving.
+          </p>
+        </div>
+
+        <div className="field">
+          <Label htmlFor="comment">Comment (optional)</Label>
+          <Textarea
+            id="comment"
+            rows={3}
+            placeholder="Size / color / notes..."
+            {...register('comment')}
+          />
+        </div>
+      </form>
+
+      {canEditImage && activeId && (
+        <section className="mt-6 rounded-md border border-border bg-surface-muted p-4">
+          <div className="mb-3 flex items-center gap-2 text-sm font-medium text-ink">
+            <ImageIcon className="h-4 w-4" />
+            Image
+          </div>
+          <div className="flex flex-wrap items-center gap-2">
+            <input
+              ref={fileInputRef}
+              type="file"
+              accept="image/jpeg,image/png,image/webp,image/gif"
+              className="hidden"
+              onChange={(e) => {
+                const file = e.target.files?.[0];
+                if (file) void upload.mutateAsync({ id: activeId, file });
+                e.currentTarget.value = '';
+              }}
+            />
+            <Button
+              variant="secondary"
+              size="sm"
+              onClick={() => fileInputRef.current?.click()}
+              disabled={upload.isPending}
+            >
+              {upload.isPending ? (
+                <Loader2 className="h-4 w-4 animate-spin" />
+              ) : (
+                <Upload className="h-4 w-4" />
+              )}
+              Upload custom
+            </Button>
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() => void refreshOg.mutateAsync(activeId)}
+              disabled={refreshOg.isPending}
+            >
+              {refreshOg.isPending ? (
+                <Loader2 className="h-4 w-4 animate-spin" />
+              ) : (
+                <RefreshCcw className="h-4 w-4" />
+              )}
+              Refresh from link
+            </Button>
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={() => void resetImage.mutateAsync(activeId)}
+              disabled={resetImage.isPending}
+            >
+              <Trash2 className="h-4 w-4" />
+              Reset to default
+            </Button>
+          </div>
+        </section>
+      )}
+    </Modal>
+  );
+}
--- a/apps/frontend/src/components/ui/Button.tsx
+++ b/apps/frontend/src/components/ui/Button.tsx
@@ -0,0 +1,42 @@
+import { forwardRef, type ButtonHTMLAttributes } from 'react';
+import { cn } from '@/lib/cn';
+
+type Variant = 'primary' | 'secondary' | 'ghost' | 'danger' | 'outline';
+type Size = 'sm' | 'md' | 'lg' | 'icon';
+
+const base =
+  'inline-flex items-center justify-center gap-2 rounded-md font-medium transition-all duration-150 focus:outline-none focus-visible:shadow-focus disabled:cursor-not-allowed disabled:opacity-50';
+
+const variants: Record<Variant, string> = {
+  primary: 'bg-primary text-primary-foreground hover:bg-primary-600 shadow-card',
+  secondary: 'bg-surface text-ink shadow-card hover:bg-surface-muted',
+  ghost: 'text-ink hover:bg-ink/5',
+  outline: 'border border-border bg-surface text-ink hover:bg-surface-muted',
+  danger: 'bg-danger text-white hover:brightness-95 shadow-card',
+};
+
+const sizes: Record<Size, string> = {
+  sm: 'h-8 px-3 text-sm',
+  md: 'h-10 px-4 text-sm',
+  lg: 'h-12 px-6 text-base',
+  icon: 'h-9 w-9',
+};
+
+export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: Variant;
+  size?: Size;
+}
+
+export const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button(
+  { className, variant = 'primary', size = 'md', type = 'button', ...rest },
+  ref,
+) {
+  return (
+    <button
+      ref={ref}
+      type={type}
+      className={cn(base, variants[variant], sizes[size], className)}
+      {...rest}
+    />
+  );
+});
--- a/apps/frontend/src/components/ui/Input.tsx
+++ b/apps/frontend/src/components/ui/Input.tsx
@@ -0,0 +1,8 @@
+import { forwardRef, type InputHTMLAttributes } from 'react';
+import { cn } from '@/lib/cn';
+
+export const Input = forwardRef<HTMLInputElement, InputHTMLAttributes<HTMLInputElement>>(
+  function Input({ className, ...rest }, ref) {
+    return <input ref={ref} className={cn('field__input', className)} {...rest} />;
+  },
+);
--- a/apps/frontend/src/components/ui/Label.tsx
+++ b/apps/frontend/src/components/ui/Label.tsx
@@ -0,0 +1,6 @@
+import type { LabelHTMLAttributes } from 'react';
+import { cn } from '@/lib/cn';
+
+export function Label({ className, ...rest }: LabelHTMLAttributes<HTMLLabelElement>) {
+  return <label className={cn('field__label', className)} {...rest} />;
+}
--- a/apps/frontend/src/components/ui/Modal.tsx
+++ b/apps/frontend/src/components/ui/Modal.tsx
@@ -0,0 +1,78 @@
+import { useEffect, type ReactNode } from 'react';
+import { createPortal } from 'react-dom';
+import { X } from 'lucide-react';
+import { cn } from '@/lib/cn';
+import { Button } from './Button';
+
+interface ModalProps {
+  open: boolean;
+  onClose: () => void;
+  title: ReactNode;
+  description?: ReactNode;
+  children: ReactNode;
+  footer?: ReactNode;
+  size?: 'md' | 'lg';
+}
+
+export function Modal({
+  open,
+  onClose,
+  title,
+  description,
+  children,
+  footer,
+  size = 'md',
+}: ModalProps) {
+  useEffect(() => {
+    if (!open) return;
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') onClose();
+    };
+    window.addEventListener('keydown', onKey);
+    const prev = document.body.style.overflow;
+    document.body.style.overflow = 'hidden';
+    return () => {
+      window.removeEventListener('keydown', onKey);
+      document.body.style.overflow = prev;
+    };
+  }, [open, onClose]);
+
+  if (!open) return null;
+
+  return createPortal(
+    <div className="fixed inset-0 z-50 flex items-end justify-center p-0 sm:items-center sm:p-6">
+      <div
+        className="absolute inset-0 bg-ink/40 backdrop-blur-sm animate-fade-in-up"
+        onClick={onClose}
+        aria-hidden
+      />
+      <div
+        role="dialog"
+        aria-modal="true"
+        className={cn(
+          'relative w-full bg-surface shadow-pop animate-fade-in-up',
+          'rounded-t-xl sm:rounded-xl',
+          size === 'md' ? 'sm:max-w-lg' : 'sm:max-w-2xl',
+          'max-h-[90vh] overflow-hidden flex flex-col',
+        )}
+      >
+        <header className="flex items-start justify-between gap-4 border-b border-border px-5 py-4">
+          <div className="min-w-0">
+            <h2 className="text-lg font-semibold text-ink">{title}</h2>
+            {description && <p className="mt-1 text-sm text-muted">{description}</p>}
+          </div>
+          <Button variant="ghost" size="icon" onClick={onClose} aria-label="Close">
+            <X className="h-5 w-5" />
+          </Button>
+        </header>
+        <div className="overflow-y-auto px-5 py-5">{children}</div>
+        {footer && (
+          <footer className="flex items-center justify-end gap-2 border-t border-border px-5 py-4">
+            {footer}
+          </footer>
+        )}
+      </div>
+    </div>,
+    document.body,
+  );
+}
--- a/apps/frontend/src/components/ui/Textarea.tsx
+++ b/apps/frontend/src/components/ui/Textarea.tsx
@@ -0,0 +1,16 @@
+import { forwardRef, type TextareaHTMLAttributes } from 'react';
+import { cn } from '@/lib/cn';
+
+export const Textarea = forwardRef<
+  HTMLTextAreaElement,
+  TextareaHTMLAttributes<HTMLTextAreaElement>
+>(function Textarea({ className, rows = 3, ...rest }, ref) {
+  return (
+    <textarea
+      ref={ref}
+      rows={rows}
+      className={cn('field__textarea', className)}
+      {...rest}
+    />
+  );
+});
--- a/apps/frontend/src/features/auth/authStore.ts
+++ b/apps/frontend/src/features/auth/authStore.ts
@@ -0,0 +1,49 @@
+import { create } from 'zustand';
+import type { AuthUser } from '@family-wishlist/shared';
+import { api, ApiError } from '@/lib/api';
+
+interface AuthState {
+  user: AuthUser | null;
+  status: 'idle' | 'loading' | 'ready';
+  init: () => Promise<void>;
+  login: (username: string, password: string) => Promise<void>;
+  logout: () => Promise<void>;
+  refresh: () => Promise<void>;
+}
+
+export const useAuthStore = create<AuthState>((set) => ({
+  user: null,
+  status: 'idle',
+  init: async () => {
+    set({ status: 'loading' });
+    try {
+      const user = await api.get<AuthUser>('/api/auth/me');
+      set({ user, status: 'ready' });
+    } catch (err) {
+      if (err instanceof ApiError && err.status === 401) {
+        set({ user: null, status: 'ready' });
+        return;
+      }
+      set({ user: null, status: 'ready' });
+    }
+  },
+  login: async (username, password) => {
+    const user = await api.post<AuthUser>('/api/auth/login', { username, password });
+    set({ user });
+  },
+  logout: async () => {
+    try {
+      await api.post('/api/auth/logout');
+    } finally {
+      set({ user: null });
+    }
+  },
+  refresh: async () => {
+    try {
+      const user = await api.get<AuthUser>('/api/auth/me');
+      set({ user });
+    } catch {
+      set({ user: null });
+    }
+  },
+}));
--- a/apps/frontend/src/features/wishes/wishes.api.ts
+++ b/apps/frontend/src/features/wishes/wishes.api.ts
@@ -0,0 +1,41 @@
+import type {
+  CreateWishInput,
+  UpdateWishInput,
+  Wish,
+  WishStatus,
+} from '@family-wishlist/shared';
+import { api } from '@/lib/api';
+
+export type WishWithOwnerBadge = Wish & { isNewForOwner?: boolean };
+
+export type OwnerStatus = 'active' | 'archived' | 'completed' | 'deleted';
+
+export const wishesApi = {
+  list: (status: OwnerStatus) =>
+    api.get<WishWithOwnerBadge[]>(`/api/wishes?status=${status}`),
+
+  get: (id: string) => api.get<Wish>(`/api/wishes/${id}`),
+
+  create: (input: CreateWishInput) => api.post<Wish, CreateWishInput>('/api/wishes', input),
+
+  update: (id: string, input: UpdateWishInput) =>
+    api.patch<Wish, UpdateWishInput>(`/api/wishes/${id}`, input),
+
+  remove: (id: string) => api.delete<Wish>(`/api/wishes/${id}`),
+  archive: (id: string) => api.post<Wish>(`/api/wishes/${id}/archive`),
+  complete: (id: string) => api.post<Wish>(`/api/wishes/${id}/complete`),
+  restore: (id: string) => api.post<Wish>(`/api/wishes/${id}/restore`),
+  duplicate: (id: string) => api.post<Wish>(`/api/wishes/${id}/duplicate`),
+
+  uploadImage: (id: string, file: File) => {
+    const fd = new FormData();
+    fd.append('file', file, file.name);
+    return api.upload<Wish>(`/api/wishes/${id}/image`, fd);
+  },
+  refreshOg: (id: string) => api.post<Wish>(`/api/wishes/${id}/image/refresh-og`),
+  deleteImage: (id: string) => api.delete<Wish>(`/api/wishes/${id}/image`),
+};
+
+export function statusToQuery(s: WishStatus): OwnerStatus {
+  return s.toLowerCase() as OwnerStatus;
+}
--- a/apps/frontend/src/features/wishes/wishes.hooks.ts
+++ b/apps/frontend/src/features/wishes/wishes.hooks.ts
@@ -0,0 +1,145 @@
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import type { CreateWishInput, UpdateWishInput } from '@family-wishlist/shared';
+import { toast } from 'sonner';
+import { wishesApi, type OwnerStatus } from './wishes.api';
+import { ApiError } from '@/lib/api';
+
+const LIST_KEY = (status: OwnerStatus) => ['wishes', status] as const;
+
+function invalidateAll(client: ReturnType<typeof useQueryClient>): void {
+  void client.invalidateQueries({ queryKey: ['wishes'] });
+}
+
+function toastError(err: unknown, fallback = 'Something went wrong'): void {
+  if (err instanceof ApiError) toast.error(err.message);
+  else toast.error(fallback);
+}
+
+export function useWishes(status: OwnerStatus) {
+  return useQuery({
+    queryKey: LIST_KEY(status),
+    queryFn: () => wishesApi.list(status),
+    staleTime: 10_000,
+  });
+}
+
+export function useCreateWish() {
+  const client = useQueryClient();
+  return useMutation({
+    mutationFn: (input: CreateWishInput) => wishesApi.create(input),
+    onSuccess: () => {
+      invalidateAll(client);
+      toast.success('Wish added');
+    },
+    onError: (err) => toastError(err),
+  });
+}
+
+export function useUpdateWish() {
+  const client = useQueryClient();
+  return useMutation({
+    mutationFn: (vars: { id: string; input: UpdateWishInput }) =>
+      wishesApi.update(vars.id, vars.input),
+    onSuccess: () => {
+      invalidateAll(client);
+      toast.success('Saved');
+    },
+    onError: (err) => toastError(err),
+  });
+}
+
+export function useArchiveWish() {
+  const client = useQueryClient();
+  return useMutation({
+    mutationFn: (id: string) => wishesApi.archive(id),
+    onSuccess: () => {
+      invalidateAll(client);
+      toast.success('Moved to archive');
+    },
+    onError: (err) => toastError(err),
+  });
+}
+
+export function useCompleteWish() {
+  const client = useQueryClient();
+  return useMutation({
+    mutationFn: (id: string) => wishesApi.complete(id),
+    onSuccess: () => {
+      invalidateAll(client);
+      toast.success('Marked as fulfilled');
+    },
+    onError: (err) => toastError(err),
+  });
+}
+
+export function useDeleteWish() {
+  const client = useQueryClient();
+  return useMutation({
+    mutationFn: (id: string) => wishesApi.remove(id),
+    onSuccess: () => {
+      invalidateAll(client);
+      toast.success('Moved to trash (30 days to restore)');
+    },
+    onError: (err) => toastError(err),
+  });
+}
+
+export function useRestoreWish() {
+  const client = useQueryClient();
+  return useMutation({
+    mutationFn: (id: string) => wishesApi.restore(id),
+    onSuccess: () => {
+      invalidateAll(client);
+      toast.success('Restored');
+    },
+    onError: (err) => toastError(err),
+  });
+}
+
+export function useDuplicateWish() {
+  const client = useQueryClient();
+  return useMutation({
+    mutationFn: (id: string) => wishesApi.duplicate(id),
+    onSuccess: () => {
+      invalidateAll(client);
+      toast.success('New wish created from the fulfilled one');
+    },
+    onError: (err) => toastError(err),
+  });
+}
+
+export function useUploadWishImage() {
+  const client = useQueryClient();
+  return useMutation({
+    mutationFn: (vars: { id: string; file: File }) => wishesApi.uploadImage(vars.id, vars.file),
+    onSuccess: () => {
+      invalidateAll(client);
+      toast.success('Image updated');
+    },
+    onError: (err) => toastError(err),
+  });
+}
+
+export function useRefreshOg() {
+  const client = useQueryClient();
+  return useMutation({
+    mutationFn: (id: string) => wishesApi.refreshOg(id),
+    onSuccess: () => {
+      invalidateAll(client);
+      toast.success('Image refreshed from link');
+    },
+    onError: (err) => toastError(err, 'Could not fetch image from link'),
+  });
+}
+
+export function useResetWishImage() {
+  const client = useQueryClient();
+  return useMutation({
+    mutationFn: (id: string) => wishesApi.deleteImage(id),
+    onSuccess: () => {
+      invalidateAll(client);
+      toast.success('Reset to default image');
+    },
+    onError: (err) => toastError(err),
+  });
+}
--- a/apps/frontend/src/lib/api.ts
+++ b/apps/frontend/src/lib/api.ts
@@ -0,0 +1,70 @@
+export interface ApiErrorShape {
+  error: string;
+  message: string;
+  details?: unknown;
+}
+
+export class ApiError extends Error {
+  readonly status: number;
+  readonly code: string;
+  readonly details?: unknown;
+  constructor(status: number, body: ApiErrorShape) {
+    super(body.message);
+    this.status = status;
+    this.code = body.error;
+    this.details = body.details;
+  }
+}
+
+interface RequestOptions<TBody = unknown> {
+  method?: 'GET' | 'POST' | 'PATCH' | 'DELETE';
+  body?: TBody;
+  signal?: AbortSignal;
+  formData?: FormData;
+}
+
+async function request<TResponse, TBody = unknown>(
+  path: string,
+  options: RequestOptions<TBody> = {},
+): Promise<TResponse> {
+  const headers: Record<string, string> = {};
+  let body: BodyInit | undefined;
+
+  if (options.formData) {
+    body = options.formData;
+  } else if (options.body !== undefined) {
+    headers['content-type'] = 'application/json';
+    body = JSON.stringify(options.body);
+  }
+
+  const response = await fetch(path, {
+    method: options.method ?? 'GET',
+    headers,
+    body,
+    credentials: 'include',
+    signal: options.signal,
+  });
+
+  const isJson = response.headers.get('content-type')?.includes('application/json');
+  const payload = isJson ? await response.json().catch(() => null) : null;
+
+  if (!response.ok) {
+    const errBody: ApiErrorShape =
+      payload && typeof payload === 'object' && 'error' in payload
+        ? (payload as ApiErrorShape)
+        : { error: 'HTTP', message: response.statusText || 'Request failed' };
+    throw new ApiError(response.status, errBody);
+  }
+
+  return payload as TResponse;
+}
+
+export const api = {
+  get: <T>(path: string, signal?: AbortSignal) => request<T>(path, { signal }),
+  post: <T, B = unknown>(path: string, body?: B) => request<T, B>(path, { method: 'POST', body }),
+  patch: <T, B = unknown>(path: string, body?: B) =>
+    request<T, B>(path, { method: 'PATCH', body }),
+  delete: <T>(path: string) => request<T>(path, { method: 'DELETE' }),
+  upload: <T>(path: string, formData: FormData) =>
+    request<T>(path, { method: 'POST', formData }),
+};
--- a/apps/frontend/src/lib/cn.ts
+++ b/apps/frontend/src/lib/cn.ts
@@ -0,0 +1,6 @@
+import clsx, { type ClassValue } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+export function cn(...inputs: ClassValue[]): string {
+  return twMerge(clsx(inputs));
+}
--- a/apps/frontend/src/lib/format.ts
+++ b/apps/frontend/src/lib/format.ts
@@ -0,0 +1,25 @@
+export function formatPrice(price: string | null | undefined, currency: string): string | null {
+  if (!price) return null;
+  const n = Number(price);
+  if (Number.isNaN(n)) return `${price} ${currency}`;
+  try {
+    return new Intl.NumberFormat(undefined, {
+      style: 'currency',
+      currency,
+      maximumFractionDigits: 2,
+    }).format(n);
+  } catch {
+    return `${n.toLocaleString()} ${currency}`;
+  }
+}
+
+export function formatDate(iso: string | Date): string {
+  const d = typeof iso === 'string' ? new Date(iso) : iso;
+  return d.toLocaleDateString(undefined, { day: 'numeric', month: 'short', year: 'numeric' });
+}
+
+export function daysLeftUntil(iso: string | Date, retentionDays: number): number {
+  const d = typeof iso === 'string' ? new Date(iso) : iso;
+  const expires = d.getTime() + retentionDays * 24 * 60 * 60 * 1000;
+  return Math.max(0, Math.ceil((expires - Date.now()) / (24 * 60 * 60 * 1000)));
+}
--- a/apps/frontend/src/lib/version.ts
+++ b/apps/frontend/src/lib/version.ts
@@ -0,0 +1,4 @@
+declare const __FRONTEND_VERSION__: string;
+
+export const FRONTEND_VERSION: string =
+  typeof __FRONTEND_VERSION__ !== 'undefined' ? __FRONTEND_VERSION__ : '0.0.0';
--- a/apps/frontend/src/main.tsx
+++ b/apps/frontend/src/main.tsx
@@ -0,0 +1,13 @@
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import { App } from './App';
+import './styles/global.css';
+
+const el = document.getElementById('root');
+if (!el) throw new Error('#root not found');
+
+createRoot(el).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+);
--- a/apps/frontend/src/pages/ArchivePage.tsx
+++ b/apps/frontend/src/pages/ArchivePage.tsx
@@ -0,0 +1,48 @@
+import { WishCard } from '@/components/WishCard/WishCard';
+import {
+  useDeleteWish,
+  useRestoreWish,
+  useWishes,
+} from '@/features/wishes/wishes.hooks';
+import { Archive } from 'lucide-react';
+
+export function ArchivePage() {
+  const { data, isLoading } = useWishes('archived');
+  const restore = useRestoreWish();
+  const remove = useDeleteWish();
+
+  return (
+    <div className="grid gap-6">
+      <section>
+        <h1 className="font-display text-3xl">Archive</h1>
+        <p className="text-sm text-muted">
+          Wishes you put aside. Only you see this. Restore them to your active list any time.
+        </p>
+      </section>
+
+      {isLoading && <div className="text-muted">Loading...</div>}
+
+      {!isLoading && data && data.length === 0 && (
+        <div className="flex flex-col items-center gap-2 rounded-xl border border-border bg-surface/80 p-10 text-center shadow-card">
+          <Archive className="h-10 w-10 text-muted" />
+          <h2 className="text-xl font-semibold">Archive is empty</h2>
+          <p className="text-sm text-muted">Archived wishes will show up here.</p>
+        </div>
+      )}
+
+      {data && data.length > 0 && (
+        <div className="grid gap-5 sm:grid-cols-2 lg:grid-cols-3">
+          {data.map((wish) => (
+            <WishCard
+              key={wish.id}
+              wish={wish}
+              view="owner"
+              onRestore={() => restore.mutate(wish.id)}
+              onDelete={() => remove.mutate(wish.id)}
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
--- a/apps/frontend/src/pages/CompletedPage.tsx
+++ b/apps/frontend/src/pages/CompletedPage.tsx
@@ -0,0 +1,50 @@
+import { CheckCircle2 } from 'lucide-react';
+import { WishCard } from '@/components/WishCard/WishCard';
+import {
+  useDeleteWish,
+  useDuplicateWish,
+  useWishes,
+} from '@/features/wishes/wishes.hooks';
+
+export function CompletedPage() {
+  const { data, isLoading } = useWishes('completed');
+  const duplicate = useDuplicateWish();
+  const remove = useDeleteWish();
+
+  return (
+    <div className="grid gap-6">
+      <section>
+        <h1 className="font-display text-3xl">Fulfilled</h1>
+        <p className="text-sm text-muted">
+          Wishes you've received. You can create a new wish based on any of them.
+        </p>
+      </section>
+
+      {isLoading && <div className="text-muted">Loading...</div>}
+
+      {!isLoading && data && data.length === 0 && (
+        <div className="flex flex-col items-center gap-2 rounded-xl border border-border bg-surface/80 p-10 text-center shadow-card">
+          <CheckCircle2 className="h-10 w-10 text-muted" />
+          <h2 className="text-xl font-semibold">Nothing fulfilled yet</h2>
+          <p className="text-sm text-muted">
+            When a wish comes true, mark it as fulfilled and it lands here.
+          </p>
+        </div>
+      )}
+
+      {data && data.length > 0 && (
+        <div className="grid gap-5 sm:grid-cols-2 lg:grid-cols-3">
+          {data.map((wish) => (
+            <WishCard
+              key={wish.id}
+              wish={wish}
+              view="owner"
+              onDuplicate={() => duplicate.mutate(wish.id)}
+              onDelete={() => remove.mutate(wish.id)}
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
--- a/apps/frontend/src/pages/DashboardPage.tsx
+++ b/apps/frontend/src/pages/DashboardPage.tsx
@@ -0,0 +1,102 @@
+import { useState } from 'react';
+import { Plus, Sparkles } from 'lucide-react';
+import type { Wish } from '@family-wishlist/shared';
+import { Button } from '@/components/ui/Button';
+import { WishCard } from '@/components/WishCard/WishCard';
+import { WishForm } from '@/components/WishForm/WishForm';
+import {
+  useArchiveWish,
+  useCompleteWish,
+  useDeleteWish,
+  useWishes,
+} from '@/features/wishes/wishes.hooks';
+import { useAuthStore } from '@/features/auth/authStore';
+import { Link } from 'react-router-dom';
+
+export function DashboardPage() {
+  const { data, isLoading } = useWishes('active');
+  const [creating, setCreating] = useState(false);
+  const [editing, setEditing] = useState<Wish | null>(null);
+  const archive = useArchiveWish();
+  const complete = useCompleteWish();
+  const remove = useDeleteWish();
+  const user = useAuthStore((s) => s.user);
+
+  return (
+    <div className="grid gap-6">
+      <section className="flex flex-wrap items-end justify-between gap-4">
+        <div>
+          <h1 className="font-display text-3xl">Your wishlist</h1>
+          <p className="text-sm text-muted">
+            Add things you dream of. Share your public page at{' '}
+            {user && (
+              <Link
+                to={`/u/${user.slug}`}
+                className="font-medium text-primary hover:text-primary-600"
+              >
+                /u/{user.slug}
+              </Link>
+            )}
+            .
+          </p>
+        </div>
+        <Button size="lg" onClick={() => setCreating(true)}>
+          <Plus className="h-4 w-4" />
+          Add wish
+        </Button>
+      </section>
+
+      {isLoading && (
+        <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
+          {[0, 1, 2].map((i) => (
+            <div
+              key={i}
+              className="wish-card animate-pulse"
+              style={{ minHeight: 320, background: 'rgb(var(--color-surface-muted))' }}
+            />
+          ))}
+        </div>
+      )}
+
+      {!isLoading && data && data.length === 0 && (
+        <div className="flex flex-col items-center gap-4 rounded-xl border border-border bg-surface/80 p-10 text-center shadow-card">
+          <img src="/empty-state.svg" alt="" className="h-40 w-40 opacity-90" />
+          <div>
+            <h2 className="text-xl font-semibold">No wishes yet</h2>
+            <p className="mt-1 text-sm text-muted">
+              Start by adding something you'd love to receive.
+            </p>
+          </div>
+          <Button onClick={() => setCreating(true)}>
+            <Sparkles className="h-4 w-4" />
+            Add your first wish
+          </Button>
+        </div>
+      )}
+
+      {!isLoading && data && data.length > 0 && (
+        <div className="grid gap-5 sm:grid-cols-2 lg:grid-cols-3">
+          {data.map((wish) => (
+            <WishCard
+              key={wish.id}
+              wish={wish}
+              view="owner"
+              onEdit={() => setEditing(wish)}
+              onArchive={() => archive.mutate(wish.id)}
+              onComplete={() => complete.mutate(wish.id)}
+              onDelete={() => remove.mutate(wish.id)}
+            />
+          ))}
+        </div>
+      )}
+
+      <WishForm open={creating} mode="create" onClose={() => setCreating(false)} />
+      <WishForm
+        open={editing !== null}
+        mode="edit"
+        initial={editing ?? undefined}
+        onClose={() => setEditing(null)}
+      />
+    </div>
+  );
+}
--- a/apps/frontend/src/pages/LoginPage.tsx
+++ b/apps/frontend/src/pages/LoginPage.tsx
@@ -0,0 +1,98 @@
+import { useEffect } from 'react';
+import { Navigate, useLocation, useNavigate } from 'react-router-dom';
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { Gift, Loader2 } from 'lucide-react';
+import { toast } from 'sonner';
+import { loginSchema, type LoginInput } from '@family-wishlist/shared';
+import { Button } from '@/components/ui/Button';
+import { Input } from '@/components/ui/Input';
+import { Label } from '@/components/ui/Label';
+import { useAuthStore } from '@/features/auth/authStore';
+import { ApiError } from '@/lib/api';
+import { Footer } from '@/components/Layout/Footer';
+
+export function LoginPage() {
+  const { user, login } = useAuthStore();
+  const navigate = useNavigate();
+  const location = useLocation();
+  const from = (location.state as { from?: { pathname: string } } | null)?.from?.pathname ?? '/';
+
+  const {
+    register,
+    handleSubmit,
+    formState: { errors, isSubmitting },
+  } = useForm<LoginInput>({
+    resolver: zodResolver(loginSchema),
+    defaultValues: { username: '', password: '' },
+  });
+
+  useEffect(() => {
+    if (user) navigate(from, { replace: true });
+  }, [user, from, navigate]);
+
+  if (user) return <Navigate to={from} replace />;
+
+  const submit = handleSubmit(async (values) => {
+    try {
+      await login(values.username, values.password);
+      navigate(from, { replace: true });
+    } catch (err) {
+      if (err instanceof ApiError) toast.error(err.message);
+      else toast.error('Login failed');
+    }
+  });
+
+  return (
+    <div className="flex min-h-screen flex-col">
+      <div className="container-page flex flex-1 items-center justify-center py-12">
+        <div className="w-full max-w-md animate-fade-in-up">
+          <div className="mb-6 flex items-center justify-center gap-2">
+            <span className="inline-flex h-11 w-11 items-center justify-center rounded-md bg-primary text-primary-foreground shadow-card">
+              <Gift className="h-5 w-5" />
+            </span>
+            <h1 className="font-display text-3xl">Family Wishlist</h1>
+          </div>
+
+          <div className="rounded-xl border border-border bg-surface p-6 shadow-card sm:p-8">
+            <h2 className="mb-1 text-xl font-semibold">Welcome back</h2>
+            <p className="mb-6 text-sm text-muted">
+              Sign in to manage your wishlist. Credentials are set up via the server environment.
+            </p>
+            <form className="grid gap-4" onSubmit={submit}>
+              <div className="field">
+                <Label htmlFor="username">Username</Label>
+                <Input
+                  id="username"
+                  autoComplete="username"
+                  autoFocus
+                  {...register('username')}
+                />
+                {errors.username && (
+                  <span className="field__error">{errors.username.message}</span>
+                )}
+              </div>
+              <div className="field">
+                <Label htmlFor="password">Password</Label>
+                <Input
+                  id="password"
+                  type="password"
+                  autoComplete="current-password"
+                  {...register('password')}
+                />
+                {errors.password && (
+                  <span className="field__error">{errors.password.message}</span>
+                )}
+              </div>
+              <Button type="submit" size="lg" disabled={isSubmitting}>
+                {isSubmitting && <Loader2 className="h-4 w-4 animate-spin" />}
+                Sign in
+              </Button>
+            </form>
+          </div>
+        </div>
+      </div>
+      <Footer />
+    </div>
+  );
+}
--- a/apps/frontend/src/pages/NotFoundPage.tsx
+++ b/apps/frontend/src/pages/NotFoundPage.tsx
@@ -0,0 +1,16 @@
+import { Link } from 'react-router-dom';
+import { Button } from '@/components/ui/Button';
+
+export function NotFoundPage() {
+  return (
+    <div className="flex min-h-screen items-center justify-center p-6">
+      <div className="max-w-md rounded-xl border border-border bg-surface p-8 text-center shadow-card">
+        <h1 className="font-display text-4xl">404</h1>
+        <p className="mt-2 text-muted">We couldn't find that page.</p>
+        <Link to="/" className="mt-4 inline-block">
+          <Button variant="secondary">Back to home</Button>
+        </Link>
+      </div>
+    </div>
+  );
+}
--- a/apps/frontend/src/pages/ProfileSettingsPage.tsx
+++ b/apps/frontend/src/pages/ProfileSettingsPage.tsx
@@ -0,0 +1,121 @@
+import { useEffect } from 'react';
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import {
+  updateProfileSchema,
+  type UpdateProfileInput,
+  type Profile,
+} from '@family-wishlist/shared';
+import { toast } from 'sonner';
+import { Loader2 } from 'lucide-react';
+import { Button } from '@/components/ui/Button';
+import { Input } from '@/components/ui/Input';
+import { Label } from '@/components/ui/Label';
+import { Textarea } from '@/components/ui/Textarea';
+import { api, ApiError } from '@/lib/api';
+import { useAuthStore } from '@/features/auth/authStore';
+
+export function ProfileSettingsPage() {
+  const refresh = useAuthStore((s) => s.refresh);
+  const queryClient = useQueryClient();
+
+  const { data, isLoading } = useQuery({
+    queryKey: ['profile'],
+    queryFn: () => api.get<Profile>('/api/profile'),
+  });
+
+  const {
+    register,
+    handleSubmit,
+    reset,
+    formState: { errors, isSubmitting, isDirty },
+  } = useForm<UpdateProfileInput>({
+    resolver: zodResolver(updateProfileSchema),
+    defaultValues: { slug: '', displayName: '', bio: '', avatarUrl: '' },
+  });
+
+  useEffect(() => {
+    if (data) {
+      reset({
+        slug: data.slug,
+        displayName: data.displayName,
+        bio: data.bio ?? '',
+        avatarUrl: data.avatarUrl ?? '',
+      });
+    }
+  }, [data, reset]);
+
+  const update = useMutation({
+    mutationFn: (values: UpdateProfileInput) =>
+      api.patch<Profile, UpdateProfileInput>('/api/profile', values),
+    onSuccess: (p) => {
+      toast.success('Profile saved');
+      void queryClient.invalidateQueries({ queryKey: ['profile'] });
+      void refresh();
+      reset({
+        slug: p.slug,
+        displayName: p.displayName,
+        bio: p.bio ?? '',
+        avatarUrl: p.avatarUrl ?? '',
+      });
+    },
+    onError: (err) => {
+      if (err instanceof ApiError) toast.error(err.message);
+      else toast.error('Save failed');
+    },
+  });
+
+  const submit = handleSubmit((values) => {
+    const payload: UpdateProfileInput = {
+      ...values,
+      bio: values.bio ? values.bio : null,
+      avatarUrl: values.avatarUrl ? values.avatarUrl : null,
+    };
+    update.mutate(payload);
+  });
+
+  return (
+    <div className="grid max-w-2xl gap-6">
+      <section>
+        <h1 className="font-display text-3xl">Profile</h1>
+        <p className="text-sm text-muted">
+          Your public page lives at <code className="rounded bg-ink/5 px-1.5 py-0.5">/u/{data?.slug ?? '...'}</code>.
+        </p>
+      </section>
+
+      {isLoading ? (
+        <div className="text-muted">Loading...</div>
+      ) : (
+        <form className="grid gap-4 rounded-xl border border-border bg-surface p-6 shadow-card" onSubmit={submit}>
+          <div className="field">
+            <Label htmlFor="slug">Slug (public URL)</Label>
+            <Input id="slug" {...register('slug')} />
+            {errors.slug && <span className="field__error">{errors.slug.message}</span>}
+          </div>
+          <div className="field">
+            <Label htmlFor="displayName">Display name</Label>
+            <Input id="displayName" {...register('displayName')} />
+            {errors.displayName && (
+              <span className="field__error">{errors.displayName.message}</span>
+            )}
+          </div>
+          <div className="field">
+            <Label htmlFor="bio">Bio</Label>
+            <Textarea id="bio" rows={3} {...register('bio')} />
+          </div>
+          <div className="field">
+            <Label htmlFor="avatarUrl">Avatar URL</Label>
+            <Input id="avatarUrl" type="url" {...register('avatarUrl')} />
+          </div>
+          <div className="flex items-center justify-end gap-2">
+            <Button type="submit" disabled={!isDirty || isSubmitting}>
+              {isSubmitting && <Loader2 className="h-4 w-4 animate-spin" />}
+              Save changes
+            </Button>
+          </div>
+        </form>
+      )}
+    </div>
+  );
+}
--- a/apps/frontend/src/pages/PublicProfilePage.tsx
+++ b/apps/frontend/src/pages/PublicProfilePage.tsx
@@ -0,0 +1,110 @@
+import { useEffect, useRef } from 'react';
+import { useParams } from 'react-router-dom';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import type {
+  PublicProfile,
+  Wish,
+} from '@family-wishlist/shared';
+import { api } from '@/lib/api';
+import { WishCard } from '@/components/WishCard/WishCard';
+import { Footer } from '@/components/Layout/Footer';
+import { Gift } from 'lucide-react';
+
+export function PublicProfilePage() {
+  const { slug = '' } = useParams<{ slug: string }>();
+  const queryClient = useQueryClient();
+
+  const profile = useQuery({
+    queryKey: ['public-profile', slug],
+    queryFn: () => api.get<PublicProfile>(`/api/public/${encodeURIComponent(slug)}`),
+    retry: false,
+    enabled: slug.length > 0,
+  });
+
+  const wishes = useQuery({
+    queryKey: ['public-wishes', slug],
+    queryFn: () => api.get<Wish[]>(`/api/public/${encodeURIComponent(slug)}/wishes`),
+    enabled: slug.length > 0 && profile.isSuccess,
+  });
+
+  const markSeen = useMutation({
+    mutationFn: (wishIds: string[]) =>
+      api.post(`/api/public/${encodeURIComponent(slug)}/views`, { wishIds }),
+  });
+
+  const marked = useRef(false);
+  useEffect(() => {
+    if (!wishes.data || marked.current) return;
+    const newIds = wishes.data.filter((w) => w.isNewForGuest).map((w) => w.id);
+    if (newIds.length === 0) {
+      marked.current = true;
+      return;
+    }
+    const t = window.setTimeout(() => {
+      markSeen.mutate(newIds, {
+        onSuccess: () => {
+          marked.current = true;
+          void queryClient.invalidateQueries({ queryKey: ['public-wishes', slug] });
+        },
+      });
+    }, 1500);
+    return () => window.clearTimeout(t);
+  }, [wishes.data, markSeen, queryClient, slug]);
+
+  return (
+    <div className="flex min-h-screen flex-col">
+      <main className="container-page flex-1 py-10">
+        {profile.isLoading && <div className="text-muted">Loading...</div>}
+
+        {profile.isError && (
+          <div className="mx-auto max-w-lg rounded-xl border border-border bg-surface p-8 text-center shadow-card">
+            <h1 className="font-display text-2xl">Profile not found</h1>
+            <p className="mt-2 text-sm text-muted">
+              Check the link and try again. Slugs are case-sensitive.
+            </p>
+          </div>
+        )}
+
+        {profile.data && (
+          <>
+            <section className="mb-10 flex flex-col items-center gap-3 text-center">
+              <span className="inline-flex h-14 w-14 items-center justify-center rounded-full bg-primary text-primary-foreground shadow-card">
+                {profile.data.avatarUrl ? (
+                  <img
+                    src={profile.data.avatarUrl}
+                    alt=""
+                    className="h-14 w-14 rounded-full object-cover"
+                  />
+                ) : (
+                  <Gift className="h-6 w-6" />
+                )}
+              </span>
+              <h1 className="font-display text-4xl">{profile.data.displayName}'s wishlist</h1>
+              {profile.data.bio && (
+                <p className="max-w-xl text-muted">{profile.data.bio}</p>
+              )}
+            </section>
+
+            {wishes.isLoading && <div className="text-muted">Loading wishes...</div>}
+
+            {wishes.data && wishes.data.length === 0 && (
+              <div className="mx-auto max-w-lg rounded-xl border border-border bg-surface/80 p-10 text-center shadow-card">
+                <h2 className="text-xl font-semibold">No wishes yet</h2>
+                <p className="mt-1 text-sm text-muted">Check back later!</p>
+              </div>
+            )}
+
+            {wishes.data && wishes.data.length > 0 && (
+              <div className="grid gap-5 sm:grid-cols-2 lg:grid-cols-3">
+                {wishes.data.map((wish) => (
+                  <WishCard key={wish.id} wish={wish} view="guest" />
+                ))}
+              </div>
+            )}
+          </>
+        )}
+      </main>
+      <Footer />
+    </div>
+  );
+}
--- a/apps/frontend/src/pages/TrashPage.tsx
+++ b/apps/frontend/src/pages/TrashPage.tsx
@@ -0,0 +1,54 @@
+import { Trash2 } from 'lucide-react';
+import { TRASH_RETENTION_DAYS } from '@family-wishlist/shared';
+import { WishCard } from '@/components/WishCard/WishCard';
+import { useRestoreWish, useWishes } from '@/features/wishes/wishes.hooks';
+import { daysLeftUntil } from '@/lib/format';
+
+export function TrashPage() {
+  const { data, isLoading } = useWishes('deleted');
+  const restore = useRestoreWish();
+
+  return (
+    <div className="grid gap-6">
+      <section>
+        <h1 className="font-display text-3xl">Trash</h1>
+        <p className="text-sm text-muted">
+          Deleted wishes are kept for {TRASH_RETENTION_DAYS} days, then permanently removed.
+        </p>
+      </section>
+
+      {isLoading && <div className="text-muted">Loading...</div>}
+
+      {!isLoading && data && data.length === 0 && (
+        <div className="flex flex-col items-center gap-2 rounded-xl border border-border bg-surface/80 p-10 text-center shadow-card">
+          <Trash2 className="h-10 w-10 text-muted" />
+          <h2 className="text-xl font-semibold">Trash is empty</h2>
+          <p className="text-sm text-muted">Deleted wishes will appear here for 30 days.</p>
+        </div>
+      )}
+
+      {data && data.length > 0 && (
+        <div className="grid gap-5 sm:grid-cols-2 lg:grid-cols-3">
+          {data.map((wish) => {
+            const left = wish.deletedAt
+              ? daysLeftUntil(wish.deletedAt, TRASH_RETENTION_DAYS)
+              : TRASH_RETENTION_DAYS;
+            return (
+              <WishCard
+                key={wish.id}
+                wish={wish}
+                view="owner"
+                onRestore={() => restore.mutate(wish.id)}
+                footer={
+                  <p className="mt-2 text-xs font-medium text-warning">
+                    Auto-removes in {left} day{left === 1 ? '' : 's'}
+                  </p>
+                }
+              />
+            );
+          })}
+        </div>
+      )}
+    </div>
+  );
+}
--- a/apps/frontend/src/routes.tsx
+++ b/apps/frontend/src/routes.tsx
@@ -0,0 +1,31 @@
+import { createBrowserRouter } from 'react-router-dom';
+import { ProtectedRoute } from './components/Layout/ProtectedRoute';
+import { AppShell } from './components/Layout/AppShell';
+import { LoginPage } from './pages/LoginPage';
+import { DashboardPage } from './pages/DashboardPage';
+import { ArchivePage } from './pages/ArchivePage';
+import { CompletedPage } from './pages/CompletedPage';
+import { TrashPage } from './pages/TrashPage';
+import { ProfileSettingsPage } from './pages/ProfileSettingsPage';
+import { PublicProfilePage } from './pages/PublicProfilePage';
+import { NotFoundPage } from './pages/NotFoundPage';
+
+export const router = createBrowserRouter([
+  { path: '/login', element: <LoginPage /> },
+  { path: '/u/:slug', element: <PublicProfilePage /> },
+  {
+    element: (
+      <ProtectedRoute>
+        <AppShell />
+      </ProtectedRoute>
+    ),
+    children: [
+      { path: '/', element: <DashboardPage /> },
+      { path: '/archive', element: <ArchivePage /> },
+      { path: '/completed', element: <CompletedPage /> },
+      { path: '/trash', element: <TrashPage /> },
+      { path: '/settings', element: <ProfileSettingsPage /> },
+    ],
+  },
+  { path: '*', element: <NotFoundPage /> },
+]);
--- a/apps/frontend/src/styles/global.css
+++ b/apps/frontend/src/styles/global.css
@@ -0,0 +1,102 @@
+@import './tokens.css';
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  html,
+  body,
+  #root {
+    height: 100%;
+  }
+  body {
+    @apply bg-background text-ink font-sans antialiased;
+    background-image:
+      radial-gradient(1200px 600px at 0% -10%, rgba(244, 192, 78, 0.18), transparent 60%),
+      radial-gradient(900px 500px at 100% 110%, rgba(226, 120, 150, 0.18), transparent 55%);
+    background-attachment: fixed;
+  }
+  h1,
+  h2,
+  h3 {
+    @apply font-display text-ink;
+    letter-spacing: -0.01em;
+  }
+  a {
+    @apply transition-colors;
+  }
+}
+
+@layer components {
+  /* BEM-friendly classes: kept parallel to Tailwind utilities where possible. */
+  .wish-card {
+    @apply relative flex flex-col overflow-hidden rounded-lg bg-surface shadow-card transition-transform duration-200;
+  }
+  .wish-card:hover {
+    transform: translateY(-2px);
+  }
+  .wish-card--completed {
+    filter: saturate(0.45) brightness(0.98);
+  }
+  .wish-card--completed .wish-card__title {
+    text-decoration: line-through;
+    text-decoration-thickness: 2px;
+    text-decoration-color: rgb(var(--color-muted) / 0.6);
+  }
+
+  .wish-card__image-wrap {
+    @apply relative aspect-[4/3] bg-surface-muted overflow-hidden;
+  }
+  .wish-card__image {
+    @apply h-full w-full object-cover;
+  }
+  .wish-card__body {
+    @apply flex flex-col gap-2 p-4;
+  }
+  .wish-card__title {
+    @apply text-lg font-semibold leading-snug text-ink;
+  }
+  .wish-card__price {
+    @apply text-sm font-medium text-muted;
+  }
+  .wish-card__comment {
+    @apply text-sm text-muted line-clamp-2;
+  }
+
+  .wish-badge {
+    @apply inline-flex items-center gap-1 rounded-full px-2.5 py-0.5 text-xs font-semibold uppercase tracking-wide;
+  }
+  .wish-badge--new {
+    @apply bg-primary text-primary-foreground;
+  }
+  .wish-badge--completed {
+    @apply bg-ink/5 text-ink;
+  }
+  .wish-badge--archived {
+    @apply bg-warning/20 text-warning;
+  }
+  .wish-badge--deleted {
+    @apply bg-danger/15 text-danger;
+  }
+
+  .field {
+    @apply flex flex-col gap-1.5;
+  }
+  .field__label {
+    @apply text-sm font-medium text-ink;
+  }
+  .field__input,
+  .field__textarea,
+  .field__select {
+    @apply w-full rounded-md border border-border bg-surface px-3 py-2.5 text-ink outline-none transition-all duration-150 placeholder:text-muted focus:border-primary focus:shadow-[var(--shadow-focus)];
+  }
+  .field__error {
+    @apply text-xs text-danger;
+  }
+}
+
+@layer utilities {
+  .container-page {
+    @apply mx-auto w-full max-w-6xl px-4 sm:px-6 lg:px-8;
+  }
+}
--- a/apps/frontend/src/styles/tokens.css
+++ b/apps/frontend/src/styles/tokens.css
@@ -0,0 +1,35 @@
+:root {
+  /* Colors (RGB triplets so Tailwind <alpha-value> works) */
+  --color-background: 255 247 240;
+  --color-surface: 255 255 255;
+  --color-surface-muted: 250 242 235;
+  --color-text: 42 33 53;
+  --color-muted: 142 128 153;
+  --color-border: 235 224 215;
+
+  --color-primary: 226 120 150;
+  --color-primary-50: 255 236 243;
+  --color-primary-600: 200 82 118;
+  --color-primary-foreground: 255 255 255;
+
+  --color-accent: 244 192 78;
+  --color-accent-foreground: 70 48 10;
+
+  --color-success: 97 186 129;
+  --color-warning: 240 168 104;
+  --color-danger: 226 107 107;
+
+  /* Radii */
+  --radius-sm: 8px;
+  --radius-md: 14px;
+  --radius-lg: 20px;
+  --radius-xl: 28px;
+
+  /* Shadows */
+  --shadow-card: 0 1px 2px rgba(42, 33, 53, 0.04), 0 10px 28px rgba(42, 33, 53, 0.07);
+  --shadow-pop: 0 8px 32px rgba(42, 33, 53, 0.18);
+  --shadow-focus: 0 0 0 3px rgba(226, 120, 150, 0.3);
+
+  /* Transitions */
+  --transition-base: 160ms cubic-bezier(0.2, 0.8, 0.2, 1);
+}