From bf1276abef4d2f6ed7f8e763a5cc8cc026e96886 Mon Sep 17 00:00:00 2001
From: gracekenn <graceamarachiekuma@gmail.com>
Date: Mon, 30 Mar 2026 12:36:44 +0100
Subject: [PATCH 1/2] ...

---
 .../components/events/create-event-form.tsx   | 157 ++++++++++++++----
 apps/web/components/events/event-card.tsx     |  16 ++
 apps/web/components/layout/navbar.tsx         |  19 ++-
 apps/web/components/ui/button.tsx             |  27 ++-
 server/src/main.rs                            |  37 +++--
 5 files changed, 208 insertions(+), 48 deletions(-)

diff --git a/apps/web/components/events/create-event-form.tsx b/apps/web/components/events/create-event-form.tsx
index 2fc319f..971e27e 100644
--- a/apps/web/components/events/create-event-form.tsx
+++ b/apps/web/components/events/create-event-form.tsx
@@ -1,20 +1,35 @@
 "use client";
 
-import { useState } from "react";
 import { Button } from "@/components/ui/button";
 import Image from "next/image";
+import { useState } from "react";
 
+/**
+ * Form data structure for creating a new event
+ * @interface EventFormData
+ */
 export type EventFormData = {
+  /** Title of the event */
   title: string;
+  /** Start date in YYYY-MM-DD format */
   startDate: string;
+  /** Start time in HH:MM format */
   startTime: string;
+  /** End date in YYYY-MM-DD format */
   endDate: string;
+  /** End time in HH:MM format */
   endTime: string;
+  /** Timezone identifier (e.g., "GMT+00:00 UTC") */
   timezone: string;
+  /** Physical or virtual location */
   location: string;
+  /** Detailed description of the event */
   description: string;
+  /** Event visibility setting */
   visibility: "Public" | "Private";
+  /** Maximum number of attendees */
   capacity: string;
+  /** Ticket price (empty string for free events) */
   price: string;
 };
 
@@ -32,12 +47,19 @@ const initialFormState: EventFormData = {
   price: "",
 };
 
