From 43157cef4e7f7a55ad5e865124684c81d0451e76 Mon Sep 17 00:00:00 2001
From: Gabriel Kaszewski <gabrielkaszewski@gmail.com>
Date: Sun, 16 Nov 2025 01:19:17 +0100
Subject: [PATCH] feat: add album and media management features, including
 album creation, media upload, and routing

---
 libertas-frontend/.env.example                |   1 +
 .../src/components/albums/album-card.tsx      |  36 +++++++
 .../components/albums/create-album-dialog.tsx |  90 ++++++++++++++++
 .../src/components/layout/sidebar.tsx         |  70 ++++++++++++
 .../components/media/authenticated-image.tsx  |  80 ++++++++++++++
 .../src/components/media/media-viewer.tsx     |  41 +++++++
 .../src/components/media/upload-dialog.tsx    |  76 +++++++++++++
 .../src/features/albums/use-albums.ts         |  30 ++++++
 .../src/features/media/use-media.ts           |  45 ++++++++
 libertas-frontend/src/routeTree.gen.ts        | 100 +++++++++++++++++-
 libertas-frontend/src/routes/__root.tsx       |  27 ++++-
 .../src/routes/albums/$albumId.tsx            |  19 ++++
 libertas-frontend/src/routes/albums/index.tsx |  34 ++++++
 libertas-frontend/src/routes/media/index.tsx  |  72 +++++++++++++
 libertas-frontend/src/routes/people/index.tsx |  17 +++
 .../src/services/album-service.ts             |  26 +++++
 libertas-frontend/src/services/api-client.ts  |   2 +-
 .../src/services/media-service.ts             |  56 ++++++++++
 18 files changed, 814 insertions(+), 8 deletions(-)
 create mode 100644 libertas-frontend/.env.example
 create mode 100644 libertas-frontend/src/components/albums/album-card.tsx
 create mode 100644 libertas-frontend/src/components/albums/create-album-dialog.tsx
 create mode 100644 libertas-frontend/src/components/layout/sidebar.tsx
 create mode 100644 libertas-frontend/src/components/media/authenticated-image.tsx
 create mode 100644 libertas-frontend/src/components/media/media-viewer.tsx
 create mode 100644 libertas-frontend/src/components/media/upload-dialog.tsx
 create mode 100644 libertas-frontend/src/features/albums/use-albums.ts
 create mode 100644 libertas-frontend/src/features/media/use-media.ts
 create mode 100644 libertas-frontend/src/routes/albums/$albumId.tsx
 create mode 100644 libertas-frontend/src/routes/albums/index.tsx
 create mode 100644 libertas-frontend/src/routes/media/index.tsx
 create mode 100644 libertas-frontend/src/routes/people/index.tsx
 create mode 100644 libertas-frontend/src/services/album-service.ts
 create mode 100644 libertas-frontend/src/services/media-service.ts

