v0.1.0

2026-03-02 13:18:27 +00:00 · 2025-07-15 22:54:35 +02:00
commit f7eda17284
89 changed files with 18535 additions and 0 deletions
--- a/frontend/.gitignore
+++ b/frontend/.gitignore
@@ -0,0 +1,41 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# env files (can opt-in for committing if needed)
+.env*
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
--- a/frontend/Dockerfile
+++ b/frontend/Dockerfile
@@ -0,0 +1,37 @@
+# Dockerfile for Next.js frontend
+
+# 1. Build Stage
+FROM node:24-alpine AS builder
+WORKDIR /app
+
+# Copy package.json and package-lock.json
+COPY package*.json ./
+
+# Install dependencies
+RUN npm install
+
+# Copy the rest of the application
+COPY . .
+
+# Set the API URL for the build
+ARG NEXT_PUBLIC_API_URL=/api
+ENV NEXT_PUBLIC_API_URL=${NEXT_PUBLIC_API_URL}
+
+# Build the Next.js application
+RUN npm run build
+
+# 2. Production Stage
+FROM node:24-alpine
+WORKDIR /app
+
+# Copy the built application from the builder stage
+COPY --from=builder /app/.next ./.next
+COPY --from=builder /app/public ./public
+COPY --from=builder /app/package.json ./package.json
+COPY --from=builder /app/node_modules ./node_modules
+
+# Expose the port the app runs on
+EXPOSE 3000
+
+# Start the application
+CMD ["npm", "start"]
--- a/frontend/components/letterfeed/AddNewsletterDialog.tsx
+++ b/frontend/components/letterfeed/AddNewsletterDialog.tsx
@@ -0,0 +1,115 @@
+import { useState } from "react"
+import { Button } from "@/components/ui/button"
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import { Plus } from "lucide-react"
+import { createNewsletter } from "@/lib/api"
+
+interface AddNewsletterDialogProps {
+  isOpen: boolean
+  onOpenChange: (isOpen: boolean) => void
+  onSuccess: () => void
+}
+
+export function AddNewsletterDialog({ isOpen, onOpenChange, onSuccess }: AddNewsletterDialogProps) {
+  const [newNewsletter, setNewNewsletter] = useState({
+    name: "",
+    emails: [""],
+  })
+
+  const handleAddEmail = () => {
+    setNewNewsletter((prev) => ({
+      ...prev,
+      emails: [...prev.emails, ""],
+    }))
+  }
+
+  const handleRemoveEmail = (index: number) => {
+    setNewNewsletter((prev) => ({
+      ...prev,
+      emails: prev.emails.filter((_, i) => i !== index),
+    }))
+  }
+
+  const handleEmailChange = (index: number, value: string) => {
+    setNewNewsletter((prev) => ({
+      ...prev,
+      emails: prev.emails.map((email, i) => (i === index ? value : email)),
+    }))
+  }
+
+  const handleSubmit = async () => {
+    if (newNewsletter.name && newNewsletter.emails.some((email) => email.trim())) {
+      try {
+        await createNewsletter({
+          name: newNewsletter.name,
+          sender_emails: newNewsletter.emails.filter((email) => email.trim()),
+        })
+        setNewNewsletter({ name: "", emails: [""] })
+        onOpenChange(false)
+        onSuccess()
+      } catch (error) {
+        console.error("Failed to create newsletter:", error)
+      }
+    }
+  }
+
+  return (
+    <Dialog open={isOpen} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-[425px]">
+        <DialogHeader>
+          <DialogTitle>Register New Newsletter</DialogTitle>
+          <DialogDescription>Add a new newsletter.</DialogDescription>
+        </DialogHeader>
+        <div className="grid gap-4 py-4">
+          <div className="space-y-2">
+            <Label htmlFor="name">Newsletter Name</Label>
+            <Input
+              id="name"
+              value={newNewsletter.name}
+              onChange={(e) => setNewNewsletter((prev) => ({ ...prev, name: e.target.value }))}
+              placeholder="Enter newsletter name"
+            />
+          </div>
+
+          <div className="space-y-2">
+            <Label>Email Addresses</Label>
+            {newNewsletter.emails.map((email, index) => (
+              <div key={index} className="flex gap-2">
+                <Input
+                  value={email}
+                  onChange={(e) => handleEmailChange(index, e.target.value)}
+                  placeholder="Enter email address"
+                  type="email"
+                />
+                {newNewsletter.emails.length > 1 && (
+                  <Button variant="outline" size="sm" onClick={() => handleRemoveEmail(index)}>
+                    Remove
+                  </Button>
+                )}
+              </div>
+            ))}
+            <Button variant="outline" size="sm" onClick={handleAddEmail} className="w-full bg-transparent">
+              <Plus className="w-4 h-4 mr-2" />
+              Add Another Email
+            </Button>
+          </div>
+        </div>
+        <DialogFooter>
+          <Button variant="outline" onClick={() => onOpenChange(false)}>
+            Cancel
+          </Button>
+          <Button onClick={handleSubmit}>Register Newsletter</Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}
--- a/frontend/components/letterfeed/EditNewsletterDialog.tsx
+++ b/frontend/components/letterfeed/EditNewsletterDialog.tsx
@@ -0,0 +1,139 @@
+import { useState, useEffect } from "react"
+import { Button } from "@/components/ui/button"
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import { Plus } from "lucide-react"
+import { Newsletter, updateNewsletter, deleteNewsletter } from "@/lib/api"
+
+interface EditNewsletterDialogProps {
+  newsletter: Newsletter | null
+  isOpen: boolean
+  onOpenChange: (isOpen: boolean) => void
+  onSuccess: () => void
+}
+
+export function EditNewsletterDialog({ newsletter, isOpen, onOpenChange, onSuccess }: EditNewsletterDialogProps) {
+  const [editedDetails, setEditedDetails] = useState<{ name: string; emails: string[] }>({
+    name: "",
+    emails: [],
+  })
+
+  useEffect(() => {
+    if (newsletter) {
+      setEditedDetails({
+        name: newsletter.name,
+        emails: newsletter.senders.map((s) => s.email),
+      })
+    }
+  }, [newsletter])
+
+  if (!newsletter) return null
+
+  const handleUpdateEmailChange = (index: number, value: string) => {
+    setEditedDetails((prev) => ({
+      ...prev,
+      emails: prev.emails.map((email, i) => (i === index ? value : email)),
+    }))
+  }
+
+  const handleAddEmailToEdit = () => {
+    setEditedDetails((prev) => ({
+      ...prev,
+      emails: [...prev.emails, ""],
+    }))
+  }
+
+  const handleRemoveEmailFromEdit = (index: number) => {
+    setEditedDetails((prev) => ({
+      ...prev,
+      emails: prev.emails.filter((_, i) => i !== index),
+    }))
+  }
+
+  const handleUpdate = async () => {
+    try {
+      await updateNewsletter(newsletter.id, {
+        name: editedDetails.name,
+        sender_emails: editedDetails.emails.filter((email) => email.trim()),
+      })
+      onOpenChange(false)
+      onSuccess()
+    } catch (error) {
+      console.error("Failed to update newsletter:", error)
+    }
+  }
+
+  const handleDelete = async () => {
+    if (window.confirm(`Are you sure you want to delete the "${newsletter.name}" newsletter?`)) {
+      try {
+        await deleteNewsletter(newsletter.id)
+        onOpenChange(false)
+        onSuccess()
+      } catch (error) {
+        console.error("Failed to delete newsletter:", error)
+      }
+    }
+  }
+
+  return (
+    <Dialog open={isOpen} onOpenChange={onOpenChange}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Edit Newsletter</DialogTitle>
+          <DialogDescription>Update the details for {newsletter.name}.</DialogDescription>
+        </DialogHeader>
+        <div className="grid gap-4 py-4">
+          <div className="space-y-2">
+            <Label htmlFor="edit-name">Newsletter Name</Label>
+            <Input
+              id="edit-name"
+              value={editedDetails.name}
+              onChange={(e) => setEditedDetails((prev) => ({ ...prev, name: e.target.value }))}
+            />
+          </div>
+          <div className="space-y-2">
+            <Label>Email Addresses</Label>
+            {editedDetails.emails.map((email, index) => (
+              <div key={index} className="flex gap-2">
+                <Input
+                  value={email}
+                  onChange={(e) => handleUpdateEmailChange(index, e.target.value)}
+                  placeholder="Enter email address"
+                  type="email"
+                />
+                {editedDetails.emails.length > 1 && (
+                  <Button variant="outline" size="sm" onClick={() => handleRemoveEmailFromEdit(index)}>
+                    Remove
+                  </Button>
+                )}
+              </div>
+            ))}
+            <Button variant="outline" size="sm" onClick={handleAddEmailToEdit} className="w-full bg-transparent">
+              <Plus className="w-4 h-4 mr-2" />
+              Add Another Email
+            </Button>
+          </div>
+        </div>
+        <DialogFooter className="sm:justify-between">
+          <Button variant="destructive" onClick={handleDelete}>
+            Delete Newsletter
+          </Button>
+          <div className="flex gap-2">
+            <Button variant="outline" onClick={() => onOpenChange(false)}>
+              Cancel
+            </Button>
+            <Button onClick={handleUpdate}>Save Changes</Button>
+          </div>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}
--- a/frontend/components/letterfeed/EmptyState.tsx
+++ b/frontend/components/letterfeed/EmptyState.tsx
@@ -0,0 +1,20 @@
+import { Button } from "@/components/ui/button"
+import { Plus, Rss } from "lucide-react"
+
+interface EmptyStateProps {
+  onAddNewsletter: () => void
+}
+
+export function EmptyState({ onAddNewsletter }: EmptyStateProps) {
+  return (
+    <div className="text-center py-12">
+      <Rss className="w-12 h-12 text-gray-400 mx-auto mb-4" />
+      <h3 className="text-lg font-medium text-gray-900 mb-2">No newsletters registered</h3>
+      <p className="text-gray-600 mb-4">Get started by adding your first newsletter</p>
+      <Button onClick={onAddNewsletter}>
+        <Plus className="w-4 h-4 mr-2" />
+        Add Your First Newsletter
+      </Button>
+    </div>
+  )
+}
--- a/frontend/components/letterfeed/Header.tsx
+++ b/frontend/components/letterfeed/Header.tsx
@@ -0,0 +1,34 @@
+import { Button } from "@/components/ui/button"
+import { Plus, Settings } from "lucide-react"
+import Image from "next/image"
+
+interface HeaderProps {
+  onOpenAddNewsletter: () => void
+  onOpenSettings: () => void
+}
+
+export function Header({ onOpenAddNewsletter, onOpenSettings }: HeaderProps) {
+  return (
+    <div className="flex items-center justify-between mb-8">
+      <div className="flex items-center gap-4">
+        <Image src="/logo.png" alt="LetterFeed Logo" width={48} height={48} className="rounded-lg" />
+        <div>
+          <h1 className="text-3xl font-bold text-gray-900">LetterFeed</h1>
+          <p className="text-gray-600 mt-1">Read your newsletters as RSS feeds!</p>
+        </div>
+      </div>
+
+      <div className="flex gap-2">
+        <Button onClick={onOpenAddNewsletter}>
+          <Plus className="w-4 h-4 mr-2" />
+          Add Newsletter
+        </Button>
+
+        <Button variant="outline" onClick={onOpenSettings}>
+          <Settings className="w-4 h-4 mr-2" />
+          Settings
+        </Button>
+      </div>
+    </div>
+  )
+}
--- a/frontend/components/letterfeed/LoadingSpinner.tsx
+++ b/frontend/components/letterfeed/LoadingSpinner.tsx
@@ -0,0 +1,9 @@
+import { Loader2 } from "lucide-react"
+
+export function LoadingSpinner() {
+  return (
+    <div className="min-h-screen bg-gray-50 flex items-center justify-center">
+      <Loader2 className="w-12 h-12 text-gray-400 animate-spin" data-testid="loading-spinner" />
+    </div>
+  )
+}
--- a/frontend/components/letterfeed/NewsletterCard.tsx
+++ b/frontend/components/letterfeed/NewsletterCard.tsx
@@ -0,0 +1,61 @@
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
+import { Button } from "@/components/ui/button"
+import { Badge } from "@/components/ui/badge"
+import { Rss, Mail, ExternalLink, Edit } from "lucide-react"
+import { Newsletter, getFeedUrl } from "@/lib/api"
+
+interface NewsletterCardProps {
+  newsletter: Newsletter
+  onEdit: (newsletter: Newsletter) => void
+}
+
+export function NewsletterCard({ newsletter, onEdit }: NewsletterCardProps) {
+  return (
+    <Card className="hover:shadow-md transition-shadow flex flex-col">
+      <CardHeader>
+        <div className="flex justify-between items-start">
+          <div>
+            <CardTitle className="flex items-center gap-2">
+              <Rss className="w-5 h-5 text-orange-500" />
+              {newsletter.name}
+            </CardTitle>
+            <CardDescription>
+                      {newsletter.entries_count} entr{newsletter.entries_count !== 1 ? "ies" : "y"}
+                    </CardDescription>
+          </div>
+          <Button variant="ghost" size="icon" onClick={() => onEdit(newsletter)} aria-label="Edit Newsletter">
+            <Edit className="w-4 h-4" />
+          </Button>
+        </div>
+      </CardHeader>
+      <CardContent className="space-y-4 flex-grow">
+        <div>
+          <h4 className="text-sm font-medium text-gray-700 mb-2 flex items-center gap-1">
+            <Mail className="w-4 h-4" />
+            Email Addresses
+          </h4>
+          <div className="flex flex-wrap gap-1">
+            {newsletter.senders.map((sender) => (
+              <Badge key={sender.id} variant="secondary" className="text-xs">
+                {sender.email}
+              </Badge>
+            ))}
+          </div>
+        </div>
+
+        <div>
+          <h4 className="text-sm font-medium text-gray-700 mb-2">RSS Feed</h4>
+          <a
+            href={getFeedUrl(newsletter.id)}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="inline-flex items-center gap-1 text-sm text-blue-600 hover:text-blue-800 hover:underline"
+          >
+            <ExternalLink className="w-3 h-3" />
+            {getFeedUrl(newsletter.id)}
+          </a>
+        </div>
+      </CardContent>
+    </Card>
+  )
+}
--- a/frontend/components/letterfeed/NewsletterList.tsx
+++ b/frontend/components/letterfeed/NewsletterList.tsx
@@ -0,0 +1,17 @@
+import { Newsletter } from "@/lib/api"
+import { NewsletterCard } from "./NewsletterCard"
+
+interface NewsletterListProps {
+  newsletters: Newsletter[]
+  onEditNewsletter: (newsletter: Newsletter) => void
+}
+
+export function NewsletterList({ newsletters, onEditNewsletter }: NewsletterListProps) {
+  return (
+    <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
+      {newsletters.map((newsletter) => (
+        <NewsletterCard key={newsletter.id} newsletter={newsletter} onEdit={onEditNewsletter} />
+      ))}
+    </div>
+  )
+}
--- a/frontend/components/letterfeed/SettingsDialog.tsx
+++ b/frontend/components/letterfeed/SettingsDialog.tsx
@@ -0,0 +1,227 @@
+import { useState, useEffect } from "react"
+import { Button } from "@/components/ui/button"
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import { Checkbox } from "@/components/ui/checkbox"
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
+import { Loader2, CheckCircle, XCircle } from "lucide-react"
+import { Settings as AppSettings, SettingsCreate, updateSettings, testImapConnection } from "@/lib/api"
+
+interface SettingsDialogProps {
+  settings: AppSettings
+  folderOptions: string[]
+  isOpen: boolean
+  onOpenChange: (isOpen: boolean) => void
+  onSuccess: () => void
+}
+
+export function SettingsDialog({ settings, folderOptions, isOpen, onOpenChange, onSuccess }: SettingsDialogProps) {
+  const [currentSettings, setCurrentSettings] = useState<SettingsCreate | null>(null)
+  const [testConnectionStatus, setTestConnectionStatus] = useState<"idle" | "loading" | "success" | "error">("idle")
+  const [testConnectionMessage, setTestConnectionMessage] = useState("")
+
+  useEffect(() => {
+    if (settings) {
+      setCurrentSettings({ ...settings, imap_password: "" })
+    }
+  }, [settings])
+
+  if (!currentSettings) return null
+
+  const handleSettingsChange = <K extends keyof SettingsCreate>(key: K, value: SettingsCreate[K]) => {
+    setCurrentSettings((prev) => (prev ? { ...prev, [key]: value } : null))
+  }
+
+  const handleSave = async () => {
+    if (!currentSettings) return
+    try {
+      await updateSettings(currentSettings)
+      onOpenChange(false)
+      onSuccess()
+    } catch (error) {
+      console.error("Failed to save settings:", error)
+    }
+  }
+
+  const handleTestConnection = async () => {
+    if (!currentSettings) return
+    setTestConnectionStatus("loading")
+    try {
+      await updateSettings(currentSettings)
+      const result = await testImapConnection()
+      setTestConnectionStatus("success")
+      setTestConnectionMessage(result.message)
+    } catch (error: unknown) {
+      setTestConnectionStatus("error")
+      if (error instanceof Error) {
+        setTestConnectionMessage(error.message || "Connection failed")
+      } else {
+        setTestConnectionMessage("An unknown error occurred")
+      }
+    }
+  }
+
+  return (
+    <Dialog open={isOpen} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-2xl max-h-[90vh] overflow-y-auto">
+        <DialogHeader>
+          <DialogTitle>Settings</DialogTitle>
+          <DialogDescription>Fields are locked if they are set by environment variables.</DialogDescription>
+        </DialogHeader>
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-x-8 gap-y-6 py-4">
+          {/* IMAP Configuration */}
+          <div className="space-y-4">
+            <h3 className="text-lg font-medium col-span-1 md:col-span-2">IMAP Configuration</h3>
+            <div className="space-y-2">
+              <Label htmlFor="imap-server">IMAP Server</Label>
+              <Input
+                id="imap-server"
+                value={currentSettings.imap_server}
+                onChange={(e) => handleSettingsChange("imap_server", e.target.value)}
+                placeholder="imap.gmail.com"
+                disabled={settings.locked_fields.includes("imap_server")}
+              />
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="imap-username">IMAP Username</Label>
+              <Input
+                id="imap-username"
+                value={currentSettings.imap_username}
+                onChange={(e) => handleSettingsChange("imap_username", e.target.value)}
+                placeholder="your-email@gmail.com"
+                disabled={settings.locked_fields.includes("imap_username")}
+              />
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="imap-password">IMAP Password</Label>
+              <Input
+                id="imap-password"
+                type="password"
+                value={currentSettings.imap_password}
+                onChange={(e) => handleSettingsChange("imap_password", e.target.value)}
+                placeholder="Your password or app password"
+                disabled={settings.locked_fields.includes("imap_password")}
+              />
+            </div>
+            <div className="pt-2">
+              <Button
+                onClick={handleTestConnection}
+                disabled={testConnectionStatus === "loading"}
+                variant="outline"
+                size="sm"
+              >
+                {testConnectionStatus === "loading" && <Loader2 className="w-4 h-4 mr-2 animate-spin" />}
+                Test Connection
+              </Button>
+              {testConnectionStatus !== "idle" && (
+                <div
+                  data-testid="connection-status"
+                  className={`mt-2 flex items-center text-sm ${
+                    testConnectionStatus === "success" ? "text-green-600" : "text-red-600"
+                  }`}
+                >
+                  {testConnectionStatus === "success" && <CheckCircle className="w-4 h-4 mr-2" />}
+                  {testConnectionStatus === "error" && <XCircle className="w-4 h-4 mr-2" />}
+                  {testConnectionMessage}
+                </div>
+              )}
+            </div>
+          </div>
+
+          {/* Email Processing */}
+          <div className="space-y-4">
+            <h3 className="text-lg font-medium col-span-1 md:col-span-2">Email Processing</h3>
+            <div className="space-y-2">
+              <Label htmlFor="search-folder">Folder to Search</Label>
+              <Select
+                value={currentSettings.search_folder}
+                onValueChange={(value) => handleSettingsChange("search_folder", value)}
+                disabled={settings.locked_fields.includes("search_folder")}
+              >
+                <SelectTrigger>
+                  <SelectValue placeholder="Select folder" />
+                </SelectTrigger>
+                <SelectContent>
+                  {folderOptions.map((folder) => (
+                    <SelectItem key={folder} value={folder}>
+                      {folder}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="move-folder">Move to Folder</Label>
+              <Select
+                value={currentSettings.move_to_folder || "None"}
+                onValueChange={(value) => handleSettingsChange("move_to_folder", value === "None" ? null : value)}
+                disabled={settings.locked_fields.includes("move_to_folder")}
+              >
+                <SelectTrigger>
+                  <SelectValue placeholder="Select folder or leave empty" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="None">None (Don&apos;t move)</SelectItem>
+                  {folderOptions.map((folder) => (
+                    <SelectItem key={folder} value={folder}>
+                      {folder}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="check-interval">Check Interval (minutes)</Label>
+              <Input
+                id="check-interval"
+                type="number"
+                min="1"
+                max="1440"
+                value={currentSettings.email_check_interval}
+                onChange={(e) => handleSettingsChange("email_check_interval", Number.parseInt(e.target.value) || 15)}
+                placeholder="15"
+                disabled={settings.locked_fields.includes("email_check_interval")}
+              />
+            </div>
+            <div className="flex items-center space-x-2 pt-2">
+              <Checkbox
+                id="mark-read"
+                checked={currentSettings.mark_as_read}
+                onCheckedChange={(checked) => handleSettingsChange("mark_as_read", !!checked)}
+                disabled={settings.locked_fields.includes("mark_as_read")}
+              />
+              <Label htmlFor="mark-read" className="text-sm font-normal">
+                Mark emails as read
+              </Label>
+            </div>
+            <div className="flex items-center space-x-2">
+              <Checkbox
+                id="auto-add"
+                checked={currentSettings.auto_add_new_senders}
+                onCheckedChange={(checked) => handleSettingsChange("auto_add_new_senders", !!checked)}
+                disabled={settings.locked_fields.includes("auto_add_new_senders")}
+              />
+              <Label htmlFor="auto-add" className="text-sm font-normal">
+                Auto-add new senders
+              </Label>
+            </div>
+          </div>
+        </div>
+        <DialogFooter>
+          <Button variant="outline" onClick={() => onOpenChange(false)}>
+            Cancel
+          </Button>
+          <Button onClick={handleSave}>Save Settings</Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}
--- a/frontend/components/letterfeed/tests/AddNewsletterDialog.test.tsx
+++ b/frontend/components/letterfeed/tests/AddNewsletterDialog.test.tsx
@@ -0,0 +1,74 @@
+import React from "react"
+import { render, screen, fireEvent, waitFor } from "@testing-library/react"
+import "@testing-library/jest-dom"
+import { AddNewsletterDialog } from "../AddNewsletterDialog"
+import * as api from "@/lib/api"
+
+// Mock the API module
+jest.mock("@/lib/api", () => ({
+  ...jest.requireActual("@/lib/api"),
+  createNewsletter: jest.fn(),
+}))
+
+const mockedApi = api as jest.Mocked<typeof api>
+
+describe("AddNewsletterDialog", () => {
+  const handleOpenChange = jest.fn()
+  const handleSuccess = jest.fn()
+
+  beforeEach(() => {
+    jest.clearAllMocks()
+  })
+
+  it("allows user to fill out the form and submit", async () => {
+    mockedApi.createNewsletter.mockResolvedValueOnce({
+      id: 1,
+      name: "My New Newsletter",
+      is_active: true,
+      senders: [{ id: 1, email: "test@example.com", newsletter_id: 1 }],
+      entries_count: 0,
+    })
+
+    render(<AddNewsletterDialog isOpen={true} onOpenChange={handleOpenChange} onSuccess={handleSuccess} />)
+
+    // Fill out the form
+    fireEvent.change(screen.getByLabelText(/Newsletter Name/i), { target: { value: "My New Newsletter" } })
+    fireEvent.change(screen.getByPlaceholderText(/Enter email address/i), { target: { value: "test@example.com" } })
+
+    // Submit the form
+    fireEvent.click(screen.getByRole("button", { name: /Register Newsletter/i }))
+
+    // Wait for the async operation to complete
+    await waitFor(() => {
+      expect(mockedApi.createNewsletter).toHaveBeenCalledWith({
+        name: "My New Newsletter",
+        sender_emails: ["test@example.com"],
+      })
+      expect(handleSuccess).toHaveBeenCalledTimes(1)
+      expect(handleOpenChange).toHaveBeenCalledWith(false)
+    })
+  })
+
+  it("allows adding and removing email fields", () => {
+    render(<AddNewsletterDialog isOpen={true} onOpenChange={() => {}} onSuccess={() => {}} />)
+
+    // Initial state
+    expect(screen.getAllByPlaceholderText(/Enter email address/i)).toHaveLength(1)
+
+    // Add another email
+    fireEvent.click(screen.getByRole("button", { name: /Add Another Email/i }))
+    expect(screen.getAllByPlaceholderText(/Enter email address/i)).toHaveLength(2)
+
+    // Remove the first email
+    fireEvent.click(screen.getAllByRole("button", { name: /Remove/i })[0])
+    expect(screen.getAllByPlaceholderText(/Enter email address/i)).toHaveLength(1)
+  })
+
+  it("closes the dialog when cancel is clicked", () => {
+    render(<AddNewsletterDialog isOpen={true} onOpenChange={handleOpenChange} onSuccess={handleSuccess} />)
+
+    fireEvent.click(screen.getByRole("button", { name: /Cancel/i }))
+    expect(handleOpenChange).toHaveBeenCalledWith(false)
+    expect(handleSuccess).not.toHaveBeenCalled()
+  })
+})
--- a/frontend/components/letterfeed/tests/EditNewsletterDialog.test.tsx
+++ b/frontend/components/letterfeed/tests/EditNewsletterDialog.test.tsx
@@ -0,0 +1,108 @@
+import React from "react"
+import { render, screen, fireEvent, waitFor } from "@testing-library/react"
+import "@testing-library/jest-dom"
+import { EditNewsletterDialog } from "../EditNewsletterDialog"
+import { Newsletter } from "@/lib/api"
+import * as api from "@/lib/api"
+
+// Mock the API module
+jest.mock("@/lib/api", () => ({
+  ...jest.requireActual("@/lib/api"),
+  updateNewsletter: jest.fn(),
+  deleteNewsletter: jest.fn(),
+}))
+
+const mockedApi = api as jest.Mocked<typeof api>
+
+const mockNewsletter: Newsletter = {
+  id: 1,
+  name: "Existing Newsletter",
+  is_active: true,
+  senders: [{ id: 1, email: "current@example.com", newsletter_id: 1 }],
+  entries_count: 5,
+}
+
+describe("EditNewsletterDialog", () => {
+  const handleOpenChange = jest.fn()
+  const handleSuccess = jest.fn()
+
+  beforeEach(() => {
+    jest.clearAllMocks()
+    // Mock window.confirm for the delete action
+    window.confirm = jest.fn(() => true)
+  })
+
+  it("renders with initial newsletter data and allows updates", async () => {
+    mockedApi.updateNewsletter.mockResolvedValueOnce({ ...mockNewsletter, name: "Updated Name" })
+
+    render(
+      <EditNewsletterDialog
+        newsletter={mockNewsletter}
+        isOpen={true}
+        onOpenChange={handleOpenChange}
+        onSuccess={handleSuccess}
+      />
+    )
+
+    // Check that initial data is present
+    const nameInput = screen.getByLabelText(/Newsletter Name/i)
+    expect(nameInput).toHaveValue("Existing Newsletter")
+    expect(screen.getByDisplayValue("current@example.com")).toBeInTheDocument()
+
+    // Update the name
+    fireEvent.change(nameInput, { target: { value: "Updated Name" } })
+
+    // Submit
+    fireEvent.click(screen.getByRole("button", { name: /Save Changes/i }))
+
+    await waitFor(() => {
+      expect(mockedApi.updateNewsletter).toHaveBeenCalledWith(1, {
+        name: "Updated Name",
+        sender_emails: ["current@example.com"],
+      })
+      expect(handleSuccess).toHaveBeenCalledTimes(1)
+      expect(handleOpenChange).toHaveBeenCalledWith(false)
+    })
+  })
+
+  it("calls deleteNewsletter when delete button is clicked and confirmed", async () => {
+    mockedApi.deleteNewsletter.mockResolvedValueOnce()
+
+    render(
+      <EditNewsletterDialog
+        newsletter={mockNewsletter}
+        isOpen={true}
+        onOpenChange={handleOpenChange}
+        onSuccess={handleSuccess}
+      />
+    )
+
+    fireEvent.click(screen.getByRole("button", { name: /Delete Newsletter/i }))
+
+    expect(window.confirm).toHaveBeenCalledWith('Are you sure you want to delete the "Existing Newsletter" newsletter?')
+
+    await waitFor(() => {
+      expect(mockedApi.deleteNewsletter).toHaveBeenCalledWith(1)
+      expect(handleSuccess).toHaveBeenCalledTimes(1)
+      expect(handleOpenChange).toHaveBeenCalledWith(false)
+    })
+  })
+
+  it("does not call deleteNewsletter when delete is not confirmed", () => {
+    window.confirm = jest.fn(() => false) // User clicks "Cancel"
+
+    render(
+      <EditNewsletterDialog
+        newsletter={mockNewsletter}
+        isOpen={true}
+        onOpenChange={handleOpenChange}
+        onSuccess={handleSuccess}
+      />
+    )
+
+    fireEvent.click(screen.getByRole("button", { name: /Delete Newsletter/i }))
+
+    expect(mockedApi.deleteNewsletter).not.toHaveBeenCalled()
+    expect(handleSuccess).not.toHaveBeenCalled()
+  })
+})
--- a/frontend/components/letterfeed/tests/EmptyState.test.tsx
+++ b/frontend/components/letterfeed/tests/EmptyState.test.tsx
@@ -0,0 +1,24 @@
+import React from "react"
+import { render, screen, fireEvent } from "@testing-library/react"
+import "@testing-library/jest-dom"
+import { EmptyState } from "../EmptyState"
+
+describe("EmptyState", () => {
+  it("renders the correct content", () => {
+    render(<EmptyState onAddNewsletter={() => {}} />)
+
+    expect(screen.getByText("No newsletters registered")).toBeInTheDocument()
+    expect(screen.getByText("Get started by adding your first newsletter")).toBeInTheDocument()
+    expect(screen.getByRole("button", { name: /Add Your First Newsletter/i })).toBeInTheDocument()
+  })
+
+  it("calls onAddNewsletter when the button is clicked", () => {
+    const handleAddNewsletter = jest.fn()
+    render(<EmptyState onAddNewsletter={handleAddNewsletter} />)
+
+    const addButton = screen.getByRole("button", { name: /Add Your First Newsletter/i })
+    fireEvent.click(addButton)
+
+    expect(handleAddNewsletter).toHaveBeenCalledTimes(1)
+  })
+})
--- a/frontend/components/letterfeed/tests/Header.test.tsx
+++ b/frontend/components/letterfeed/tests/Header.test.tsx
@@ -0,0 +1,30 @@
+import React from "react"
+import { render, screen, fireEvent } from "@testing-library/react"
+import "@testing-library/jest-dom"
+import { Header } from "../Header"
+
+describe("Header", () => {
+  it("renders the title and description", () => {
+    render(<Header onOpenAddNewsletter={() => {}} onOpenSettings={() => {}} />)
+    expect(screen.getByText("LetterFeed")).toBeInTheDocument()
+    expect(screen.getByText("Read your newsletters as RSS feeds!")).toBeInTheDocument()
+  })
+
+  it('calls onOpenAddNewsletter when "Add Newsletter" button is clicked', () => {
+    const handleOpenAdd = jest.fn()
+    render(<Header onOpenAddNewsletter={handleOpenAdd} onOpenSettings={() => {}} />)
+
+    const addButton = screen.getByRole("button", { name: /Add Newsletter/i })
+    fireEvent.click(addButton)
+    expect(handleOpenAdd).toHaveBeenCalledTimes(1)
+  })
+
+  it('calls onOpenSettings when "Settings" button is clicked', () => {
+    const handleOpenSettings = jest.fn()
+    render(<Header onOpenAddNewsletter={() => {}} onOpenSettings={handleOpenSettings} />)
+
+    const settingsButton = screen.getByRole("button", { name: /Settings/i })
+    fireEvent.click(settingsButton)
+    expect(handleOpenSettings).toHaveBeenCalledTimes(1)
+  })
+})
--- a/frontend/components/letterfeed/tests/LoadingSpinner.test.tsx
+++ b/frontend/components/letterfeed/tests/LoadingSpinner.test.tsx
@@ -0,0 +1,13 @@
+import React from "react"
+import { render, screen } from "@testing-library/react"
+import "@testing-library/jest-dom"
+import { LoadingSpinner } from "../LoadingSpinner"
+
+describe("LoadingSpinner", () => {
+  it("renders the spinner with the correct animation class", () => {
+    render(<LoadingSpinner />)
+    const spinner = screen.getByTestId("loading-spinner")
+    expect(spinner).toBeInTheDocument()
+    expect(spinner).toHaveClass("animate-spin")
+  })
+})
--- a/frontend/components/letterfeed/tests/NewsletterCard.test.tsx
+++ b/frontend/components/letterfeed/tests/NewsletterCard.test.tsx
@@ -0,0 +1,63 @@
+import React from "react"
+import { render, screen, fireEvent } from "@testing-library/react"
+import "@testing-library/jest-dom"
+import { NewsletterCard } from "../NewsletterCard"
+import { Newsletter } from "@/lib/api"
+
+// Mock the getFeedUrl function
+jest.mock("@/lib/api", () => ({
+  ...jest.requireActual("@/lib/api"), // import and retain all actual implementations
+  getFeedUrl: jest.fn((id) => `http://mock-api/feeds/${id}`),
+}))
+
+const mockNewsletter: Newsletter = {
+  id: 1,
+  name: "Tech Weekly",
+  is_active: true,
+  senders: [
+    { id: 1, email: "contact@techweekly.com", newsletter_id: 1 },
+    { id: 2, email: "updates@techweekly.com", newsletter_id: 1 },
+  ],
+  entries_count: 42,
+}
+
+describe("NewsletterCard", () => {
+  it("renders newsletter details correctly", () => {
+    const handleEdit = jest.fn()
+    render(<NewsletterCard newsletter={mockNewsletter} onEdit={handleEdit} />)
+
+    // Check for the title
+    expect(screen.getByText("Tech Weekly")).toBeInTheDocument()
+
+    // Check for the entries count
+    expect(screen.getByText("42 entries")).toBeInTheDocument()
+
+    // Check for sender emails
+    expect(screen.getByText("contact@techweekly.com")).toBeInTheDocument()
+    expect(screen.getByText("updates@techweekly.com")).toBeInTheDocument()
+
+    // Check for the RSS feed link
+    const feedLink = screen.getByRole("link")
+    expect(feedLink).toHaveAttribute("href", "http://mock-api/feeds/1")
+    expect(feedLink).toHaveTextContent("http://mock-api/feeds/1")
+  })
+
+  it('calls the onEdit function with the correct newsletter when the edit button is clicked', () => {
+    const handleEdit = jest.fn()
+    render(<NewsletterCard newsletter={mockNewsletter} onEdit={handleEdit} />)
+
+    const editButton = screen.getByRole("button", { name: /edit newsletter/i })
+    fireEvent.click(editButton)
+
+    expect(handleEdit).toHaveBeenCalledTimes(1)
+    expect(handleEdit).toHaveBeenCalledWith(mockNewsletter)
+  })
+
+  it('displays "entry" for a single entry', () => {
+    const singleEntryNewsletter = { ...mockNewsletter, entries_count: 1 }
+    const handleEdit = jest.fn()
+    render(<NewsletterCard newsletter={singleEntryNewsletter} onEdit={handleEdit} />)
+
+    expect(screen.getByText("1 entry")).toBeInTheDocument()
+  })
+})
--- a/frontend/components/letterfeed/tests/NewsletterList.test.tsx
+++ b/frontend/components/letterfeed/tests/NewsletterList.test.tsx
@@ -0,0 +1,47 @@
+import React from "react"
+import { render, screen } from "@testing-library/react"
+import "@testing-library/jest-dom"
+import { NewsletterList } from "../NewsletterList"
+import { Newsletter } from "@/lib/api"
+
+// Mock the child component to isolate the list component's behavior
+jest.mock("../NewsletterCard", () => ({
+  NewsletterCard: ({ newsletter }: { newsletter: Newsletter }) => (
+    <div data-testid={`newsletter-card-${newsletter.id}`}>{newsletter.name}</div>
+  ),
+}))
+
+const mockNewsletters: Newsletter[] = [
+  {
+    id: 1,
+    name: "Newsletter One",
+    is_active: true,
+    senders: [],
+    entries_count: 10,
+  },
+  {
+    id: 2,
+    name: "Newsletter Two",
+    is_active: true,
+    senders: [],
+    entries_count: 5,
+  },
+]
+
+describe("NewsletterList", () => {
+  it("renders a list of newsletter cards", () => {
+    render(<NewsletterList newsletters={mockNewsletters} onEditNewsletter={() => {}} />)
+
+    // Check that both newsletters are rendered
+    expect(screen.getByText("Newsletter One")).toBeInTheDocument()
+    expect(screen.getByText("Newsletter Two")).toBeInTheDocument()
+    expect(screen.getByTestId("newsletter-card-1")).toBeInTheDocument()
+    expect(screen.getByTestId("newsletter-card-2")).toBeInTheDocument()
+  })
+
+  it("renders nothing when the newsletter list is empty", () => {
+    const { container } = render(<NewsletterList newsletters={[]} onEditNewsletter={() => {}} />)
+    // The main div should be empty
+    expect(container.firstChild).toBeEmptyDOMElement()
+  })
+})
--- a/frontend/components/letterfeed/tests/SettingsDialog.test.tsx
+++ b/frontend/components/letterfeed/tests/SettingsDialog.test.tsx
@@ -0,0 +1,131 @@
+import React from "react"
+import { render, screen, fireEvent, waitFor } from "@testing-library/react"
+import "@testing-library/jest-dom"
+import { SettingsDialog } from "../SettingsDialog"
+import { Settings } from "@/lib/api"
+import * as api from "@/lib/api"
+
+// Mock the API module
+jest.mock("@/lib/api", () => ({
+  ...jest.requireActual("@/lib/api"),
+  updateSettings: jest.fn(),
+  testImapConnection: jest.fn(),
+}))
+
+const mockedApi = api as jest.Mocked<typeof api>
+
+const mockSettings: Settings = {
+  id: 1,
+  imap_server: "imap.example.com",
+  imap_username: "user@example.com",
+  search_folder: "INBOX",
+  move_to_folder: "Archive",
+  mark_as_read: true,
+  email_check_interval: 30,
+  auto_add_new_senders: false,
+  locked_fields: ["imap_server"], // Mock a locked field
+}
+
+const mockFolderOptions = ["INBOX", "Sent", "Archive", "Spam"]
+
+describe("SettingsDialog", () => {
+  const handleOpenChange = jest.fn()
+  const handleSuccess = jest.fn()
+
+  beforeEach(() => {
+    jest.clearAllMocks()
+  })
+
+  it("renders settings and respects locked fields", () => {
+    render(
+      <SettingsDialog
+        settings={mockSettings}
+        folderOptions={mockFolderOptions}
+        isOpen={true}
+        onOpenChange={handleOpenChange}
+        onSuccess={handleSuccess}
+      />
+    )
+
+    // Check that a locked field is disabled
+    expect(screen.getByLabelText(/IMAP Server/i)).toBeDisabled()
+    // Check that a non-locked field is enabled
+    expect(screen.getByLabelText(/IMAP Username/i)).toBeEnabled()
+
+    // Check that values are set correctly
+    expect(screen.getByLabelText(/IMAP Username/i)).toHaveValue(mockSettings.imap_username)
+    expect(screen.getByLabelText(/Mark emails as read/i)).toBeChecked()
+  })
+
+  it("allows updating and saving settings", async () => {
+    mockedApi.updateSettings.mockResolvedValueOnce(mockSettings)
+
+    render(
+      <SettingsDialog
+        settings={mockSettings}
+        folderOptions={mockFolderOptions}
+        isOpen={true}
+        onOpenChange={handleOpenChange}
+        onSuccess={handleSuccess}
+      />
+    )
+
+    // Change a setting
+    fireEvent.change(screen.getByLabelText(/IMAP Username/i), { target: { value: "new.user@example.com" } })
+
+    // Save
+    fireEvent.click(screen.getByRole("button", { name: /Save Settings/i }))
+
+    await waitFor(() => {
+      expect(mockedApi.updateSettings).toHaveBeenCalledWith(
+        expect.objectContaining({
+          imap_username: "new.user@example.com",
+        })
+      )
+      expect(handleSuccess).toHaveBeenCalledTimes(1)
+      expect(handleOpenChange).toHaveBeenCalledWith(false)
+    })
+  })
+
+  it("handles successful connection test", async () => {
+    mockedApi.testImapConnection.mockResolvedValueOnce({ message: "Connection successful!" })
+
+    render(
+      <SettingsDialog
+        settings={mockSettings}
+        folderOptions={mockFolderOptions}
+        isOpen={true}
+        onOpenChange={handleOpenChange}
+        onSuccess={handleSuccess}
+      />
+    )
+
+    fireEvent.click(screen.getByRole("button", { name: /Test Connection/i }))
+
+    await waitFor(() => {
+      expect(screen.getByText("Connection successful!")).toBeInTheDocument()
+      expect(screen.getByTestId("connection-status")).toHaveClass("text-green-600")
+    })
+  })
+
+  it("handles failed connection test", async () => {
+    mockedApi.testImapConnection.mockRejectedValueOnce(new Error("Authentication failed"))
+
+    render(
+      <SettingsDialog
+        settings={mockSettings}
+        folderOptions={mockFolderOptions}
+        isOpen={true}
+        onOpenChange={handleOpenChange}
+        onSuccess={handleSuccess}
+      />
+    )
+
+    fireEvent.click(screen.getByRole("button", { name: /Test Connection/i }))
+
+    await waitFor(() => {
+      expect(screen.getByText("Authentication failed")).toBeInTheDocument()
+      expect(screen.getByTestId("connection-status")).toHaveClass("text-red-600")
+    })
+  })
+})
--- a/frontend/components/ui/badge.tsx
+++ b/frontend/components/ui/badge.tsx
@@ -0,0 +1,46 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const badgeVariants = cva(
+  "inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
+  {
+    variants: {
+      variant: {
+        default:
+          "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
+        secondary:
+          "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
+        destructive:
+          "border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline:
+          "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function Badge({
+  className,
+  variant,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"span"> &
+  VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot : "span"
+
+  return (
+    <Comp
+      data-slot="badge"
+      className={cn(badgeVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+export { Badge, badgeVariants }
--- a/frontend/components/ui/button.tsx
+++ b/frontend/components/ui/button.tsx
@@ -0,0 +1,59 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  {
+    variants: {
+      variant: {
+        default:
+          "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline:
+          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+        secondary:
+          "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
+        ghost:
+          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-9 px-4 py-2 has-[>svg]:px-3",
+        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+        icon: "size-9",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+function Button({
+  className,
+  variant,
+  size,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"button"> &
+  VariantProps<typeof buttonVariants> & {
+    asChild?: boolean
+  }) {
+  const Comp = asChild ? Slot : "button"
+
+  return (
+    <Comp
+      data-slot="button"
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
+}
+
+export { Button, buttonVariants }
--- a/frontend/components/ui/card.tsx
+++ b/frontend/components/ui/card.tsx
@@ -0,0 +1,92 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Card({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card"
+      className={cn(
+        "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-header"
+      className={cn(
+        "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-title"
+      className={cn("leading-none font-semibold", className)}
+      {...props}
+    />
+  )
+}
+
+function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+function CardAction({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-action"
+      className={cn(
+        "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-content"
+      className={cn("px-6", className)}
+      {...props}
+    />
+  )
+}
+
+function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-footer"
+      className={cn("flex items-center px-6 [.border-t]:pt-6", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardAction,
+  CardDescription,
+  CardContent,
+}
--- a/frontend/components/ui/checkbox.tsx
+++ b/frontend/components/ui/checkbox.tsx
@@ -0,0 +1,32 @@
+"use client"
+
+import * as React from "react"
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
+import { CheckIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function Checkbox({
+  className,
+  ...props
+}: React.ComponentProps<typeof CheckboxPrimitive.Root>) {
+  return (
+    <CheckboxPrimitive.Root
+      data-slot="checkbox"
+      className={cn(
+        "peer border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+      {...props}
+    >
+      <CheckboxPrimitive.Indicator
+        data-slot="checkbox-indicator"
+        className="flex items-center justify-center text-current transition-none"
+      >
+        <CheckIcon className="size-3.5" />
+      </CheckboxPrimitive.Indicator>
+    </CheckboxPrimitive.Root>
+  )
+}
+
+export { Checkbox }
--- a/frontend/components/ui/components.json
+++ b/frontend/components/ui/components.json
@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "src/app/globals.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "iconLibrary": "lucide"
+}
--- a/frontend/components/ui/dialog.tsx
+++ b/frontend/components/ui/dialog.tsx
@@ -0,0 +1,143 @@
+"use client"
+
+import * as React from "react"
+import * as DialogPrimitive from "@radix-ui/react-dialog"
+import { XIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function Dialog({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Root>) {
+  return <DialogPrimitive.Root data-slot="dialog" {...props} />
+}
+
+function DialogTrigger({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
+  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
+}
+
+function DialogPortal({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Portal>) {
+  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
+}
+
+function DialogClose({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Close>) {
+  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />
+}
+
+function DialogOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
+  return (
+    <DialogPrimitive.Overlay
+      data-slot="dialog-overlay"
+      className={cn(
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DialogContent({
+  className,
+  children,
+  showCloseButton = true,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Content> & {
+  showCloseButton?: boolean
+}) {
+  return (
+    <DialogPortal data-slot="dialog-portal">
+      <DialogOverlay />
+      <DialogPrimitive.Content
+        data-slot="dialog-content"
+        className={cn(
+          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        {showCloseButton && (
+          <DialogPrimitive.Close
+            data-slot="dialog-close"
+            className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
+          >
+            <XIcon />
+            <span className="sr-only">Close</span>
+          </DialogPrimitive.Close>
+        )}
+      </DialogPrimitive.Content>
+    </DialogPortal>
+  )
+}
+
+function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="dialog-header"
+      className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
+      {...props}
+    />
+  )
+}
+
+function DialogFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="dialog-footer"
+      className={cn(
+        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DialogTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Title>) {
+  return (
+    <DialogPrimitive.Title
+      data-slot="dialog-title"
+      className={cn("text-lg leading-none font-semibold", className)}
+      {...props}
+    />
+  )
+}
+
+function DialogDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Description>) {
+  return (
+    <DialogPrimitive.Description
+      data-slot="dialog-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
+}
--- a/frontend/components/ui/input.tsx
+++ b/frontend/components/ui/input.tsx
@@ -0,0 +1,21 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Input({ className, type, ...props }: React.ComponentProps<"input">) {
+  return (
+    <input
+      type={type}
+      data-slot="input"
+      className={cn(
+        "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+        "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Input }
--- a/frontend/components/ui/label.tsx
+++ b/frontend/components/ui/label.tsx
@@ -0,0 +1,22 @@
+import * as React from "react"
+import * as LabelPrimitive from "@radix-ui/react-label"
+
+import { cn } from "@/lib/utils"
+
+function Label({
+  className,
+  ...props
+}: React.ComponentProps<typeof LabelPrimitive.Root>) {
+  return (
+    <LabelPrimitive.Root
+      data-slot="label"
+      className={cn(
+        "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Label }
--- a/frontend/components/ui/select.tsx
+++ b/frontend/components/ui/select.tsx
@@ -0,0 +1,183 @@
+import * as React from "react"
+import * as SelectPrimitive from "@radix-ui/react-select"
+import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function Select({
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Root>) {
+  return <SelectPrimitive.Root data-slot="select" {...props} />
+}
+
+function SelectGroup({
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Group>) {
+  return <SelectPrimitive.Group data-slot="select-group" {...props} />
+}
+
+function SelectValue({
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Value>) {
+  return <SelectPrimitive.Value data-slot="select-value" {...props} />
+}
+
+function SelectTrigger({
+  className,
+  size = "default",
+  children,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Trigger> & {
+  size?: "sm" | "default"
+}) {
+  return (
+    <SelectPrimitive.Trigger
+      data-slot="select-trigger"
+      data-size={size}
+      className={cn(
+        "border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <SelectPrimitive.Icon asChild>
+        <ChevronDownIcon className="size-4 opacity-50" />
+      </SelectPrimitive.Icon>
+    </SelectPrimitive.Trigger>
+  )
+}
+
+function SelectContent({
+  className,
+  children,
+  position = "popper",
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Content>) {
+  return (
+    <SelectPrimitive.Portal>
+      <SelectPrimitive.Content
+        data-slot="select-content"
+        className={cn(
+          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md",
+          position === "popper" &&
+            "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+          className
+        )}
+        position={position}
+        {...props}
+      >
+        <SelectScrollUpButton />
+        <SelectPrimitive.Viewport
+          className={cn(
+            "p-1",
+            position === "popper" &&
+              "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1"
+          )}
+        >
+          {children}
+        </SelectPrimitive.Viewport>
+        <SelectScrollDownButton />
+      </SelectPrimitive.Content>
+    </SelectPrimitive.Portal>
+  )
+}
+
+function SelectLabel({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Label>) {
+  return (
+    <SelectPrimitive.Label
+      data-slot="select-label"
+      className={cn("text-muted-foreground px-2 py-1.5 text-xs", className)}
+      {...props}
+    />
+  )
+}
+
+function SelectItem({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Item>) {
+  return (
+    <SelectPrimitive.Item
+      data-slot="select-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
+        className
+      )}
+      {...props}
+    >
+      <span className="absolute right-2 flex size-3.5 items-center justify-center">
+        <SelectPrimitive.ItemIndicator>
+          <CheckIcon className="size-4" />
+        </SelectPrimitive.ItemIndicator>
+      </span>
+      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+    </SelectPrimitive.Item>
+  )
+}
+
+function SelectSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Separator>) {
+  return (
+    <SelectPrimitive.Separator
+      data-slot="select-separator"
+      className={cn("bg-border pointer-events-none -mx-1 my-1 h-px", className)}
+      {...props}
+    />
+  )
+}
+
+function SelectScrollUpButton({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {
+  return (
+    <SelectPrimitive.ScrollUpButton
+      data-slot="select-scroll-up-button"
+      className={cn(
+        "flex cursor-default items-center justify-center py-1",
+        className
+      )}
+      {...props}
+    >
+      <ChevronUpIcon className="size-4" />
+    </SelectPrimitive.ScrollUpButton>
+  )
+}
+
+function SelectScrollDownButton({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {
+  return (
+    <SelectPrimitive.ScrollDownButton
+      data-slot="select-scroll-down-button"
+      className={cn(
+        "flex cursor-default items-center justify-center py-1",
+        className
+      )}
+      {...props}
+    >
+      <ChevronDownIcon className="size-4" />
+    </SelectPrimitive.ScrollDownButton>
+  )
+}
+
+export {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectScrollDownButton,
+  SelectScrollUpButton,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+}
--- a/frontend/eslint.config.mjs
+++ b/frontend/eslint.config.mjs
@@ -0,0 +1,16 @@
+import { dirname } from "path";
+import { fileURLToPath } from "url";
+import { FlatCompat } from "@eslint/eslintrc";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+const compat = new FlatCompat({
+  baseDirectory: __dirname,
+});
+
+const eslintConfig = [
+  ...compat.extends("next/core-web-vitals", "next/typescript"),
+];
+
+export default eslintConfig;
--- a/frontend/jest.config.js
+++ b/frontend/jest.config.js
@@ -0,0 +1,16 @@
+const nextJest = require('next/jest');
+
+const createJestConfig = nextJest({
+  dir: './',
+});
+
+const customJestConfig = {
+  setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
+  testEnvironment: 'jest-environment-jsdom',
+  moduleNameMapper: {
+    '^@/components/(.*)$': '<rootDir>/components/$1',
+    '^@/lib/(.*)$': '<rootDir>/src/lib/$1',
+  },
+};
+
+module.exports = createJestConfig(customJestConfig);
--- a/frontend/jest.setup.js
+++ b/frontend/jest.setup.js
@@ -0,0 +1 @@
+import '@testing-library/jest-dom';
--- a/frontend/next.config.ts
+++ b/frontend/next.config.ts
@@ -0,0 +1,14 @@
+import type { NextConfig } from "next";
+
+const nextConfig: NextConfig = {
+  async rewrites() {
+    return [
+      {
+        source: '/api/:path*',
+        destination: 'http://backend:8000/:path*',
+      },
+    ];
+  },
+};
+
+export default nextConfig;
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -0,0 +1,48 @@
+{
+  "name": "frontend",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev --turbopack",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint",
+    "test": "jest"
+  },
+  "dependencies": {
+    "@radix-ui/react-checkbox": "^1.3.2",
+    "@radix-ui/react-dialog": "^1.1.14",
+    "@radix-ui/react-label": "^2.1.7",
+    "@radix-ui/react-select": "^2.2.5",
+    "@radix-ui/react-slot": "^1.2.3",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "lucide-react": "^0.525.0",
+    "next": "15.4.1",
+    "react": "19.1.0",
+    "react-dom": "19.1.0",
+    "tailwind-merge": "^3.3.1"
+  },
+  "devDependencies": {
+    "@babel/preset-env": "^7.28.0",
+    "@babel/preset-react": "^7.27.1",
+    "@babel/preset-typescript": "^7.27.1",
+    "@eslint/eslintrc": "^3",
+    "@tailwindcss/postcss": "^4",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.3.0",
+    "@testing-library/user-event": "^14.6.1",
+    "@types/node": "^20",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "babel-jest": "^30.0.4",
+    "eslint": "^9",
+    "eslint-config-next": "15.4.1",
+    "jest": "^30.0.4",
+    "jest-environment-jsdom": "^30.0.4",
+    "jest-fetch-mock": "^3.0.3",
+    "tailwindcss": "^4",
+    "tw-animate-css": "^1.3.5",
+    "typescript": "^5"
+  }
+}
--- a/frontend/postcss.config.mjs
+++ b/frontend/postcss.config.mjs
@@ -0,0 +1,5 @@
+const config = {
+  plugins: ["@tailwindcss/postcss"],
+};
+
+export default config;
--- a/frontend/public/logo.png
+++ b/frontend/public/logo.png
--- a/frontend/src/app/favicon.ico
+++ b/frontend/src/app/favicon.ico
--- a/frontend/src/app/globals.css
+++ b/frontend/src/app/globals.css
@@ -0,0 +1,122 @@
+@import "tailwindcss";
+@import "tw-animate-css";
+
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --font-sans: var(--font-geist-sans);
+  --font-mono: var(--font-geist-mono);
+  --color-sidebar-ring: var(--sidebar-ring);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar: var(--sidebar);
+  --color-chart-5: var(--chart-5);
+  --color-chart-4: var(--chart-4);
+  --color-chart-3: var(--chart-3);
+  --color-chart-2: var(--chart-2);
+  --color-chart-1: var(--chart-1);
+  --color-ring: var(--ring);
+  --color-input: var(--input);
+  --color-border: var(--border);
+  --color-destructive: var(--destructive);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-accent: var(--accent);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-muted: var(--muted);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-secondary: var(--secondary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-primary: var(--primary);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-popover: var(--popover);
+  --color-card-foreground: var(--card-foreground);
+  --color-card: var(--card);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+}
+
+:root {
+  --radius: 0.625rem;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
+}
+
+.dark {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.205 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.205 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.922 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.556 0 0);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.556 0 0);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}
--- a/frontend/src/app/layout.tsx
+++ b/frontend/src/app/layout.tsx
@@ -0,0 +1,34 @@
+import type { Metadata } from "next";
+import { Geist, Geist_Mono } from "next/font/google";
+import "./globals.css";
+
+const geistSans = Geist({
+  variable: "--font-geist-sans",
+  subsets: ["latin"],
+});
+
+const geistMono = Geist_Mono({
+  variable: "--font-geist-mono",
+  subsets: ["latin"],
+});
+
+export const metadata: Metadata = {
+  title: "LetterFeed",
+  description: "Read your newsletters as RSS feeds!",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en">
+      <body
+        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
+      >
+        {children}
+      </body>
+    </html>
+  );
+}
--- a/frontend/src/app/page.tsx
+++ b/frontend/src/app/page.tsx
@@ -0,0 +1,104 @@
+"use client"
+
+import { useState, useEffect, useCallback } from "react"
+import {
+  getNewsletters,
+  getSettings,
+  getImapFolders,
+  Newsletter,
+  Settings as AppSettings,
+} from "@/lib/api"
+import { LoadingSpinner } from "@/components/letterfeed/LoadingSpinner"
+import { Header } from "@/components/letterfeed/Header"
+import { NewsletterList } from "@/components/letterfeed/NewsletterList"
+import { EmptyState } from "@/components/letterfeed/EmptyState"
+import { AddNewsletterDialog } from "@/components/letterfeed/AddNewsletterDialog"
+import { EditNewsletterDialog } from "@/components/letterfeed/EditNewsletterDialog"
+import { SettingsDialog } from "@/components/letterfeed/SettingsDialog"
+
+export default function LetterFeedApp() {
+  const [newsletters, setNewsletters] = useState<Newsletter[]>([])
+  const [isLoading, setIsLoading] = useState(true)
+  const [settings, setSettings] = useState<AppSettings | null>(null)
+  const [folderOptions, setFolderOptions] = useState<string[]>([])
+
+  const [isAddDialogOpen, setIsAddDialogOpen] = useState(false)
+  const [isSettingsOpen, setIsSettingsOpen] = useState(false)
+  const [isEditDialogOpen, setIsEditDialogOpen] = useState(false)
+  const [editingNewsletter, setEditingNewsletter] = useState<Newsletter | null>(null)
+
+  const fetchData = useCallback(async () => {
+    try {
+      const [newslettersData, settingsData, foldersData] = await Promise.all([
+        getNewsletters(),
+        getSettings(),
+        getImapFolders(),
+      ])
+      setNewsletters(newslettersData)
+      setSettings(settingsData)
+      setFolderOptions(foldersData)
+    } catch (error) {
+      console.error("Failed to fetch data:", error)
+    } finally {
+      setIsLoading(false)
+    }
+  }, [])
+
+  useEffect(() => {
+    fetchData()
+  }, [fetchData])
+
+  const openEditDialog = (newsletter: Newsletter) => {
+    setEditingNewsletter(newsletter)
+    setIsEditDialogOpen(true)
+  }
+
+  if (isLoading) {
+    return <LoadingSpinner />
+  }
+
+  return (
+    <div className="min-h-screen bg-gray-50">
+      <div className="container mx-auto px-4 py-8">
+        <Header
+          onOpenAddNewsletter={() => setIsAddDialogOpen(true)}
+          onOpenSettings={() => setIsSettingsOpen(true)}
+        />
+
+        {newsletters.length > 0 ? (
+          <NewsletterList newsletters={newsletters} onEditNewsletter={openEditDialog} />
+        ) : (
+          <EmptyState onAddNewsletter={() => setIsAddDialogOpen(true)} />
+        )}
+
+        <AddNewsletterDialog
+          isOpen={isAddDialogOpen}
+          onOpenChange={setIsAddDialogOpen}
+          onSuccess={fetchData}
+        />
+
+        {editingNewsletter && (
+          <EditNewsletterDialog
+            newsletter={editingNewsletter}
+            isOpen={isEditDialogOpen}
+            onOpenChange={setIsEditDialogOpen}
+            onSuccess={() => {
+              setEditingNewsletter(null)
+              fetchData()
+            }}
+          />
+        )}
+
+        {settings && (
+          <SettingsDialog
+            settings={settings}
+            folderOptions={folderOptions}
+            isOpen={isSettingsOpen}
+            onOpenChange={setIsSettingsOpen}
+            onSuccess={fetchData}
+          />
+        )}
+      </div>
+    </div>
+  )
+}
--- a/frontend/src/lib/tests/api.test.ts
+++ b/frontend/src/lib/tests/api.test.ts
@@ -0,0 +1,256 @@
+import {
+  getNewsletters,
+  createNewsletter,
+  updateNewsletter,
+  deleteNewsletter,
+  getSettings,
+  updateSettings,
+  getImapFolders,
+  testImapConnection,
+  getFeedUrl,
+  NewsletterCreate,
+  NewsletterUpdate,
+  SettingsCreate,
+} from "../api"
+
+// Mock the global fetch function
+global.fetch = jest.fn()
+
+const mockFetch = (data: any, ok = true) => { // eslint-disable-line @typescript-eslint/no-explicit-any
+  ;(fetch as jest.Mock).mockResolvedValueOnce({
+    ok,
+    json: () => Promise.resolve(data),
+  })
+}
+
+const mockFetchError = (data: any = {}) => { // eslint-disable-line @typescript-eslint/no-explicit-any
+  ;(fetch as jest.Mock).mockResolvedValueOnce({
+    ok: false,
+    json: () => Promise.resolve(data),
+  })
+}
+
+describe("API Functions", () => {
+  const API_BASE_URL = process.env.NEXT_PUBLIC_API_URL
+
+  beforeEach(() => {
+    // Reset the mock before each test
+    ;(fetch as jest.Mock).mockClear()
+  })
+
+  describe("getNewsletters", () => {
+    it("should fetch newsletters successfully", async () => {
+      const mockNewsletters = [
+        { id: 1, name: "Newsletter 1", is_active: true, senders: [], entries_count: 5 },
+        { id: 2, name: "Newsletter 2", is_active: false, senders: [], entries_count: 10 },
+      ]
+      mockFetch(mockNewsletters)
+
+      const newsletters = await getNewsletters()
+      expect(newsletters).toEqual(mockNewsletters)
+      expect(fetch).toHaveBeenCalledWith(`${API_BASE_URL}/newsletters`)
+    })
+
+    it("should throw an error if fetching newsletters fails", async () => {
+      mockFetchError()
+      await expect(getNewsletters()).rejects.toThrow("Failed to fetch newsletters")
+    })
+  })
+
+  describe("createNewsletter", () => {
+    it("should create a newsletter successfully", async () => {
+      const newNewsletter: NewsletterCreate = { name: "New Newsletter", sender_emails: ["test@example.com"] }
+      const createdNewsletter = {
+        id: 3,
+        ...newNewsletter,
+        is_active: true,
+        senders: [{ id: 1, email: "test@example.com", newsletter_id: 3 }],
+        entries_count: 0,
+      }
+      mockFetch(createdNewsletter)
+
+      const result = await createNewsletter(newNewsletter)
+      expect(result).toEqual(createdNewsletter)
+      expect(fetch).toHaveBeenCalledWith(`${API_BASE_URL}/newsletters`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(newNewsletter),
+      })
+    })
+
+    it("should throw an error if creating newsletter fails", async () => {
+      const newNewsletter: NewsletterCreate = { name: "New Newsletter", sender_emails: [] }
+      mockFetchError()
+      await expect(createNewsletter(newNewsletter)).rejects.toThrow("Failed to create newsletter")
+    })
+  })
+
+  describe("updateNewsletter", () => {
+    it("should update a newsletter successfully", async () => {
+      const updatedNewsletter: NewsletterUpdate = { name: "Updated Newsletter", sender_emails: ["updated@example.com"] }
+      const newsletterId = 1
+      const returnedNewsletter = {
+        id: newsletterId,
+        ...updatedNewsletter,
+        is_active: true,
+        senders: [{ id: 1, email: "updated@example.com", newsletter_id: newsletterId }],
+        entries_count: 12,
+      }
+      mockFetch(returnedNewsletter)
+
+      const result = await updateNewsletter(newsletterId, updatedNewsletter)
+      expect(result).toEqual(returnedNewsletter)
+      expect(fetch).toHaveBeenCalledWith(`${API_BASE_URL}/newsletters/${newsletterId}`, {
+        method: "PUT",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(updatedNewsletter),
+      })
+    })
+
+    it("should throw an error if updating newsletter fails", async () => {
+      const updatedNewsletter: NewsletterUpdate = { name: "Updated Newsletter", sender_emails: [] }
+      const newsletterId = 1
+      mockFetchError()
+      await expect(updateNewsletter(newsletterId, updatedNewsletter)).rejects.toThrow("Failed to update newsletter")
+    })
+  })
+
+  describe("deleteNewsletter", () => {
+    it("should delete a newsletter successfully", async () => {
+      const newsletterId = 1
+      mockFetch({}, true) // Successful deletion might not have a body
+
+      await deleteNewsletter(newsletterId)
+      expect(fetch).toHaveBeenCalledWith(`${API_BASE_URL}/newsletters/${newsletterId}`, {
+        method: "DELETE",
+      })
+    })
+
+    it("should throw an error if deleting newsletter fails", async () => {
+      const newsletterId = 1
+      mockFetchError()
+      await expect(deleteNewsletter(newsletterId)).rejects.toThrow("Failed to delete newsletter")
+    })
+  })
+
+  describe("getSettings", () => {
+    it("should fetch settings successfully", async () => {
+      const mockSettings = {
+        id: 1,
+        imap_server: "imap.example.com",
+        imap_username: "user@example.com",
+        search_folder: "INBOX",
+        move_to_folder: null,
+        mark_as_read: true,
+        email_check_interval: 60,
+        auto_add_new_senders: false,
+        locked_fields: [],
+      }
+      mockFetch(mockSettings)
+
+      const settings = await getSettings()
+      expect(settings).toEqual(mockSettings)
+      expect(fetch).toHaveBeenCalledWith(`${API_BASE_URL}/imap/settings`)
+    })
+
+    it("should throw an error if fetching settings fails", async () => {
+      mockFetchError()
+      await expect(getSettings()).rejects.toThrow("Failed to fetch settings")
+    })
+  })
+
+  describe("updateSettings", () => {
+    it("should update settings successfully", async () => {
+      const newSettings: SettingsCreate = {
+        imap_server: "new.imap.com",
+        imap_username: "newuser@example.com",
+        imap_password: "password",
+        search_folder: "Archive",
+        move_to_folder: "Processed",
+        mark_as_read: false,
+        email_check_interval: 120,
+        auto_add_new_senders: true,
+      }
+      const updatedSettings = { id: 1, ...newSettings, locked_fields: [] }
+      mockFetch(updatedSettings)
+
+      const result = await updateSettings(newSettings)
+      expect(result).toEqual(updatedSettings)
+      expect(fetch).toHaveBeenCalledWith(`${API_BASE_URL}/imap/settings`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(newSettings),
+      })
+    })
+
+    it("should throw an error if updating settings fails", async () => {
+      const newSettings: SettingsCreate = {
+        imap_server: "new.imap.com",
+        imap_username: "newuser@example.com",
+        search_folder: "Archive",
+        mark_as_read: false,
+        email_check_interval: 120,
+        auto_add_new_senders: true,
+      }
+      mockFetchError()
+      await expect(updateSettings(newSettings)).rejects.toThrow("Failed to update settings")
+    })
+  })
+
+  describe("getImapFolders", () => {
+    it("should fetch IMAP folders successfully", async () => {
+      const mockFolders = ["INBOX", "Sent", "Archive"]
+      mockFetch(mockFolders)
+
+      const folders = await getImapFolders()
+      expect(folders).toEqual(mockFolders)
+      expect(fetch).toHaveBeenCalledWith(`${API_BASE_URL}/imap/folders`)
+    })
+
+    it("should return an empty array if fetching IMAP folders fails", async () => {
+      mockFetchError()
+      const folders = await getImapFolders()
+      expect(folders).toEqual([])
+    })
+  })
+
+  describe("testImapConnection", () => {
+    it("should test IMAP connection successfully", async () => {
+      const mockResponse = { message: "Connection successful" }
+      mockFetch(mockResponse)
+
+      const result = await testImapConnection()
+      expect(result).toEqual(mockResponse)
+      expect(fetch).toHaveBeenCalledWith(`${API_BASE_URL}/imap/test`, {
+        method: "POST",
+      })
+    })
+
+    it("should throw an error with detail if testing IMAP connection fails", async () => {
+      const errorMessage = "Invalid credentials"
+      mockFetchError({ detail: errorMessage })
+      await expect(testImapConnection()).rejects.toThrow(errorMessage)
+    })
+
+    it("should throw a generic error if testing IMAP connection fails without detail", async () => {
+      mockFetchError()
+      await expect(testImapConnection()).rejects.toThrow("Failed to test IMAP connection")
+    })
+  })
+
+  describe("getFeedUrl", () => {
+    it("should return the correct feed URL", () => {
+      const newsletterId = 123
+      const expectedUrl = `${API_BASE_URL}/feeds/${newsletterId}`
+      const url = getFeedUrl(newsletterId)
+      expect(url).toBe(expectedUrl)
+    })
+
+    it("should handle newsletterId being 0", () => {
+      const newsletterId = 0
+      const expectedUrl = `${API_BASE_URL}/feeds/0`
+      const url = getFeedUrl(newsletterId)
+      expect(url).toBe(expectedUrl)
+    })
+  })
+})
--- a/frontend/src/lib/api.ts
+++ b/frontend/src/lib/api.ts
@@ -0,0 +1,142 @@
+// frontend/src/lib/api.ts
+
+const API_BASE_URL = process.env.NEXT_PUBLIC_API_URL;
+
+export interface Sender {
+    id: number;
+    email: string;
+    newsletter_id: number;
+}
+
+export interface Newsletter {
+  id: number
+  name: string
+  is_active: boolean
+  senders: { id: number; email: string }[]
+  entries_count: number
+}
+
+export interface NewsletterCreate {
+    name: string;
+    sender_emails: string[];
+}
+
+export interface NewsletterUpdate {
+    name: string;
+    sender_emails: string[];
+}
+
+export interface Settings {
+    id: number;
+    imap_server: string;
+    imap_username: string;
+    search_folder: string;
+    move_to_folder?: string | null;
+    mark_as_read: boolean;
+    email_check_interval: number;
+    auto_add_new_senders: boolean;
+    locked_fields: string[];
+}
+
+export interface SettingsCreate {
+    imap_server: string;
+    imap_username: string;
+    imap_password?: string;
+    search_folder: string;
+    move_to_folder?: string | null;
+    mark_as_read: boolean;
+    email_check_interval: number;
+    auto_add_new_senders: boolean;
+}
+
+
+export async function getNewsletters(): Promise<Newsletter[]> {
+    const response = await fetch(`${API_BASE_URL}/newsletters`);
+    if (!response.ok) {
+        throw new Error("Failed to fetch newsletters");
+    }
+    return response.json();
+}
+
+export async function createNewsletter(newsletter: NewsletterCreate): Promise<Newsletter> {
+    const response = await fetch(`${API_BASE_URL}/newsletters`, {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json',
+        },
+        body: JSON.stringify(newsletter),
+    });
+    if (!response.ok) {
+        throw new Error("Failed to create newsletter");
+    }
+    return response.json();
+}
+
+export async function updateNewsletter(id: number, newsletter: NewsletterUpdate): Promise<Newsletter> {
+    const response = await fetch(`${API_BASE_URL}/newsletters/${id}`, {
+        method: 'PUT',
+        headers: {
+            'Content-Type': 'application/json',
+        },
+        body: JSON.stringify(newsletter),
+    });
+    if (!response.ok) {
+        throw new Error("Failed to update newsletter");
+    }
+    return response.json();
+}
+
+export async function deleteNewsletter(id: number): Promise<void> {
+    const response = await fetch(`${API_BASE_URL}/newsletters/${id}`, {
+        method: 'DELETE',
+    });
+    if (!response.ok) {
+        throw new Error("Failed to delete newsletter");
+    }
+}
+
+export async function getSettings(): Promise<Settings> {
+    const response = await fetch(`${API_BASE_URL}/imap/settings`);
+    if (!response.ok) {
+        throw new Error("Failed to fetch settings");
+    }
+    return response.json();
+}
+
+export async function updateSettings(settings: SettingsCreate): Promise<Settings> {
+    const response = await fetch(`${API_BASE_URL}/imap/settings`, {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json',
+        },
+        body: JSON.stringify(settings),
+    });
+    if (!response.ok) {
+        throw new Error("Failed to update settings");
+    }
+    return response.json();
+}
+
+export async function getImapFolders(): Promise<string[]> {
+    const response = await fetch(`${API_BASE_URL}/imap/folders`);
+    // If it fails, it's probably because settings are not configured. Return empty array.
+    if (!response.ok) {
+        return [];
+    }
+    return response.json();
+}
+
+export async function testImapConnection(): Promise<{ message: string }> {
+    const response = await fetch(`${API_BASE_URL}/imap/test`, {
+        method: 'POST',
+    });
+    if (!response.ok) {
+        const error = await response.json();
+        throw new Error(error.detail || "Failed to test IMAP connection");
+    }
+    return response.json();
+}
+
+export function getFeedUrl(newsletterId: number): string {
+    return `${API_BASE_URL}/feeds/${newsletterId}`;
+}
--- a/frontend/src/lib/utils.ts
+++ b/frontend/src/lib/utils.ts
@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}
--- a/frontend/tsconfig.json
+++ b/frontend/tsconfig.json
@@ -0,0 +1,28 @@
+{
+  "compilerOptions": {
+    "target": "ES2017",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": ["./src/*"],
+      "@/components/*": ["./components/*"]
+    }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}