I LOVE WOMEN

.gitignore

@@ -2,4 +2,3 @@
 **/node_modules
 node_modules
 .env
-.sqlx

.preludeignore

@@ -0,0 +1,2 @@
+.sqlx
+.env

Cargo.lock

@@ -2,31 +2,6 @@
 # It is not intended for manual editing.
 version = 4
 
-[[package]]
-name = "SimpleLink"
-version = "0.1.0"
-dependencies = [
- "actix-cors",
- "actix-web",
- "anyhow",
- "argon2",
- "base62",
- "chrono",
- "clap",
- "dotenv",
- "jsonwebtoken",
- "lazy_static",
- "regex",
- "serde",
- "serde_json",
- "sqlx",
- "thiserror 1.0.69",
- "tokio",
- "tracing",
- "tracing-subscriber",
- "uuid",
-]
-
 [[package]]
 name = "actix-codec"
 version = "0.5.2"
@@ -2039,6 +2014,31 @@ dependencies = [
  "time",
 ]
 
+[[package]]
+name = "simplelink"
+version = "0.1.0"
+dependencies = [
+ "actix-cors",
+ "actix-web",
+ "anyhow",
+ "argon2",
+ "base62",
+ "chrono",
+ "clap",
+ "dotenv",
+ "jsonwebtoken",
+ "lazy_static",
+ "regex",
+ "serde",
+ "serde_json",
+ "sqlx",
+ "thiserror 1.0.69",
+ "tokio",
+ "tracing",
+ "tracing-subscriber",
+ "uuid",
+]
+
 [[package]]
 name = "slab"
 version = "0.4.9"

Cargo.toml

@@ -1,10 +1,10 @@
 [package]
-name = "SimpleLink"
+name = "simplelink"
 version = "0.1.0"
 edition = "2021"
 
 [lib]
-name = "simple_link"
+name = "simplelink"
 path = "src/lib.rs"
 
 [dependencies]

Dockerfile