diff --git a/libertas-frontend/.env.example b/libertas-frontend/.env.example
new file mode 100644
index 0000000..92f2a1c
--- /dev/null
+++ b/libertas-frontend/.env.example
@@ -0,0 +1 @@
+VITE_API_BASE_URL=http://localhost:8000/api/v1
\ No newline at end of file
diff --git a/libertas-frontend/src/components/albums/album-card.tsx b/libertas-frontend/src/components/albums/album-card.tsx
new file mode 100644
index 0000000..494ae0d
--- /dev/null
+++ b/libertas-frontend/src/components/albums/album-card.tsx
@@ -0,0 +1,36 @@
+import { type Album } from "@/domain/types";
+import {
+  Card,
+  CardContent,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { Link } from "@tanstack/react-router";
+import { ImageIcon } from "lucide-react";
+
+type AlbumCardProps = {
+  album: Album;
+};
+
+export function AlbumCard({ album }: AlbumCardProps) {
+  return (
+    <Link to="/albums/$albumId" params={{ albumId: album.id }}>
+      <Card className="overflow-hidden hover:shadow-lg transition-shadow">
+        <CardHeader className="p-0">
+          <div className="aspect-video bg-gray-200 flex items-center justify-center">
+            {/* TODO: Show album.thumbnail_url here */}
+            <ImageIcon className="w-12 h-12 text-gray-400" />
+          </div>
+        </CardHeader>
+        <CardContent className="p-4">
+          <CardTitle className="text-lg truncate">{album.name}</CardTitle>
+        </CardContent>
+        <CardFooter className="p-4 pt-0">
+          {/* TODO: Show photo count */}
+          <p className="text-sm text-gray-600">0 items</p>
+        </CardFooter>
+      </Card>
+    </Link>
+  );
+}
diff --git a/libertas-frontend/src/components/albums/create-album-dialog.tsx b/libertas-frontend/src/components/albums/create-album-dialog.tsx
new file mode 100644
index 0000000..bfbdc29
--- /dev/null
+++ b/libertas-frontend/src/components/albums/create-album-dialog.tsx
@@ -0,0 +1,90 @@
+import { useState } from "react";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+  DialogFooter,
+  DialogClose,
+} from "@/components/ui/dialog";
+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 { useCreateAlbum } from "@/features/albums/use-albums";
+import { Plus } from "lucide-react";
+
+export function CreateAlbumDialog() {
+  const [isOpen, setIsOpen] = useState(false);
+  const { mutate: createAlbum, isPending } = useCreateAlbum();
+
+  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    const formData = new FormData(e.currentTarget);
+    const name = formData.get("name") as string;
+    const description = formData.get("description") as string;
+
+    if (name) {
+      createAlbum(
+        { name, description },
+        {
+          onSuccess: () => {
+            setIsOpen(false);
+            // TODO: Add toast
+          },
+        }
+      );
+    }
+  };
+
+  return (
+    <Dialog open={isOpen} onOpenChange={setIsOpen}>
+      <DialogTrigger asChild>
+        <Button>
+          <Plus size={18} className="mr-2" />
+          New Album
+        </Button>
+      </DialogTrigger>
+      <DialogContent className="sm:max-w-[425px]">
+        <form onSubmit={handleSubmit}>
+          <DialogHeader>
+            <DialogTitle>Create New Album</DialogTitle>
+            <DialogDescription>
+              Give your new album a name and description.
+            </DialogDescription>
+          </DialogHeader>
+          <div className="grid gap-4 py-4">
+            <div className="grid grid-cols-4 items-center gap-4">
+              <Label htmlFor="name" className="text-right">
+                Name
+              </Label>
+              <Input id="name" name="name" required className="col-span-3" />
+            </div>
+            <div className="grid grid-cols-4 items-center gap-4">
+              <Label htmlFor="description" className="text-right">
+                Description
+              </Label>
+              <Textarea
+                id="description"
+                name="description"
+                className="col-span-3"
+              />
+            </div>
+          </div>
+          <DialogFooter>
+            <DialogClose asChild>
+              <Button type="button" variant="outline">
+                Cancel
+              </Button>
+            </DialogClose>
+            <Button type="submit" disabled={isPending}>
+              {isPending ? "Creating..." : "Create"}
+            </Button>
+          </DialogFooter>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/libertas-frontend/src/components/layout/sidebar.tsx b/libertas-frontend/src/components/layout/sidebar.tsx
new file mode 100644
index 0000000..cdcaff6
--- /dev/null
+++ b/libertas-frontend/src/components/layout/sidebar.tsx
@@ -0,0 +1,70 @@
+import { Link, useNavigate } from "@tanstack/react-router";
+import { Home, Images, Library, Users } from "lucide-react";
+import { cn } from "@/lib/utils";
+import { useAuthStorage } from "@/hooks/use-auth-storage";
+
+export function Sidebar() {
+  const { user, clearToken } = useAuthStorage();
+  const navigate = useNavigate();
+
+  const handleLogout = () => {
+    clearToken();
+    navigate({ to: "/login" });
+  };
+
+  return (
+    <nav className="w-64 h-full bg-gray-800 text-white flex flex-col">
+      <div className="p-4 border-b border-gray-700">
+        <h1 className="text-2xl font-bold">Libertas</h1>
+      </div>
+      <div className="flex-1 p-4 space-y-2">
+        <SidebarLink to="/" icon={<Home size={18} />}>
+          Home
+        </SidebarLink>
+        <SidebarLink to="/media" icon={<Images size={18} />}>
+          Photos
+        </SidebarLink>
+        <SidebarLink to="/albums" icon={<Library size={18} />}>
+          Albums
+        </SidebarLink>
+        <SidebarLink to="/people" icon={<Users size={18} />}>
+          People
+        </SidebarLink>
+      </div>
+      <div className="p-4 border-t border-gray-700">
+        <p className="text-sm text-gray-400">{user?.email}</p>
+        <button
+          onClick={handleLogout}
+          className="w-full mt-2 text-left text-red-400 hover:text-red-300"
+        >
+          Log out
+        </button>
+      </div>
+    </nav>
+  );
+}
+
+function SidebarLink({
+  to,
+  icon,
+  children,
+}: {
+  to: string;
+  icon: React.ReactNode;
+  children: React.ReactNode;
+}) {
+  return (
+    <Link
+      to={to}
+      className={cn(
+        "flex items-center space-x-3 px-3 py-2 rounded-md text-gray-300 hover:bg-gray-700 hover:text-white"
+      )}
+      activeProps={{
+        className: "bg-gray-900 text-white",
+      }}
+    >
+      {icon}
+      <span>{children}</span>
+    </Link>
+  );
+}
diff --git a/libertas-frontend/src/components/media/authenticated-image.tsx b/libertas-frontend/src/components/media/authenticated-image.tsx
new file mode 100644
index 0000000..2aed4c5
--- /dev/null
+++ b/libertas-frontend/src/components/media/authenticated-image.tsx
@@ -0,0 +1,80 @@
+import { useState, useEffect } from "react";
+import apiClient from "@/services/api-client";
+import { Skeleton } from "@/components/ui/skeleton";
+import { ImageIcon } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+type AuthenticatedImageProps = React.ComponentProps<"img"> & {
+  src: string; // The protected URL, e.g., /media/123/thumbnail
+};
+
+export function AuthenticatedImage({ src, ...props }: AuthenticatedImageProps) {
+  const [objectUrl, setObjectUrl] = useState<string | null>(null);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState(false);
+
+  useEffect(() => {
+    if (!src) {
+      setIsLoading(false);
+      setError(true);
+      return;
+    }
+
+    let isCancelled = false;
+    let currentObjectUrl: string | null = null;
+
+    const fetchImage = async () => {
+      setIsLoading(true);
+      setError(false);
+      try {
+        const response = await apiClient.get(src, {
+          responseType: "blob",
+        });
+
+        if (isCancelled) return;
+
+        const blob = response.data;
+        currentObjectUrl = URL.createObjectURL(blob);
+        setObjectUrl(currentObjectUrl);
+      } catch (err) {
+        if (!isCancelled) {
+          console.error("Failed to fetch authenticated image:", src, err);
+          setError(true);
+        }
+      } finally {
+        if (!isCancelled) {
+          setIsLoading(false);
+        }
+      }
+    };
+
+    fetchImage();
+
+    return () => {
+      isCancelled = true;
+      if (currentObjectUrl) {
+        URL.revokeObjectURL(currentObjectUrl);
+      }
+      setObjectUrl(null);
+    };
+  }, [src]);
+
+  if (isLoading) {
+    return <Skeleton className={cn("h-full w-full", props.className)} />;
+  }
+
+  if (error || !objectUrl) {
+    return (
+      <div
+        className={cn(
+          "flex h-full w-full items-center justify-center bg-gray-200",
+          props.className
+        )}
+      >
+        <ImageIcon className="h-1/2 w-1/2 text-gray-400" />
+      </div>
+    );
+  }
+
+  return <img {...props} src={objectUrl} />;
+}
diff --git a/libertas-frontend/src/components/media/media-viewer.tsx b/libertas-frontend/src/components/media/media-viewer.tsx
new file mode 100644
index 0000000..33d9fde
--- /dev/null
+++ b/libertas-frontend/src/components/media/media-viewer.tsx
@@ -0,0 +1,41 @@
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { type Media } from "@/domain/types";
+import { AuthenticatedImage } from "./authenticated-image";
+import { Skeleton } from "../ui/skeleton";
+
+type MediaViewerProps = {
+  media: Media | null;
+  onOpenChange: (open: boolean) => void;
+};
+
+export function MediaViewer({ media, onOpenChange }: MediaViewerProps) {
+  const isOpen = media !== null;
+
+  return (
+    <Dialog open={isOpen} onOpenChange={onOpenChange}>
+      <DialogContent className="min-w-[90vw] max-w-full h-[90vh] flex flex-col p-4">
+        <DialogHeader>
+          <DialogTitle className="truncate">
+            {media?.original_filename}
+          </DialogTitle>
+        </DialogHeader>
+        <div className="flex-1 flex items-center justify-center overflow-hidden relative">
+          {media ? (
+            <AuthenticatedImage
+              src={media.file_url}
+              alt={media.original_filename}
+              className="max-w-full max-h-full object-contain"
+            />
+          ) : (
+            <Skeleton className="w-full h-full" />
+          )}
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/libertas-frontend/src/components/media/upload-dialog.tsx b/libertas-frontend/src/components/media/upload-dialog.tsx
new file mode 100644
index 0000000..82fd1ed
--- /dev/null
+++ b/libertas-frontend/src/components/media/upload-dialog.tsx
@@ -0,0 +1,76 @@
+import { useState } from "react";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+  DialogFooter,
+} from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { useUploadMedia } from "@/features/media/use-media";
+import { UploadCloud } from "lucide-react";
+
+export function UploadDialog() {
+  const [isOpen, setIsOpen] = useState(false);
+  const [file, setFile] = useState<File | null>(null);
+  const { mutate: upload, isPending } = useUploadMedia();
+
+  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (e.target.files) {
+      setFile(e.target.files[0]);
+    }
+  };
+
+  const handleSubmit = () => {
+    if (file) {
+      upload(
+        { file },
+        {
+          onSuccess: () => {
+            setIsOpen(false);
+            setFile(null);
+            // TODO: Add toast notification
+          },
+        }
+      );
+    }
+  };
+
+  return (
+    <Dialog open={isOpen} onOpenChange={setIsOpen}>
+      <DialogTrigger asChild>
+        <Button>
+          <UploadCloud size={18} className="mr-2" />
+          Upload
+        </Button>
+      </DialogTrigger>
+      <DialogContent className="sm:max-w-[425px]">
+        <DialogHeader>
+          <DialogTitle>Upload Photo</DialogTitle>
+          <DialogDescription>
+            Select a photo from your computer to upload.
+          </DialogDescription>
+        </DialogHeader>
+        <div className="grid gap-4 py-4">
+          <div className="grid w-full max-w-sm items-center gap-1.5">
+            <Label htmlFor="picture">Picture</Label>
+            <Input id="picture" type="file" onChange={handleFileChange} />
+          </div>
+        </div>
+        <DialogFooter>
+          <Button
+            type="submit"
+            onClick={handleSubmit}
+            disabled={!file || isPending}
+          >
+            {isPending ? "Uploading..." : "Upload"}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/libertas-frontend/src/features/albums/use-albums.ts b/libertas-frontend/src/features/albums/use-albums.ts
new file mode 100644
index 0000000..6fff32c
--- /dev/null
+++ b/libertas-frontend/src/features/albums/use-albums.ts
@@ -0,0 +1,30 @@
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
+import { createAlbum, getAlbums } from '@/services/album-service'
+
+/**
+ * Query hook to fetch a list of all albums.
+ */
+export const useGetAlbums = () => {
+  return useQuery({
+    queryKey: ['albums'],
+    queryFn: getAlbums,
+  })
+}
+
+/**
+ * Mutation hook to create a new album.
+ */
+export const useCreateAlbum = () => {
+  const queryClient = useQueryClient()
+
+  return useMutation({
+    mutationFn: createAlbum,
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['albums'] })
+    },
+    onError: (error) => {
+      console.error('Failed to create album:', error)
+      // TODO: Add user-facing toast
+    },
+  })
+}
\ No newline at end of file
diff --git a/libertas-frontend/src/features/media/use-media.ts b/libertas-frontend/src/features/media/use-media.ts
new file mode 100644
index 0000000..40cd949
--- /dev/null
+++ b/libertas-frontend/src/features/media/use-media.ts
@@ -0,0 +1,45 @@
+import {
+  useInfiniteQuery,
+  useMutation,
+  useQueryClient,
+} from '@tanstack/react-query'
+import { getMediaList, uploadMedia } from '@/services/media-service'
+
+const MEDIA_LIST_KEY = ['mediaList']
+
+/**
+ * Query hook to fetch a paginated list of all media.
+ * This uses `useInfiniteQuery` for "load more" functionality.
+ */
+export const useGetMediaList = () => {
+  return useInfiniteQuery({
+    queryKey: MEDIA_LIST_KEY,
+    queryFn: ({ pageParam = 1 }) => getMediaList({ page: pageParam, limit: 20 }),
+    getNextPageParam: (lastPage) => {
+      return lastPage.has_next_page ? lastPage.page + 1 : undefined
+    },
+    initialPageParam: 1,
+  })
+}
+
+/**
+ * Mutation hook to upload a new media file.
+ */
+export const useUploadMedia = () => {
+  const queryClient = useQueryClient()
+
+  return useMutation({
+    mutationFn: ({ file }: { file: File }) =>
+      uploadMedia(file, (progress) => {
+        // TODO: Update upload progress state
+        console.log('Upload Progress:', progress)
+      }),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: MEDIA_LIST_KEY })
+    },
+    onError: (error) => {
+      console.error('Upload failed:', error)
+      // TODO: Add user-facing toast
+    },
+  })
+}
\ No newline at end of file
diff --git a/libertas-frontend/src/routeTree.gen.ts b/libertas-frontend/src/routeTree.gen.ts
index 3638c07..569c270 100644
--- a/libertas-frontend/src/routeTree.gen.ts
+++ b/libertas-frontend/src/routeTree.gen.ts
@@ -12,6 +12,10 @@ import { Route as rootRouteImport } from './routes/__root'
 import { Route as LoginRouteImport } from './routes/login'
 import { Route as AboutRouteImport } from './routes/about'
 import { Route as IndexRouteImport } from './routes/index'