+/**
+ * CreateEventForm component for creating new events
+ *
+ * @returns React component that renders a form for creating events
+ */
 export default function CreateEventForm() {
   const [formData, setFormData] = useState<EventFormData>(initialFormState);
-  const [locationMode, setLocationMode] = useState<"Virtual" | "Physical">("Physical");
+  const [locationMode, setLocationMode] = useState<"Virtual" | "Physical">(
+    "Physical",
+  );
 
   const handleChange = (
-    e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
+    e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
   ) => {
     const { name, value } = e.target;
 
@@ -71,7 +93,8 @@ export default function CreateEventForm() {
   const isSubmitDisabled = !formData.title.trim() || !formData.startDate.trim();
 
   // Common Neubrutalist class for form controls
-  const neubrutalistInputClass = "w-full bg-white border border-gray-100 rounded-xl focus-within:border-black focus-within:border-2 focus-within:shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] transition-all";
+  const neubrutalistInputClass =
+    "w-full bg-white border border-gray-100 rounded-xl focus-within:border-black focus-within:border-2 focus-within:shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] transition-all";
 
   return (
     <div className="flex flex-col gap-6 w-full">
@@ -90,7 +113,9 @@ export default function CreateEventForm() {
 
       {/* Date & Time Section */}
       <div className="flex flex-col sm:flex-row gap-4">
-        <div className={`p-4 flex-1 flex flex-col gap-3 shadow-sm ${neubrutalistInputClass}`}>
+        <div
+          className={`p-4 flex-1 flex flex-col gap-3 shadow-sm ${neubrutalistInputClass}`}
+        >
           <div className="flex items-center gap-4">
             <span className="text-sm font-semibold w-12 flex items-center gap-2">
               <span className="w-2 h-2 rounded-full bg-black block"></span>
@@ -114,7 +139,7 @@ export default function CreateEventForm() {
             />
           </div>
           <div className="flex items-center gap-4 relative">
-             <div className="absolute left-1 top-[-10px] w-px h-6 bg-dashed border-l border-dashed border-gray-300"></div>
+            <div className="absolute left-1 top-[-10px] w-px h-6 bg-dashed border-l border-dashed border-gray-300"></div>
             <span className="text-sm font-semibold w-12 flex items-center gap-2">
               <span className="w-2 h-2 rounded-full border-2 border-gray-300 block"></span>
               End
@@ -137,7 +162,7 @@ export default function CreateEventForm() {
             />
           </div>
         </div>
-        
+
         <div className="bg-[#FFFBEA] rounded-xl p-4 shadow-sm w-full sm:w-auto min-w-[140px] flex items-center justify-between gap-4 border border-black shadow-[-2px_2px_0px_0px_rgba(0,0,0,1)]">
           <div className="flex flex-col">
             <span className="text-sm font-semibold">GMT+00:00</span>
@@ -151,38 +176,68 @@ export default function CreateEventForm() {
 
       {/* Location Section */}
       <div className={`p-4 shadow-sm ${neubrutalistInputClass}`}>
-        <label className="block text-sm font-semibold mb-3">Add Event Location</label>
+        <label className="block text-sm font-semibold mb-3">
+          Add Event Location
+        </label>
         <div className="flex items-center gap-4">
           <input
             type="text"
             name="location"
             value={formData.location}
             onChange={handleChange}
-            placeholder={locationMode === "Virtual" ? "Virtual meeting link" : "Offline location or map pin"}
+            placeholder={
+              locationMode === "Virtual"
+                ? "Virtual meeting link"
+                : "Offline location or map pin"
+            }
             className="flex-1 text-base font-medium bg-transparent outline-none placeholder:text-gray-300"
           />
           <div className="flex gap-2">
-            <button 
+            <button
               type="button"
               onClick={() => setLocationMode("Virtual")}
               className={`w-10 h-10 rounded-full flex items-center justify-center transition-colors ${locationMode === "Virtual" ? "bg-black" : "bg-[#FAF9F6] hover:bg-gray-100"}`}
             >
-              <Image src="/icons/video.svg" width={20} height={20} alt="Video" className={locationMode === "Virtual" ? "invert brightness-0" : "opacity-60"} />
+              <Image
+                src="/icons/video.svg"
+                width={20}
+                height={20}
+                alt="Video"
+                className={
+                  locationMode === "Virtual"
+                    ? "invert brightness-0"
+                    : "opacity-60"
+                }
+              />
             </button>
-            <button 
+            <button
               type="button"
               onClick={() => setLocationMode("Physical")}
               className={`w-10 h-10 rounded-full flex items-center justify-center transition-colors ${locationMode === "Physical" ? "bg-black" : "bg-[#FAF9F6] hover:bg-gray-100"}`}
             >
-              <Image src="/icons/location.svg" width={20} height={20} alt="Map" className={locationMode === "Physical" ? "invert brightness-0" : "opacity-60"} />
+              <Image
+                src="/icons/location.svg"
+                width={20}
+                height={20}
+                alt="Map"
+                className={
+                  locationMode === "Physical"
+                    ? "invert brightness-0"
+                    : "opacity-60"
+                }
+              />
             </button>
           </div>
         </div>
       </div>
 
       {/* Description Section */}
-      <div className={`p-4 shadow-sm min-h-[140px] flex flex-col ${neubrutalistInputClass}`}>
-        <label className="block text-sm font-semibold mb-3">Add Description</label>
+      <div
+        className={`p-4 shadow-sm min-h-[140px] flex flex-col ${neubrutalistInputClass}`}
+      >
+        <label className="block text-sm font-semibold mb-3">
+          Add Description
+        </label>
         <div className="flex items-start gap-4 flex-1">
           <textarea
             name="description"
@@ -197,7 +252,13 @@ export default function CreateEventForm() {
             className="flex-1 text-base font-medium bg-transparent outline-none placeholder:text-gray-300 resize-none overflow-hidden min-h-[80px]"
           />
           <div className="w-10 h-10 rounded-full bg-[#FAF9F6] flex items-center justify-center shrink-0 mt-1">
-            <Image src="/icons/edit.svg" width={20} height={20} alt="Edit" className="opacity-60" />
+            <Image
+              src="/icons/edit.svg"
+              width={20}
+              height={20}
+              alt="Edit"
+              className="opacity-60"
+            />
           </div>
         </div>
       </div>
@@ -205,11 +266,13 @@ export default function CreateEventForm() {
       {/* Event Options Section */}
       <div className="mt-4">
         <h3 className="text-lg font-bold mb-4">Event Options</h3>
-        
+
         <div className="flex flex-col md:flex-row gap-4 mb-4">
           {/* Visibility */}
           <div className="bg-white rounded-xl p-4 shadow-sm flex-1 border border-gray-100">
-            <label className="block text-sm font-semibold mb-3">Event Visibility</label>
+            <label className="block text-sm font-semibold mb-3">
+              Event Visibility
+            </label>
             <div className="flex bg-[#FAF9F6] p-1 rounded-xl w-full">
               <button
                 type="button"
@@ -221,8 +284,18 @@ export default function CreateEventForm() {
                 }`}
               >
                 Public
-                <div className={`w-6 h-6 rounded-full flex items-center justify-center ${formData.visibility === "Public" ? "bg-white border border-gray-100 shadow-sm" : "bg-white border border-gray-100 shadow-sm"} `}>
-                  <Image src="/icons/megaphone.svg" width={14} height={14} alt="Megaphone" className={formData.visibility === "Public" ? "" : "opacity-40"} />
+                <div
+                  className={`w-6 h-6 rounded-full flex items-center justify-center ${formData.visibility === "Public" ? "bg-white border border-gray-100 shadow-sm" : "bg-white border border-gray-100 shadow-sm"} `}
+                >
+                  <Image
+                    src="/icons/megaphone.svg"
+                    width={14}
+                    height={14}
+                    alt="Megaphone"
+                    className={
+                      formData.visibility === "Public" ? "" : "opacity-40"
+                    }
+                  />
                 </div>
               </button>
               <button
@@ -235,8 +308,18 @@ export default function CreateEventForm() {
                 }`}
               >
                 Private
-                <div className={`w-6 h-6 rounded-full flex items-center justify-center ${formData.visibility === "Private" ? "bg-white border border-gray-100 shadow-sm" : "bg-white border border-gray-100 shadow-sm"} `}>
-                  <Image src="/icons/lock.svg" width={12} height={12} alt="Lock" className={formData.visibility === "Private" ? "" : "opacity-40"} />
+                <div
+                  className={`w-6 h-6 rounded-full flex items-center justify-center ${formData.visibility === "Private" ? "bg-white border border-gray-100 shadow-sm" : "bg-white border border-gray-100 shadow-sm"} `}
+                >
+                  <Image
+                    src="/icons/lock.svg"
+                    width={12}
+                    height={12}
+                    alt="Lock"
+                    className={
+                      formData.visibility === "Private" ? "" : "opacity-40"
+                    }
+                  />
                 </div>
               </button>
             </div>
@@ -244,7 +327,9 @@ export default function CreateEventForm() {
 
           {/* Capacity */}
           <div className={`p-4 shadow-sm flex-1 ${neubrutalistInputClass}`}>
-            <label className="block text-sm font-semibold mb-3">Set Capacity</label>
+            <label className="block text-sm font-semibold mb-3">
+              Set Capacity
+            </label>
             <div className="flex items-center justify-between">
               <input
                 type="text"
@@ -255,15 +340,24 @@ export default function CreateEventForm() {
                 className="w-full text-base font-medium bg-transparent outline-none placeholder:text-gray-300"
               />
               <div className="w-10 h-10 bg-[#FFFBEA] border border-black rounded-lg shadow-[-2px_2px_0px_0px_rgba(0,0,0,1)] flex items-center justify-center shrink-0">
-                <Image src="/icons/edit.svg" width={20} height={20} alt="Edit" />
+                <Image
+                  src="/icons/edit.svg"
+                  width={20}
+                  height={20}
+                  alt="Edit"
+                />
               </div>
             </div>
           </div>
         </div>
 
         {/* Ticket Price */}
-        <div className={`p-4 shadow-sm w-full md:w-[calc(50%-8px)] ${neubrutalistInputClass}`}>
-          <label className="block text-sm font-semibold mb-3">Ticket Price</label>
+        <div
+          className={`p-4 shadow-sm w-full md:w-[calc(50%-8px)] ${neubrutalistInputClass}`}
+        >
+          <label className="block text-sm font-semibold mb-3">
+            Ticket Price
+          </label>
           <div className="flex items-center justify-between">
             <input
               type="text"
@@ -274,7 +368,12 @@ export default function CreateEventForm() {
               className="w-full text-base font-medium bg-transparent outline-none placeholder:text-gray-300"
             />
             <div className="w-10 h-10 bg-[#FFFBEA] border border-black rounded-lg shadow-[-2px_2px_0px_0px_rgba(0,0,0,1)] flex items-center justify-center shrink-0">
-              <Image src="/icons/ticket.svg" width={20} height={20} alt="Ticket" />
+              <Image
+                src="/icons/ticket.svg"
+                width={20}
+                height={20}
+                alt="Ticket"
+              />
             </div>
           </div>
         </div>
@@ -297,7 +396,9 @@ export default function CreateEventForm() {
           backgroundColor="bg-[#FFD233]"
           textColor="text-black"
           className={`w-full sm:w-auto ${
-            isSubmitDisabled ? "opacity-50 cursor-not-allowed hover:translate-x-0 hover:translate-y-0 active:translate-x-0 active:translate-y-0" : ""
+            isSubmitDisabled
+              ? "opacity-50 cursor-not-allowed hover:translate-x-0 hover:translate-y-0 active:translate-x-0 active:translate-y-0"
+              : ""
           }`}
         >
           Create Event <span className="ml-1 text-lg">↗</span>
diff --git a/apps/web/components/events/event-card.tsx b/apps/web/components/events/event-card.tsx
index de79717..c206085 100644
--- a/apps/web/components/events/event-card.tsx
+++ b/apps/web/components/events/event-card.tsx
@@ -1,15 +1,31 @@
 import Image from "next/image";
 import Link from "next/link";
 
+/**
+ * Props for the EventCard component
+ * @interface EventCardProps
+ */
 type EventCardProps = {
+  /** Unique identifier for the event */
   id: number;
+  /** Title/name of the event */
   title: string;
+  /** Formatted date string of the event */
   date: string;
+  /** Location where the event takes place */
   location: string;
+  /** Price of the event (string to support "Free" values) */
   price: string;
+  /** URL to the event's cover image */
   imageUrl: string;
 };
 
+/**
+ * EventCard component that displays event information in a card format
+ *
+ * @param props - EventCardProps containing event information
+ * @returns React component that renders a clickable event card
+ */
 export function EventCard({
   id,
   title,
diff --git a/apps/web/components/layout/navbar.tsx b/apps/web/components/layout/navbar.tsx
index ea9c405..00cd71a 100644
--- a/apps/web/components/layout/navbar.tsx
+++ b/apps/web/components/layout/navbar.tsx
@@ -1,16 +1,27 @@
 "use client";
 
-import { useState, useEffect } from "react";
+import { Button } from "@/components/ui/button";
+import { AnimatePresence, motion } from "framer-motion";
 import Image from "next/image";
 import { usePathname } from "next/navigation";
-import { Button } from "@/components/ui/button";
-import { motion, AnimatePresence } from "framer-motion";
+import { useEffect, useState } from "react";
 
 // Sub-components
 import { GuestNav } from "./navbar/guest-nav";
-import { UserNav } from "./navbar/user-nav";
 import { MobileNavLink } from "./navbar/mobile-nav-link";
+import { UserNav } from "./navbar/user-nav";
 
+/**
+ * Main navigation bar component for the application
+ *
+ * Features:
+ * - Responsive design with mobile menu toggle
+ * - Different navigation states for logged-in vs guest users
+ * - Body scroll lock when mobile menu is open
+ * - Animated mobile menu using Framer Motion
+ *
+ * @returns React component that renders the main navigation bar
+ */
 export function Navbar() {
   const pathname = usePathname();
   const [isOpen, setIsOpen] = useState(false);
diff --git a/apps/web/components/ui/button.tsx b/apps/web/components/ui/button.tsx
index 5423630..d30c827 100644
--- a/apps/web/components/ui/button.tsx
+++ b/apps/web/components/ui/button.tsx
@@ -1,13 +1,34 @@
 import React from "react";
 
+/**
+ * Props for the Button component
+ * @interface ButtonProps
+ */
 interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  /** Visual style variant of the button */
   variant?: "primary" | "secondary";
+  /** Shadow color for the button's drop shadow effect */
   shadowColor?: string;
+  /** Text color class or custom color */
   textColor?: string;
+  /** Background color class or custom color */
   backgroundColor?: string;
+  /** Content to render inside the button */
   children: React.ReactNode;
 }
 
+/**
+ * Custom Button component with distinctive shadow and hover effects
+ *
+ * Features:
+ * - Custom shadow effect that moves on hover
+ * - Active state with deeper shadow translation
+ * - Support for both Tailwind and custom colors
+ * - Fully accessible with all standard button props
+ *
+ * @param props - ButtonProps containing button configuration
+ * @returns React component that renders a styled button
+ */
 export function Button({
   className = "",
   shadowColor = "rgba(0,0,0,1)",
@@ -33,10 +54,10 @@ export function Button({
   return (
     <button
       className={`
-        group flex items-center justify-center gap-2 px-6 py-3 rounded-full border border-black 
+        group flex items-center justify-center gap-2 px-6 py-3 rounded-full border border-black
         font-semibold transition-all whitespace-nowrap
-        hover:-translate-x-[2px] hover:translate-y-[2px] 
-        hover:shadow-[-2px_2px_0px_0px_rgba(0,0,0,1)] 
+        hover:-translate-x-[2px] hover:translate-y-[2px]
+        hover:shadow-[-2px_2px_0px_0px_rgba(0,0,0,1)]
         active:-translate-x-[4px] active:translate-y-[4px] active:shadow-none
         ${bgClass} ${textClass} ${className}
       `}
diff --git a/server/src/main.rs b/server/src/main.rs
index db99ff7..0bd61a4 100644
--- a/server/src/main.rs
+++ b/server/src/main.rs
@@ -1,3 +1,14 @@
+//! # Agora Server Main Entry Point
+//!
+//! This module contains the main entry point for the Agora events platform server.
+//! It initializes and configures all necessary services including:
+//! - Database connectivity and migrations
+//! - HTTP server with routing
+//! - Logging and configuration management
+//! - CORS and security middleware
+//!
+//! The server is built using Axum framework and connects to a PostgreSQL database.
+
 use axum::Router;
 use dotenvy::dotenv;
 use sqlx::postgres::PgPoolOptions;
@@ -9,6 +20,15 @@ use agora_server::config::Config;
 use agora_server::routes::create_routes;
 use agora_server::utils::logging::init_logging;
 
+/// Main application entry point.
+///
+/// Initializes the server by:
+/// 1. Loading environment variables from .env file
+/// 2. Setting up structured logging
+/// 3. Loading configuration from environment
+/// 4. Establishing database connection pool
+/// 5. Running database migrations
+/// 6. Starting the HTTP server with configured routes
 #[tokio::main]
 async fn main() {
     dotenv().ok();
@@ -19,24 +39,17 @@ async fn main() {
     tracing::info!("Configuration: PORT={}", config.port);
     tracing::info!("Configuration: RUST_ENV={}", config.rust_env);
     tracing::info!("Configuration: RUST_LOG={}", config.rust_log);
-    tracing::info!(
-        "Configuration: CORS_ALLOWED_ORIGINS={}",
-        config.cors_allowed_origins
-    );
+    tracing::info!("Configuration: CORS_ALLOWED_ORIGINS={}", config.cors_allowed_origins);
     // Note: DATABASE_URL is strictly excluded from logging for security reasons.
 
     let pool = PgPoolOptions::new()
         .max_connections(5)
-        .connect(&config.database_url)
-        .await
+        .connect(&config.database_url).await
         .expect("Failed to connect to database");
 
     tracing::info!("Successfully connected to database");
 
-    sqlx::migrate!()
-        .run(&pool)
-        .await
-        .expect("Failed to run migrations");
+    sqlx::migrate!().run(&pool).await.expect("Failed to run migrations");
 
     tracing::info!("Migrations run successfully");
 
@@ -45,9 +58,7 @@ async fn main() {
     tracing::info!("🚀 Server running at http://localhost:{}", config.port);
     tracing::info!("Request IDs will be set via '{REQUEST_ID_HEADER}' header");
 
-    let listener = TcpListener::bind(addr)
-        .await
-        .expect("Failed to bind address");
+    let listener = TcpListener::bind(addr).await.expect("Failed to bind address");
 
     axum::serve(listener, app).await.expect("Server failed");
 }

From 66ce62cf72cf15ee4f15073dabd3dc4bca8fb545 Mon Sep 17 00:00:00 2001
From: gracekenn <graceamarachiekuma@gmail.com>
Date: Mon, 30 Mar 2026 12:52:26 +0100
Subject: [PATCH 2/2] feat: standardize code comments across codebase

- Add module-level documentation to server/src/main.rs, config/mod.rs, routes/mod.rs
- Add comprehensive JSDoc comments to TypeScript components:
  * EventCard component with props documentation
  * CreateEventForm component with form data structure
  * FilterSidebar component with filter types and helper functions
  * HeroSection and Button components
- Add detailed function documentation to server/src/utils/response.rs
- Improve code documentation for better IDE support and auto-generation
- Closes #368
---
 apps/web/components/events/filter-sidebar.tsx |  40 ++++++-
 apps/web/components/landing/hero-section.tsx  |  14 ++-
 server/src/config/mod.rs                      | 106 ++++++++---------
 server/src/routes/mod.rs                      | 110 +++++++++++-------
 server/src/utils/response.rs                  |  69 +++++++++--
 5 files changed, 229 insertions(+), 110 deletions(-)

diff --git a/apps/web/components/events/filter-sidebar.tsx b/apps/web/components/events/filter-sidebar.tsx
index ba70c86..3e3ea7e 100644
--- a/apps/web/components/events/filter-sidebar.tsx
+++ b/apps/web/components/events/filter-sidebar.tsx
@@ -1,8 +1,8 @@
 "use client";
 
-import { useState, useEffect, useRef } from "react";
+import { AnimatePresence, motion } from "framer-motion";
 import Image from "next/image";
-import { motion, AnimatePresence } from "framer-motion";
+import { useEffect, useRef, useState } from "react";
 
 // ─── Category options ────────────────────────────────────────────────────────
 const CATEGORIES = [
@@ -28,18 +28,35 @@ const LOCATIONS = [
 const DATES = ["Today", "Tomorrow", "This Week", "This Month", "Any time"];
 
 // ─── Types ────────────────────────────────────────────────────────────────────
+/**
+ * Filter state interface for event filtering
+ * @interface FilterState
+ */
 export type FilterState = {
+  /** Selected date filter option */
   date: string;
+  /** Array of selected category names */
   categories: string[];
+  /** Array of selected location names */
   locations: string[];
+  /** Minimum price filter value */
   minPrice: string;
+  /** Maximum price filter value */
   maxPrice: string;
 };
 
+/**
+ * Props for FilterSidebar component
+ * @interface FilterSidebarProps
+ */
 interface FilterSidebarProps {
+  /** Whether the sidebar is open or closed */
   isOpen: boolean;
+  /** Callback function to close the sidebar */
   onClose: () => void;
+  /** Current filter state */
   filters: FilterState;
+  /** Callback function when filters change */
   onFiltersChange: (filters: FilterState) => void;
 }
 
@@ -65,11 +82,30 @@ const backdropVariants = {
 };
 
 // ─── Helper: toggle item in array ────────────────────────────────────────────
+/**
+ * Helper function to toggle an item in an array
+ *
+ * @param arr - Array of strings to modify
+ * @param item - Item to toggle (add if not present, remove if present)
+ * @returns New array with the item toggled
+ */
 function toggleItem(arr: string[], item: string): string[] {
   return arr.includes(item) ? arr.filter((v) => v !== item) : [...arr, item];
 }
 
 // ─── Component ────────────────────────────────────────────────────────────────
+/**
+ * Filter sidebar component for event filtering
+ *
+ * Features:
+ * - Animated slide-in/out with Framer Motion
+ * - Multiple filter categories (date, category, location, price)
+ * - Backdrop overlay for mobile experience
+ * - Responsive design with touch support
+ *
+ * @param props - FilterSidebarProps containing component configuration
+ * @returns React component that renders the filter sidebar
+ */
 export function FilterSidebar({
   isOpen,
   onClose,
diff --git a/apps/web/components/landing/hero-section.tsx b/apps/web/components/landing/hero-section.tsx
index 95cc568..d7deed2 100644
--- a/apps/web/components/landing/hero-section.tsx
+++ b/apps/web/components/landing/hero-section.tsx
@@ -2,9 +2,21 @@
 
 import { Navbar } from "@/components/layout/navbar";
 import { Button } from "@/components/ui/button";
-import Image from "next/image";
 import { motion } from "framer-motion";
+import Image from "next/image";
 
+/**
+ * Hero section component for the landing page
+ *
+ * Features:
+ * - Full-screen hero background
+ * - Navigation bar integration
+ * - Animated content with Framer Motion
+ * - Responsive design for mobile and desktop
+ * - "Powered by Stellar" branding
+ *
+ * @returns React component that renders the main hero section
+ */
 export function HeroSection() {
   return (
     <div
diff --git a/server/src/config/mod.rs b/server/src/config/mod.rs
index b26200a..a151e76 100644
--- a/server/src/config/mod.rs
+++ b/server/src/config/mod.rs
@@ -1,3 +1,24 @@
+//! # Configuration Module
+//!
+//! This module handles application configuration loaded from environment variables.
+//! It provides a centralized configuration structure with sensible defaults
+//! and validation for required settings.
+//!
+//! ## Sub-modules
+//!
+//! - [`cors`] - Cross-Origin Resource Sharing configuration
+//! - [`request_id`] - Request ID middleware configuration
+//! - [`security`] - Security headers configuration
+//!
+//! ## Environment Variables
+//!
+//! The following environment variables are supported:
+//! - `DATABASE_URL` (required) - PostgreSQL connection string
+//! - `PORT` (optional, default: 3001) - Server port
+//! - `RUST_ENV` (optional, default: development) - Environment mode
+//! - `CORS_ALLOWED_ORIGINS` (optional, default: localhost URLs) - CORS origins
+//! - `RUST_LOG` (optional, default: info) - Logging level
+
 use std::env;
 
 use crate::utils::error::AppError;
@@ -7,7 +28,7 @@ pub mod request_id;
 pub mod security;
 
 pub use cors::create_cors_layer;
-pub use request_id::{propagate_request_id_layer, set_request_id_layer};
+pub use request_id::{ propagate_request_id_layer, set_request_id_layer };
 pub use security::create_security_headers_layer;
 
 /// Application configuration loaded from environment variables.
@@ -35,18 +56,24 @@ impl Config {
     /// Returns `Result<Self, AppError>` to properly handle missing or invalid
     /// required environment variables.
     pub fn from_env() -> Result<Self, AppError> {
-        let database_url = env::var("DATABASE_URL").map_err(|_| {
-            AppError::ValidationError("DATABASE_URL environment variable is required".to_string())
-        })?;
-
-        let port = env::var("PORT")
+        let database_url = env
+            ::var("DATABASE_URL")
+            .map_err(|_| {
+                AppError::ValidationError(
+                    "DATABASE_URL environment variable is required".to_string()
+                )
+            })?;
+
+        let port = env
+            ::var("PORT")
             .ok()
             .and_then(|p| p.parse().ok())
             .unwrap_or(3001);
 
         let rust_env = env::var("RUST_ENV").unwrap_or_else(|_| "development".to_string());
 
-        let cors_allowed_origins = env::var("CORS_ALLOWED_ORIGINS")
+        let cors_allowed_origins = env
+            ::var("CORS_ALLOWED_ORIGINS")
             .unwrap_or_else(|_| "http://localhost:3000,http://localhost:5173".to_string());
 
         let rust_log = env::var("RUST_LOG").unwrap_or_else(|_| "info".to_string());
@@ -83,16 +110,10 @@ mod tests {
         env::set_var("DATABASE_URL", "postgres://test:password@localhost/testdb");
 
         let config = Config::from_env();
-        assert!(
-            config.is_ok(),
-            "Config::from_env() should succeed with DATABASE_URL set"
-        );
+        assert!(config.is_ok(), "Config::from_env() should succeed with DATABASE_URL set");
 
         let config = config.unwrap();
-        assert_eq!(
-            config.database_url,
-            "postgres://test:password@localhost/testdb"
-        );
+        assert_eq!(config.database_url, "postgres://test:password@localhost/testdb");
         assert!(config.port > 0);
 
         // Clean up
@@ -107,10 +128,7 @@ mod tests {
         env::remove_var("DATABASE_URL");
 
         let result = Config::from_env();
-        assert!(
-            result.is_err(),
-            "Config::from_env() should fail without DATABASE_URL"
-        );
+        assert!(result.is_err(), "Config::from_env() should fail without DATABASE_URL");
 
         let err = result.unwrap_err();
         assert!(matches!(err, AppError::ValidationError(_)));
@@ -179,10 +197,7 @@ mod tests {
         env::remove_var("CORS_ALLOWED_ORIGINS");
 
         let config = Config::from_env().unwrap();
-        assert_eq!(
-            config.cors_allowed_origins,
-            "http://localhost:3000,http://localhost:5173"
-        );
+        assert_eq!(config.cors_allowed_origins, "http://localhost:3000,http://localhost:5173");
 
         env::remove_var("DATABASE_URL");
     }
@@ -195,10 +210,7 @@ mod tests {
         env::set_var("CORS_ALLOWED_ORIGINS", "http://example.com,http://test.com");
 
         let config = Config::from_env().unwrap();
-        assert_eq!(
-            config.cors_allowed_origins,
-            "http://example.com,http://test.com"
-        );
+        assert_eq!(config.cors_allowed_origins, "http://example.com,http://test.com");
 
         env::remove_var("DATABASE_URL");
         env::remove_var("CORS_ALLOWED_ORIGINS");
@@ -252,18 +264,14 @@ mod tests {
         // Test that PORT environment variable is correctly read
         temp_env::async_with_vars(
             [
-                (
-                    "DATABASE_URL",
-                    Some("postgres://test:password@localhost/testdb"),
-                ),
+                ("DATABASE_URL", Some("postgres://test:password@localhost/testdb")),
                 ("PORT", Some("8080")),
             ],
             async {
                 let config = Config::from_env().unwrap();
                 assert_eq!(config.port, 8080);
-            },
-        )
-        .await;
+            }
+        ).await;
     }
 
     #[tokio::test]
@@ -271,18 +279,14 @@ mod tests {
         // Test that default port 3001 is used when PORT is not set
         temp_env::async_with_vars(
             [
-                (
-                    "DATABASE_URL",
-                    Some("postgres://test:password@localhost/testdb"),
-                ),
+                ("DATABASE_URL", Some("postgres://test:password@localhost/testdb")),
                 ("PORT", None::<&str>),
             ],
             async {
                 let config = Config::from_env().unwrap();
                 assert_eq!(config.port, 3001);
-            },
-        )
-        .await;
+            }
+        ).await;
     }
 
     #[tokio::test]
@@ -290,18 +294,14 @@ mod tests {
         // Test that invalid port values fall back to default
         temp_env::async_with_vars(
             [
-                (
-                    "DATABASE_URL",
-                    Some("postgres://test:password@localhost/testdb"),
-                ),
+                ("DATABASE_URL", Some("postgres://test:password@localhost/testdb")),
                 ("PORT", Some("invalid")),
             ],
             async {
                 let config = Config::from_env().unwrap();
                 assert_eq!(config.port, 3001);
-            },
-        )
-        .await;
+            }
+        ).await;
     }
 
     #[tokio::test]
@@ -312,18 +312,14 @@ mod tests {
         for port in valid_ports {
             temp_env::async_with_vars(
                 [
-                    (
-                        "DATABASE_URL",
-                        Some("postgres://test:password@localhost/testdb"),
-                    ),
+                    ("DATABASE_URL", Some("postgres://test:password@localhost/testdb")),
                     ("PORT", Some(&port.to_string())),
                 ],
                 async {
                     let config = Config::from_env().unwrap();
                     assert_eq!(config.port, port);
-                },
-            )
-            .await;
+                }
+            ).await;
         }
     }
 }
diff --git a/server/src/routes/mod.rs b/server/src/routes/mod.rs
index 69be134..c7a8e84 100644
--- a/server/src/routes/mod.rs
+++ b/server/src/routes/mod.rs
@@ -1,15 +1,47 @@
-use axum::{routing::get, Router};
+//! # Routes Module
+//!
+//! This module defines the application's HTTP routing structure.
+//! It organizes all API endpoints under versioned paths and applies
+//! middleware layers for security, CORS, and request tracking.
+//!
+//! ## Route Structure
+//!
+//! All routes are nested under `/api/v1/` prefix:
+//! - Health check endpoints for monitoring
+//! - Example endpoints for testing error responses
+//! - Future: Event management endpoints
+//!
+//! ## Middleware Layers
+//!
+//! Routes are wrapped with middleware in this order:
+//! 1. Request ID generation and propagation
+//! 2. CORS handling
+//! 3. Security headers
+//! 4. Database connection state
+
+use axum::{ routing::get, Router };
 use sqlx::PgPool;
 
 use crate::config::{
-    create_cors_layer, create_security_headers_layer, propagate_request_id_layer,
+    create_cors_layer,
+    create_security_headers_layer,
+    propagate_request_id_layer,
     set_request_id_layer,
 };
 use crate::handlers::{
-    example_empty_success, example_not_found, example_validation_error,
-    health::{health_check, health_check_db, health_check_ready},
+    example_empty_success,
+    example_not_found,
+    example_validation_error,
+    health::{ health_check, health_check_db, health_check_ready },
 };
 
+/// Creates the main application router with all routes and middleware
+///
+/// # Arguments
+/// * `pool` - PostgreSQL connection pool for database operations
+///
+/// # Returns
+/// A configured Axum Router with all routes and middleware applied
 pub fn create_routes(pool: PgPool) -> Router {
     let api_routes = Router::new()
         .route("/health", get(health_check))
@@ -31,20 +63,35 @@ pub fn create_routes(pool: PgPool) -> Router {
 #[cfg(test)]
 mod tests {
     use super::*;
-    use axum::{
-        body::Body,
-        http::{Request, StatusCode},
-    };
+    use axum::{ body::Body, http::{ Request, StatusCode } };
     use tower::ServiceExt;
 
     fn test_router() -> Router {
         Router::new()
-            .route("/api/v1/health", get(|| async { "ok" }))
-            .route("/api/v1/health/db", get(|| async { "ok" }))
-            .route("/api/v1/health/ready", get(|| async { "ok" }))
-            .route("/api/v1/examples/validation-error", get(|| async { "ok" }))
-            .route("/api/v1/examples/empty-success", get(|| async { "ok" }))
-            .route("/api/v1/examples/not-found/:id", get(|| async { "ok" }))
+            .route(
+                "/api/v1/health",
+                get(|| async { "ok" })
+            )
+            .route(
+                "/api/v1/health/db",
+                get(|| async { "ok" })
+            )
+            .route(
+                "/api/v1/health/ready",
+                get(|| async { "ok" })
+            )
+            .route(
+                "/api/v1/examples/validation-error",
+                get(|| async { "ok" })
+            )
+            .route(
+                "/api/v1/examples/empty-success",
+                get(|| async { "ok" })
+            )
+            .route(
+                "/api/v1/examples/not-found/:id",
+                get(|| async { "ok" })
+            )
     }
 
     async fn get_status(router: Router, path: &str) -> StatusCode {
@@ -55,28 +102,19 @@ mod tests {
     #[tokio::test]
     async fn test_health_route_exists_under_api_v1() {
         let router = test_router();
-        assert_ne!(
-            get_status(router, "/api/v1/health").await,
-            StatusCode::NOT_FOUND
-        );
+        assert_ne!(get_status(router, "/api/v1/health").await, StatusCode::NOT_FOUND);
     }
 
     #[tokio::test]
     async fn test_health_db_route_exists_under_api_v1() {
         let router = test_router();
-        assert_ne!(
-            get_status(router, "/api/v1/health/db").await,
-            StatusCode::NOT_FOUND
-        );
+        assert_ne!(get_status(router, "/api/v1/health/db").await, StatusCode::NOT_FOUND);
     }
 
     #[tokio::test]
     async fn test_health_ready_route_exists_under_api_v1() {
         let router = test_router();
-        assert_ne!(
-            get_status(router, "/api/v1/health/ready").await,
-            StatusCode::NOT_FOUND
-        );
+        assert_ne!(get_status(router, "/api/v1/health/ready").await, StatusCode::NOT_FOUND);
     }
 
     #[tokio::test]
@@ -109,26 +147,14 @@ mod tests {
     #[tokio::test]
     async fn test_old_routes_without_prefix_return_404() {
         let router = test_router();
-        assert_eq!(
-            get_status(router.clone(), "/health").await,
-            StatusCode::NOT_FOUND
-        );
-        assert_eq!(
-            get_status(router.clone(), "/health/db").await,
-            StatusCode::NOT_FOUND
-        );
-        assert_eq!(
-            get_status(router, "/health/ready").await,
-            StatusCode::NOT_FOUND
-        );
+        assert_eq!(get_status(router.clone(), "/health").await, StatusCode::NOT_FOUND);
+        assert_eq!(get_status(router.clone(), "/health/db").await, StatusCode::NOT_FOUND);
+        assert_eq!(get_status(router, "/health/ready").await, StatusCode::NOT_FOUND);
     }
 
     #[tokio::test]
     async fn test_api_without_version_returns_404() {
         let router = test_router();
-        assert_eq!(
-            get_status(router, "/api/health").await,
-            StatusCode::NOT_FOUND
-        );
+        assert_eq!(get_status(router, "/api/health").await, StatusCode::NOT_FOUND);
     }
 }
diff --git a/server/src/utils/response.rs b/server/src/utils/response.rs
index 99f17e0..e22c9e9 100644
--- a/server/src/utils/response.rs
+++ b/server/src/utils/response.rs
@@ -1,36 +1,68 @@
+//! # HTTP Response Utilities
+//!
+//! This module provides standardized response structures and helper functions
+//! for creating consistent API responses across all endpoints.
+//!
+//! ## Response Format
+//!
+//! All successful responses follow this structure:
+//! ```json
+//! {
+//!   "success": true,
+//!   "data": { ... },
+//!   "message": "Optional message"
+//! }
+//! ```
+//!
+//! Error responses are handled by the `AppError` type but can also
+//! be created manually using the `error` function.
+
 use axum::http::StatusCode;
-use axum::response::{IntoResponse, Response};
+use axum::response::{ IntoResponse, Response };
 use axum::Json;
 use serde::Serialize;
 use serde_json::Value;
 
+/// Standard API response wrapper for successful responses
 #[derive(Serialize)]
-pub struct ApiResponse<T>
-where
-    T: Serialize,
-{
+pub struct ApiResponse<T> where T: Serialize {
+    /// Always true for successful responses
     pub success: bool,
+    /// Response data payload
     pub data: Option<T>,
+    /// Optional success message
     pub message: Option<String>,
 }
 
+/// Error response body structure
 #[derive(Serialize)]
 pub struct ApiErrorBody {
+    /// Machine-readable error code
     pub code: String,
+    /// Human-readable error message
     pub message: String,
+    /// Optional error details
     pub details: Option<Value>,
 }
 
+/// Complete error response wrapper
 #[derive(Serialize)]
 pub struct ApiErrorResponse {
+    /// Always false for error responses
     pub success: bool,
+    /// Error details
     pub error: ApiErrorBody,
 }
 
-pub fn success<T>(data: T, message: impl Into<String>) -> impl IntoResponse
-where
-    T: Serialize,
-{
+/// Creates a successful response with data
+///
+/// # Arguments
+/// * `data` - Serializable data to include in response
+/// * `message` - Success message to include
+///
+/// # Returns
+/// An Axum response with 200 status code and JSON body
+pub fn success<T>(data: T, message: impl Into<String>) -> impl IntoResponse where T: Serialize {
     let body = ApiResponse {
         success: true,
         data: Some(data),
@@ -39,6 +71,13 @@ where
     (StatusCode::OK, Json(body))
 }
 
+/// Creates a successful response without data
+///
+/// # Arguments
+/// * `message` - Success message to include
+///
+/// # Returns
+/// An Axum response with 200 status code and JSON body
 pub fn empty_success(message: impl Into<String>) -> impl IntoResponse {
     let body: ApiResponse<()> = ApiResponse {
         success: true,
@@ -48,11 +87,21 @@ pub fn empty_success(message: impl Into<String>) -> impl IntoResponse {
     (StatusCode::OK, Json(body))
 }
 
+/// Creates an error response with custom status code
+///
+/// # Arguments
+/// * `code` - Error code string
+/// * `message` - Error message
+/// * `details` - Optional error details
+/// * `status` - HTTP status code
+///
+/// # Returns
+/// An Axum response with specified status code and JSON error body
 pub fn error(
     code: &str,
     message: impl Into<String>,
     details: Option<Value>,
-    status: StatusCode,
+    status: StatusCode
 ) -> Response {
     let body = ApiErrorResponse {
         success: false,