@@ -0,0 +1,45 @@
+# Build stage
+FROM rust:latest as builder
+
+# Install PostgreSQL client libraries and SSL dependencies
+RUN apt-get update && \
+    apt-get install -y pkg-config libssl-dev libpq-dev && \
+    rm -rf /var/lib/apt/lists/*
+
+WORKDIR /usr/src/app
+
+# Copy manifests first (better layer caching)
+COPY Cargo.toml Cargo.lock ./
+
+# Copy source code and SQLx prepared queries
+COPY src/ src/
+COPY migrations/ migrations/
+COPY .sqlx/ .sqlx/
+
+# Build your application
+RUN cargo build --release
+
+# Runtime stage
+FROM debian:bookworm-slim
+
+# Install runtime dependencies
+RUN apt-get update && \
+    apt-get install -y libpq5 ca-certificates openssl libssl3 && \
+    rm -rf /var/lib/apt/lists/*
+
+WORKDIR /app
+
+# Copy the binary from builder
+COPY --from=builder /usr/src/app/target/release/simplelink /app/simplelink
+# Copy migrations folder for SQLx
+COPY --from=builder /usr/src/app/migrations /app/migrations
+
+# Expose the port (this is just documentation)
+EXPOSE 8080
+
+# Set default network configuration
+ENV SERVER_HOST=0.0.0.0
+ENV SERVER_PORT=8080
+
+# Run the binary
+CMD ["./simplelink"]

frontend/src/App.tsx

@@ -1,41 +1,45 @@
 import { ThemeProvider } from "@/components/theme-provider"
-import { Button } from './components/ui/button'
 import { LinkForm } from './components/LinkForm'
 import { LinkList } from './components/LinkList'
 import { AuthForms } from './components/AuthForms'
 import { AuthProvider, useAuth } from './context/AuthContext'
-import { useState } from 'react'
+import { Button } from "@/components/ui/button"
 import { Toaster } from './components/ui/toaster'
+import { ModeToggle } from './components/mode-toggle'
+import { useState } from 'react'
 
 function AppContent() {
 	const { user, logout } = useAuth()
 	const [refreshCounter, setRefreshCounter] = useState(0)
 
 	const handleLinkCreated = () => {
-		// Increment refresh counter to trigger list refresh
 		setRefreshCounter(prev => prev + 1)
 	}
 
 	return (
-		<div className="min-h-screen flex flex-col">
+		<div className="min-h-screen bg-background flex flex-col">
-			<div className="container max-w-6xl mx-auto py-8 flex-1 flex flex-col">
+			<header className="border-b">
-				<div className="space-y-8 flex-1 flex flex-col justify-center">
+				<div className="container max-w-6xl mx-auto flex h-16 items-center justify-between px-4">
-					<div className="flex items-center justify-between">
+					<h1 className="text-2xl font-bold">SimpleLink</h1>
-						<h1 className="text-3xl font-bold">SimpleLink</h1>
-						{user ? (
 					<div className="flex items-center gap-4">
-								<p className="text-sm text-muted-foreground">Welcome, {user.email}</p>
+						{user ? (
-								<Button variant="outline" onClick={logout}>
+							<>
+								<span className="text-sm text-muted-foreground">Welcome, {user.email}</span>
+								<Button variant="outline" size="sm" onClick={logout}>
 									Logout
 								</Button>
-							</div>
+							</>
 						) : (
-							<div className="flex items-center gap-4">
+							<span className="text-sm text-muted-foreground">A link shortening and tracking service</span>
-								<p className="text-sm text-muted-foreground">A link shortening and tracking service</p>
-							</div>
 						)}
+						<ModeToggle />
 					</div>
+				</div>
+			</header>
 
+			<main className="flex-1 flex flex-col">
+				<div className="container max-w-6xl mx-auto px-4 py-8 flex-1 flex flex-col">
+					<div className="space-y-8 flex-1 flex flex-col justify-center">
 						{user ? (
 							<>
 								<LinkForm onSuccess={handleLinkCreated} />
@@ -46,6 +50,7 @@ function AppContent() {
 						)}
 					</div>
 				</div>
+			</main>
 		</div>
 	)
 }

frontend/src/components/AuthForms.tsx

@@ -56,7 +56,7 @@ export function AuthForms() {
 
     return (
         <Card className="w-full max-w-md mx-auto p-6">
-            <Tabs value={activeTab} onValueChange={(value: 'login' | 'register') => setActiveTab(value)}>
+            <Tabs value={activeTab} onValueChange={(value: string) => setActiveTab(value as 'login' | 'register')}>
                 <TabsList className="grid w-full grid-cols-2">
                     <TabsTrigger value="login">Login</TabsTrigger>
                     <TabsTrigger value="register">Register</TabsTrigger>

frontend/src/components/LinkForm.tsx

@@ -2,18 +2,19 @@ import { useState } from 'react'
 import { useForm } from 'react-hook-form'
 import { zodResolver } from '@hookform/resolvers/zod'
 import * as z from 'zod'
-import { CreateLinkRequest, Link } from '../types/api'
+import { CreateLinkRequest } from '../types/api'
 import { createShortLink } from '../api/client'
 import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
+import { LinkIcon } from "lucide-react"
 import {
 	Form,
 	FormControl,
 	FormField,
-	FormItem,
 	FormLabel,
 	FormMessage,
 } from "@/components/ui/form"
-import { Input } from "@/components/ui/input"
 import { useToast } from "@/hooks/use-toast"
 
 const formSchema = z.object({
@@ -29,7 +30,7 @@ const formSchema = z.object({
 })
 
 interface LinkFormProps {
-	onSuccess: (link: Link) => void
+	onSuccess: () => void;
 }
 
 export function LinkForm({ onSuccess }: LinkFormProps) {
@@ -47,9 +48,9 @@ export function LinkForm({ onSuccess }: LinkFormProps) {
 	const onSubmit = async (values: z.infer<typeof formSchema>) => {
 		try {
 			setLoading(true)
-			const link = await createShortLink(values as CreateLinkRequest)
+			await createShortLink(values as CreateLinkRequest)
 			form.reset()
-			onSuccess(link)
+			onSuccess() // Call the onSuccess callback to trigger refresh
 			toast({
 				description: "Short link created successfully",
 			})
@@ -65,20 +66,28 @@ export function LinkForm({ onSuccess }: LinkFormProps) {
 	}
 
 	return (
-		<div className="max-w-[500px] mx-auto">
+		<Card className="mb-8">
+			<CardHeader>
+				<CardTitle>Create Short Link</CardTitle>
+				<CardDescription>Enter a URL to generate a shortened link</CardDescription>
+			</CardHeader>
+			<CardContent>
 				<Form {...form}>
-				<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
+					<form onSubmit={form.handleSubmit(onSubmit)} className="flex flex-col gap-4 md:flex-row md:items-end">
 						<FormField
 							control={form.control}
 							name="url"
 							render={({ field }) => (
-							<FormItem>
+								<div className="flex-1 space-y-2">
 									<FormLabel>URL</FormLabel>
 									<FormControl>
-									<Input placeholder="https://example.com" {...field} />
+										<div className="relative">
+											<LinkIcon className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
+											<Input placeholder="https://example.com" className="pl-9" {...field} />
+										</div>
 									</FormControl>
 									<FormMessage />
-							</FormItem>
+								</div>
 							)}
 						/>
 
@@ -86,24 +95,22 @@ export function LinkForm({ onSuccess }: LinkFormProps) {
 							control={form.control}
 							name="custom_code"
 							render={({ field }) => (
-							<FormItem>
+								<div className="w-full md:w-1/4 space-y-2">
-								<FormLabel>Custom Code (optional)</FormLabel>
+									<FormLabel>Custom Code <span className="text-muted-foreground">(optional)</span></FormLabel>
 									<FormControl>
-									<Input placeholder="example" {...field} />
+										<Input placeholder="custom-code" {...field} />
 									</FormControl>
 									<FormMessage />
-							</FormItem>
+								</div>
 							)}
 						/>
 
-					<div className="flex justify-end">
+						<Button type="submit" disabled={loading} className="md:w-auto">
-						<Button type="submit" disabled={loading}>
 							{loading ? "Creating..." : "Create Short Link"}
 						</Button>
-					</div>
 					</form>
 				</Form>
-		</div>
+			</CardContent>
+		</Card>
 	)
 }
-

frontend/src/components/LinkList.tsx

@@ -1,6 +1,7 @@
 import { useEffect, useState } from 'react'
 import { Link } from '../types/api'
 import { getAllLinks, deleteLink } from '../api/client'
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
 import {
 	Table,
 	TableBody,
@@ -9,6 +10,9 @@ import {
 	TableHeader,
 	TableRow,
 } from "@/components/ui/table"
+import { Button } from "@/components/ui/button"
+import { useToast } from "@/hooks/use-toast"
+import { Copy, Trash2 } from "lucide-react"
 import {
 	Dialog,
 	DialogContent,
@@ -17,14 +21,12 @@ import {
 	DialogDescription,
 	DialogFooter,
 } from "@/components/ui/dialog"
-import { Button } from "@/components/ui/button"
-import { useToast } from "@/hooks/use-toast"
 
 interface LinkListProps {
-	refresh: number
+	refresh?: number;
 }
 
-export function LinkList({ refresh }: LinkListProps) {
+export function LinkList({ refresh = 0 }: LinkListProps) {
 	const [links, setLinks] = useState<Link[]>([])
 	const [loading, setLoading] = useState(true)
 	const [deleteModal, setDeleteModal] = useState<{ isOpen: boolean; linkId: number | null }>({
@@ -51,7 +53,7 @@ export function LinkList({ refresh }: LinkListProps) {
 
 	useEffect(() => {
 		fetchLinks()
-	}, [refresh])
+	}, [refresh]) // Re-fetch when refresh counter changes
 
 	const handleDelete = async () => {
 		if (!deleteModal.linkId) return
@@ -61,8 +63,7 @@ export function LinkList({ refresh }: LinkListProps) {
 			await fetchLinks()
 			setDeleteModal({ isOpen: false, linkId: null })
 			toast({
-				title: "Link deleted",
+				description: "Link deleted successfully",
-				description: "The link has been successfully deleted.",
 			})
 		} catch (err) {
 			toast({
@@ -73,12 +74,19 @@ export function LinkList({ refresh }: LinkListProps) {
 		}
 	}
 
+	const handleCopy = (shortCode: string) => {
+		navigator.clipboard.writeText(`http://localhost:8080/${shortCode}`)
+		toast({
+			description: "Link copied to clipboard",
+		})
+	}
+
 	if (loading && !links.length) {
 		return <div className="text-center py-4">Loading...</div>
 	}
 
 	return (
-		<div className="space-y-4">
+		<>
 			<Dialog open={deleteModal.isOpen} onOpenChange={(open) => setDeleteModal({ isOpen: open, linkId: null })}>
 				<DialogContent>
 					<DialogHeader>
@@ -98,41 +106,53 @@ export function LinkList({ refresh }: LinkListProps) {
 				</DialogContent>
 			</Dialog>
 
+			<Card>
+				<CardHeader>
+					<CardTitle>Your Links</CardTitle>
+					<CardDescription>Manage and track your shortened links</CardDescription>
+				</CardHeader>
+				<CardContent>
+					<div className="rounded-md border">
 						<Table>
 							<TableHeader>
 								<TableRow>
 									<TableHead>Short Code</TableHead>
-						<TableHead>Original URL</TableHead>
+									<TableHead className="hidden md:table-cell">Original URL</TableHead>
 									<TableHead>Clicks</TableHead>
-						<TableHead>Created</TableHead>
+									<TableHead className="hidden md:table-cell">Created</TableHead>
 									<TableHead>Actions</TableHead>
 								</TableRow>
 							</TableHeader>
 							<TableBody>
 								{links.map((link) => (
 									<TableRow key={link.id}>
-							<TableCell>{link.short_code}</TableCell>
+										<TableCell className="font-medium">{link.short_code}</TableCell>
-							<TableCell className="max-w-[300px] truncate">{link.original_url}</TableCell>
+										<TableCell className="hidden md:table-cell max-w-[300px] truncate">
+											{link.original_url}
+										</TableCell>
 										<TableCell>{link.clicks}</TableCell>
-							<TableCell>{new Date(link.created_at).toLocaleDateString()}</TableCell>
+										<TableCell className="hidden md:table-cell">
+											{new Date(link.created_at).toLocaleDateString()}
+										</TableCell>
 										<TableCell>
 											<div className="flex gap-2">
 												<Button
-										variant="secondary"
+													variant="ghost"
-										size="sm"
+													size="icon"
-										onClick={() => {
+													className="h-8 w-8"
-											navigator.clipboard.writeText(`http://localhost:8080/${link.short_code}`)
+													onClick={() => handleCopy(link.short_code)}
-											toast({ description: "Link copied to clipboard" })
-										}}
 												>
-										Copy
+													<Copy className="h-4 w-4" />
+													<span className="sr-only">Copy link</span>
 												</Button>
 												<Button
-										variant="destructive"
+													variant="ghost"
-										size="sm"
+													size="icon"
+													className="h-8 w-8 text-destructive"
 													onClick={() => setDeleteModal({ isOpen: true, linkId: link.id })}
 												>
-										Delete
+													<Trash2 className="h-4 w-4" />
+													<span className="sr-only">Delete link</span>
 												</Button>
 											</div>
 										</TableCell>
@@ -141,5 +161,8 @@ export function LinkList({ refresh }: LinkListProps) {
 							</TableBody>
 						</Table>
 					</div>
+				</CardContent>
+			</Card>
+		</>
 	)
 }

src/main.rs

@@ -28,7 +28,9 @@ async fn main() -> Result<()> {
 
     let state = AppState { db: pool };
 
-    info!("Starting server at http://127.0.0.1:8080");
+    let host = std::env::var("SERVER_HOST").unwrap_or_else(|_| "127.0.0.1".to_string());
+    let port = std::env::var("SERVER_PORT").unwrap_or_else(|_| "8080".to_string());
+    info!("Starting server at http://{}:{}", host, port);
 
     // Start HTTP server
     HttpServer::new(move || {
@@ -54,7 +56,7 @@ async fn main() -> Result<()> {
     })
     .workers(2)
     .backlog(10_000)
-    .bind("127.0.0.1:8080")?
+    .bind(format!("{}:{}", host, port))?
     .run()
     .await?;