+import { Route as PeopleIndexRouteImport } from './routes/people/index'
+import { Route as MediaIndexRouteImport } from './routes/media/index'
+import { Route as AlbumsIndexRouteImport } from './routes/albums/index'
+import { Route as AlbumsAlbumIdRouteImport } from './routes/albums/$albumId'
 
 const LoginRoute = LoginRouteImport.update({
   id: '/login',
@@ -28,35 +32,93 @@ const IndexRoute = IndexRouteImport.update({
   path: '/',
   getParentRoute: () => rootRouteImport,
 } as any)
+const PeopleIndexRoute = PeopleIndexRouteImport.update({
+  id: '/people/',
+  path: '/people/',
+  getParentRoute: () => rootRouteImport,
+} as any)
+const MediaIndexRoute = MediaIndexRouteImport.update({
+  id: '/media/',
+  path: '/media/',
+  getParentRoute: () => rootRouteImport,
+} as any)
+const AlbumsIndexRoute = AlbumsIndexRouteImport.update({
+  id: '/albums/',
+  path: '/albums/',
+  getParentRoute: () => rootRouteImport,
+} as any)
+const AlbumsAlbumIdRoute = AlbumsAlbumIdRouteImport.update({
+  id: '/albums/$albumId',
+  path: '/albums/$albumId',
+  getParentRoute: () => rootRouteImport,
+} as any)
 
 export interface FileRoutesByFullPath {
   '/': typeof IndexRoute
   '/about': typeof AboutRoute
   '/login': typeof LoginRoute
+  '/albums/$albumId': typeof AlbumsAlbumIdRoute
+  '/albums': typeof AlbumsIndexRoute
+  '/media': typeof MediaIndexRoute
+  '/people': typeof PeopleIndexRoute
 }
 export interface FileRoutesByTo {
   '/': typeof IndexRoute
   '/about': typeof AboutRoute
   '/login': typeof LoginRoute
+  '/albums/$albumId': typeof AlbumsAlbumIdRoute
+  '/albums': typeof AlbumsIndexRoute
+  '/media': typeof MediaIndexRoute
+  '/people': typeof PeopleIndexRoute
 }
 export interface FileRoutesById {
   __root__: typeof rootRouteImport
   '/': typeof IndexRoute
   '/about': typeof AboutRoute
   '/login': typeof LoginRoute
+  '/albums/$albumId': typeof AlbumsAlbumIdRoute
+  '/albums/': typeof AlbumsIndexRoute
+  '/media/': typeof MediaIndexRoute
+  '/people/': typeof PeopleIndexRoute
 }
 export interface FileRouteTypes {
   fileRoutesByFullPath: FileRoutesByFullPath
-  fullPaths: '/' | '/about' | '/login'
+  fullPaths:
+    | '/'
+    | '/about'
+    | '/login'
+    | '/albums/$albumId'
+    | '/albums'
+    | '/media'
+    | '/people'
   fileRoutesByTo: FileRoutesByTo
-  to: '/' | '/about' | '/login'
-  id: '__root__' | '/' | '/about' | '/login'
+  to:
+    | '/'
+    | '/about'
+    | '/login'
+    | '/albums/$albumId'
+    | '/albums'
+    | '/media'
+    | '/people'
+  id:
+    | '__root__'
+    | '/'
+    | '/about'
+    | '/login'
+    | '/albums/$albumId'
+    | '/albums/'
+    | '/media/'
+    | '/people/'
   fileRoutesById: FileRoutesById
 }
 export interface RootRouteChildren {
   IndexRoute: typeof IndexRoute
   AboutRoute: typeof AboutRoute
   LoginRoute: typeof LoginRoute
+  AlbumsAlbumIdRoute: typeof AlbumsAlbumIdRoute
+  AlbumsIndexRoute: typeof AlbumsIndexRoute
+  MediaIndexRoute: typeof MediaIndexRoute
+  PeopleIndexRoute: typeof PeopleIndexRoute
 }
 
 declare module '@tanstack/react-router' {
@@ -82,6 +144,34 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof IndexRouteImport
       parentRoute: typeof rootRouteImport
     }
+    '/people/': {
+      id: '/people/'
+      path: '/people'
+      fullPath: '/people'
+      preLoaderRoute: typeof PeopleIndexRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+    '/media/': {
+      id: '/media/'
+      path: '/media'
+      fullPath: '/media'
+      preLoaderRoute: typeof MediaIndexRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+    '/albums/': {
+      id: '/albums/'
+      path: '/albums'
+      fullPath: '/albums'
+      preLoaderRoute: typeof AlbumsIndexRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+    '/albums/$albumId': {
+      id: '/albums/$albumId'
+      path: '/albums/$albumId'
+      fullPath: '/albums/$albumId'
+      preLoaderRoute: typeof AlbumsAlbumIdRouteImport
+      parentRoute: typeof rootRouteImport
+    }
   }
 }
 
@@ -89,6 +179,10 @@ const rootRouteChildren: RootRouteChildren = {
   IndexRoute: IndexRoute,
   AboutRoute: AboutRoute,
   LoginRoute: LoginRoute,
+  AlbumsAlbumIdRoute: AlbumsAlbumIdRoute,
+  AlbumsIndexRoute: AlbumsIndexRoute,
+  MediaIndexRoute: MediaIndexRoute,
+  PeopleIndexRoute: PeopleIndexRoute,
 }
 export const routeTree = rootRouteImport
   ._addFileChildren(rootRouteChildren)
diff --git a/libertas-frontend/src/routes/__root.tsx b/libertas-frontend/src/routes/__root.tsx
index 4870395..e02bdcb 100644
--- a/libertas-frontend/src/routes/__root.tsx
+++ b/libertas-frontend/src/routes/__root.tsx
@@ -9,6 +9,8 @@ import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
 import type { QueryClient } from "@tanstack/react-query";
 import { useAuthStorage } from "@/hooks/use-auth-storage";
 import { useEffect } from "react";
+import { Sidebar } from "@/components/layout/sidebar";
+import { UploadDialog } from "@/components/media/upload-dialog";
 
 export const Route = createRootRouteWithContext<{
   queryClient: QueryClient;
@@ -29,7 +31,7 @@ function RootComponent() {
   const navigate = useNavigate();
 
   useEffect(() => {
-    if (!token) {
+    if (!token && location.pathname !== "/login") {
       navigate({
         to: "/login",
         replace: true,
@@ -37,12 +39,29 @@ function RootComponent() {
     }
   }, [token, navigate]);
 
+  if (!token) {
+    return (
+      <>
+        <Outlet />
+        <ReactQueryDevtools buttonPosition="top-right" />
+        <TanStackRouterDevtools position="bottom-right" />
+      </>
+    );
+  }
+
   return (
     <>
       <div className="flex h-screen bg-gray-100">
-        {/* <Sidebar /> */}
-        <div className="flex-1 flex flex-col">
-          {/* <Header /> */}
+        <Sidebar /> {/*  */}
+        <div className="flex-1 flex flex-col h-screen">
+          <header className="bg-white shadow-sm border-b border-gray-200">
+            <div className="mx-auto px-4 sm:px-6 lg:px-8">
+              <div className="flex justify-end h-16 items-center">
+                <UploadDialog />
+              </div>
+            </div>
+          </header>
+
           <main className="flex-1 p-6 overflow-y-auto">
             <Outlet />
           </main>
diff --git a/libertas-frontend/src/routes/albums/$albumId.tsx b/libertas-frontend/src/routes/albums/$albumId.tsx
new file mode 100644
index 0000000..f29258e
--- /dev/null
+++ b/libertas-frontend/src/routes/albums/$albumId.tsx
@@ -0,0 +1,19 @@
+import { createFileRoute } from "@tanstack/react-router";
+
+export const Route = createFileRoute("/albums/$albumId")({
+  component: AlbumDetailPage,
+});
+
+function AlbumDetailPage() {
+  const { albumId } = Route.useParams();
+
+  return (
+    <div>
+      <h1 className="text-3xl font-bold">Album: {albumId}</h1>
+      <p className="mt-4">
+        This page will show the details and photos for a single album.
+      </p>
+      {/* TODO: Fetch album details and display media grid */}
+    </div>
+  );
+}
diff --git a/libertas-frontend/src/routes/albums/index.tsx b/libertas-frontend/src/routes/albums/index.tsx
new file mode 100644
index 0000000..f7c9f42
--- /dev/null
+++ b/libertas-frontend/src/routes/albums/index.tsx
@@ -0,0 +1,34 @@
+import { createFileRoute } from "@tanstack/react-router";
+import { useGetAlbums } from "@/features/albums/use-albums";
+import { AlbumCard } from "@/components/albums/album-card";
+import { CreateAlbumDialog } from "@/components/albums/create-album-dialog";
+import { Separator } from "@/components/ui/separator";
+
+export const Route = createFileRoute("/albums/")({
+  component: AlbumsPage,
+});
+
+function AlbumsPage() {
+  const { data: albums, isLoading, error } = useGetAlbums();
+
+  return (
+    <div className="space-y-6">
+      <div className="flex items-center justify-between">
+        <h1 className="text-3xl font-bold">Albums</h1>
+        <CreateAlbumDialog />
+      </div>
+      <Separator />
+
+      {isLoading && <p>Loading albums...</p>}
+      {error && <p>Error loading albums: {error.message}</p>}
+
+      {albums && (
+        <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
+          {albums.map((album) => (
+            <AlbumCard key={album.id} album={album} />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/libertas-frontend/src/routes/media/index.tsx b/libertas-frontend/src/routes/media/index.tsx
new file mode 100644
index 0000000..f80f8ec
--- /dev/null
+++ b/libertas-frontend/src/routes/media/index.tsx
@@ -0,0 +1,72 @@
+import { useGetMediaList } from "@/features/media/use-media";
+import { createFileRoute } from "@tanstack/react-router";
+import { Button } from "@/components/ui/button";
+import { AuthenticatedImage } from "@/components/media/authenticated-image";
+import type { Media } from "@/domain/types";
+import { useState } from "react";
+import { MediaViewer } from "@/components/media/media-viewer";
+
+export const Route = createFileRoute("/media/")({
+  component: MediaPage,
+});
+
+function MediaPage() {
+  const {
+    data,
+    isLoading,
+    error,
+    fetchNextPage,
+    hasNextPage,
+    isFetchingNextPage,
+  } = useGetMediaList();
+
+  const [selectedMedia, setSelectedMedia] = useState<Media | null>(null);
+
+  return (
+    <div className="space-y-6">
+      <div className="flex items-center justify-between">
+        <h1 className="text-3xl font-bold">All Photos</h1>
+      </div>
+
+      {isLoading && <p>Loading photos...</p>}
+      {error && <p>Error loading photos: {error.message}</p>}
+
+      {data && (
+        <div className="grid grid-cols-3 sm:grid-cols-4 md:grid-cols-6 lg:grid-cols-8 gap-2">
+          {data.pages.map((page) =>
+            page.data.map((media) => (
+              <div
+                key={media.id}
+                className="aspect-square bg-gray-200 rounded-md overflow-hidden cursor-pointer hover:opacity-80 transition-opacity"
+                onClick={() => setSelectedMedia(media)}
+              >
+                <AuthenticatedImage
+                  src={media.thumbnail_url ?? media.file_url}
+                  alt={media.original_filename}
+                  className="w-full h-full object-cover"
+                />
+              </div>
+            ))
+          )}
+        </div>
+      )}
+
+      {hasNextPage && (
+        <div className="flex justify-center mt-6">
+          <Button onClick={() => fetchNextPage()} disabled={isFetchingNextPage}>
+            {isFetchingNextPage ? "Loading more..." : "Load More"}
+          </Button>
+        </div>
+      )}
+
+      <MediaViewer
+        media={selectedMedia}
+        onOpenChange={(open) => {
+          if (!open) {
+            setSelectedMedia(null);
+          }
+        }}
+      />
+    </div>
+  );
+}
diff --git a/libertas-frontend/src/routes/people/index.tsx b/libertas-frontend/src/routes/people/index.tsx
new file mode 100644
index 0000000..7705413
--- /dev/null
+++ b/libertas-frontend/src/routes/people/index.tsx
@@ -0,0 +1,17 @@
+import { createFileRoute } from "@tanstack/react-router";
+
+export const Route = createFileRoute("/people/")({
+  component: PeoplePage,
+});
+
+function PeoplePage() {
+  return (
+    <div>
+      <h1 className="text-3xl font-bold">People</h1>
+      <p className="mt-4">
+        This is where you'll see all the people identified in your photos.
+      </p>
+      {/* TODO: Add 'Cluster Faces' button */}
+    </div>
+  );
+}
diff --git a/libertas-frontend/src/services/album-service.ts b/libertas-frontend/src/services/album-service.ts
new file mode 100644
index 0000000..17379c1
--- /dev/null
+++ b/libertas-frontend/src/services/album-service.ts
@@ -0,0 +1,26 @@
+import type { Album } from "@/domain/types"
+import apiClient from "@/services/api-client"
+
+export type CreateAlbumPayload = {
+  name: string
+  description?: string
+}
+
+/**
+ * Fetches a list of albums.
+ * TODO: This should become paginated later.
+ */
+export const getAlbums = async (): Promise<Album[]> => {
+  const { data } = await apiClient.get('/albums')
+  return data
+}
+
+/**
+ * Creates a new album.
+ */
+export const createAlbum = async (
+  payload: CreateAlbumPayload,
+): Promise<Album> => {
+  const { data } = await apiClient.post('/albums', payload)
+  return data
+}
\ No newline at end of file
diff --git a/libertas-frontend/src/services/api-client.ts b/libertas-frontend/src/services/api-client.ts
index 3e6418f..ade9cab 100644
--- a/libertas-frontend/src/services/api-client.ts
+++ b/libertas-frontend/src/services/api-client.ts
@@ -3,7 +3,7 @@ import { useAuthStorage } from '@/hooks/use-auth-storage'
 
 
 const apiClient = axios.create({
-  baseURL: 'http://localhost:8080/api/v1',
+  baseURL: import.meta.env.VITE_API_BASE_URL || 'http://localhost:8000/api/v1',
 })
 
 apiClient.interceptors.request.use(
diff --git a/libertas-frontend/src/services/media-service.ts b/libertas-frontend/src/services/media-service.ts
new file mode 100644
index 0000000..7ff8d8a
--- /dev/null
+++ b/libertas-frontend/src/services/media-service.ts
@@ -0,0 +1,56 @@
+import type { Media, PaginatedResponse } from "@/domain/types"
+import apiClient from "@/services/api-client"
+
+type MediaListParams = {
+  page: number
+  limit: number
+}
+
+/**
+ * Fetches a paginated list of media.
+ */
+export const getMediaList = async ({
+  page,
+  limit,
+}: MediaListParams): Promise<PaginatedResponse<Media>> => {
+  const { data } = await apiClient.get('/media', {
+    params: { page, limit },
+  })
+
+  // we need to append base url to file_url and thumbnail_url
+  const prefix = import.meta.env.VITE_PREFIX_PATH || apiClient.defaults.baseURL;
+
+  data.data = data.data.map((media: Media) => ({
+    ...media,
+    file_url: `${prefix}${media.file_url}`,
+    thumbnail_url: media.thumbnail_url
+      ? `${prefix}${media.thumbnail_url}`
+      : null,
+  }))
+
+  return data
+}
+
+/**
+ * Uploads a new media file.
+ */
+export const uploadMedia = async (
+  file: File,
+  onProgress: (progress: number) => void,
+): Promise<Media> => {
+  const formData = new FormData()
+  formData.append('file', file)
+
+  const { data } = await apiClient.post('/media', formData, {
+    headers: {
+      'Content-Type': 'multipart/form-data',
+    },
+    onUploadProgress: (progressEvent) => {
+      const percentCompleted = Math.round(
+        (progressEvent.loaded * 100) / (progressEvent.total ?? 100),
+      )
+      onProgress(percentCompleted)
+    },
+  })
+  return data
+}
\ No newline at end of file