Feat: add project

.gitignore

@@ -0,0 +1,5 @@
+node_modules
+dist
+.DS_Store
+vite.config.ts.*
+*.tar.gz

Dockerfile

@@ -0,0 +1,22 @@
+FROM node:22-alpine
+
+WORKDIR /app
+
+COPY package.json ./
+COPY tsconfig.json ./
+COPY vite.config.ts ./
+COPY tailwind.config.ts ./
+COPY postcss.config.js ./
+
+RUN npm ci
+
+COPY src ./src
+COPY components.json ./
+
+RUN npm run build
+
+EXPOSE 7860
+ENV PORT=7860
+ENV NODE_ENV=production
+
+CMD ["node", "dist/index.cjs"]

_build/script.ts

@@ -0,0 +1,29 @@
+import { rmSync } from "node:fs";
+import { build as viteBuild } from "vite";
+import { build as esBuild } from "esbuild";
+
+async function buildAll() {
+  rmSync("dist", { recursive: true, force: true });
+
+  console.info("[INFO] Building client...");
+  await viteBuild();
+
+  console.info("[INFO] Building server...");
+  await esBuild({
+    entryPoints: ["src/server/index.ts"],
+    platform: "node",
+    bundle: true,
+    format: "cjs",
+    outfile: "dist/index.cjs",
+    define: {
+      "process.env.NODE_ENV": '"production"',
+    },
+    minify: true,
+    logLevel: "info"
+  });
+}
+
+buildAll().catch((err) => {
+  console.error(err);
+  process.exit(1);
+});

components.json

@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.ts",
+    "css": "src/client/index.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "iconLibrary": "lucide",
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "registries": {}
+}

package.json

@@ -0,0 +1,53 @@
+{
+  "name": "ditzzy_api",
+  "version": "1.0.0",
+  "main": "index.js",
+  "scripts": {
+    "dev": "NODE_ENV=development tsx src/server/index.ts",
+    "start": "NODE_ENV=production node dist/index.cjs",
+    "check": "tsc",
+    "build": "tsx _build/script.ts"
+  },
+  "author": "Ditzzy",
+  "license": "MIT",
+  "type": "module",
+  "devDependencies": {
+    "@tailwindcss/typography": "^0.5.19",
+    "@tailwindcss/vite": "^4.1.18",
+    "@types/express": "^5.0.6",
+    "@types/node": "^25.0.7",
+    "@types/prismjs": "^1.26.5",
+    "@types/react": "^19.2.8",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^5.1.2",
+    "autoprefixer": "^10.4.23",
+    "chokidar": "^5.0.0",
+    "esbuild": "^0.27.2",
+    "glob": "^13.0.0",
+    "postcss": "^8.4.47",
+    "tailwindcss": "^3.4.17",
+    "tsx": "^4.21.0",
+    "typescript": "^5.9.3",
+    "vite": "^7.3.1"
+  },
+  "dependencies": {
+    "@radix-ui/react-dialog": "^1.1.15",
+    "@radix-ui/react-select": "^2.2.6",
+    "@radix-ui/react-separator": "^1.1.8",
+    "@radix-ui/react-slot": "^1.2.4",
+    "@radix-ui/react-tabs": "^1.1.13",
+    "axios": "^1.13.2",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "express": "^5.2.1",
+    "framer-motion": "^12.26.2",
+    "lucide-react": "^0.562.0",
+    "prismjs": "^1.30.0",
+    "react": "^19.2.3",
+    "react-dom": "^19.2.3",
+    "react-router-dom": "^7.12.0",
+    "recharts": "^3.6.0",
+    "tailwind-merge": "^3.4.0",
+    "tailwindcss-animate": "^1.0.7"
+  }
+}

postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

src/client/App.tsx

@@ -0,0 +1,33 @@
+import { Route, Routes } from "react-router-dom";
+import { lazy, Suspense } from "react";
+import { ErrorBoundary } from "@/components/ErrorBoundary";
+import { Loader2 } from "lucide-react";
+
+const Home = lazy(() => import("./pages/Home"));
+const Docs = lazy(() => import("./pages/Docs"));
+const NotFound = lazy(() => import("./pages/not-found"));
+
+function PageLoader() {
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-background">
+      <div className="text-center">
+        <Loader2 className="w-8 h-8 text-purple-400 animate-spin mx-auto mb-4" />
+        <p className="text-gray-400">Loading...</p>
+      </div>
+    </div>
+  );
+}
+
+export default function App() {
+  return (
+    <ErrorBoundary>
+      <Suspense fallback={<PageLoader />}>
+        <Routes>
+          <Route path="/" element={<Home />} />
+          <Route path="/docs" element={<Docs />} />
+          <Route path="*" element={<NotFound />} />
+        </Routes>
+      </Suspense>
+    </ErrorBoundary>
+  );
+}

src/client/hooks/usePlugin.ts

@@ -0,0 +1,203 @@
+import { useState, useEffect } from "react";
+
+export interface PluginParameter {
+  name: string;
+  type: "string" | "number" | "boolean" | "array" | "object";
+  required: boolean;
+  description: string;
+  example?: any;
+  default?: any;
+  enum?: any[];
+  pattern?: string;
+}
+
+export interface PluginResponse {
+  status: number;
+  description: string;
+  example: any;
+}
+
+export interface PluginParameters {
+  query?: PluginParameter[];
+  body?: PluginParameter[];
+  headers?: PluginParameter[];
+  path?: PluginParameter[];
+}
+
+export interface PluginMetadata {
+  name: string;
+  description: string;
+  version: string;
+  category: string[];
+  method: string;
+  endpoint: string;
+  aliases: string[];
+  tags?: string[];
+  parameters?: PluginParameters;
+  responses?: {
+    [statusCode: number]: PluginResponse;
+  };
+}
+
+export interface ApiStats {
+  totalRequests: number;
+  totalSuccess: number;
+  totalFailed: number;
+  uniqueVisitors: number;
+  successRate: string;
+  uptime: {
+    ms: number;
+    hours: number;
+    days: number;
+    formatted: string;
+  };
+}
+
+export interface Category {
+  name: string;
+  count: number;
+}
+
+export function usePlugins() {
+  const [plugins, setPlugins] = useState<PluginMetadata[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    fetchPlugins();
+  }, []);
+
+  const fetchPlugins = async () => {
+    try {
+      setLoading(true);
+      const response = await fetch("/api/plugins");
+      const data = await response.json();
+      
+      if (data.success) {
+        setPlugins(data.plugins);
+      } else {
+        setError("Failed to load plugins");
+      }
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Unknown error");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return { plugins, loading, error, refetch: fetchPlugins };
+}
+
+export function useStats() {
+  const [stats, setStats] = useState<ApiStats | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    fetchStats();
+    const interval = setInterval(fetchStats, 30000);
+    return () => clearInterval(interval);
+  }, []);
+
+  const fetchStats = async () => {
+    try {
+      setLoading(true);
+      const response = await fetch("/api/stats");
+      const data = await response.json();
+      
+      if (data.success) {
+        setStats(data.stats.global);
+      } else {
+        setError("Failed to load stats");
+      }
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Unknown error");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return { stats, loading, error, refetch: fetchStats };
+}
+
+export function useCategories() {
+  const [categories, setCategories] = useState<Category[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    fetchCategories();
+  }, []);
+
+  const fetchCategories = async () => {
+    try {
+      setLoading(true);
+      const response = await fetch("/api/categories");
+      const data = await response.json();
+      
+      if (data.success) {
+        setCategories(data.categories);
+      } else {
+        setError("Failed to load categories");
+      }
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Unknown error");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return { categories, loading, error, refetch: fetchCategories };
+}
+
+export function usePluginsByCategory(category: string | null) {
+  const [plugins, setPlugins] = useState<PluginMetadata[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (!category) {
+      fetchAllPlugins();
+    } else {
+      fetchPluginsByCategory(category);
+    }
+  }, [category]);
+
+  const fetchAllPlugins = async () => {
+    try {
+      setLoading(true);
+      const response = await fetch("/api/plugins");
+      const data = await response.json();
+      
+      if (data.success) {
+        setPlugins(data.plugins);
+      } else {
+        setError("Failed to load plugins");
+      }
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Unknown error");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const fetchPluginsByCategory = async (cat: string) => {
+    try {
+      setLoading(true);
+      const response = await fetch(`/api/plugins/category/${cat}`);
+      const data = await response.json();
+      
+      if (data.success) {
+        setPlugins(data.plugins);
+      } else {
+        setError("Failed to load plugins");
+      }
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Unknown error");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return { plugins, loading, error };
+}

src/client/index.css

@@ -0,0 +1,90 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Space+Grotesk:wght@500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  /* Dark mode default */
+  --background: 240 10% 4%;
+  --foreground: 0 0% 98%;
+
+  --card: 240 10% 6%;
+  --card-foreground: 0 0% 98%;
+
+  --popover: 240 10% 6%;
+  --popover-foreground: 0 0% 98%;
+
+  --primary: 250 100% 65%;
+  --primary-foreground: 0 0% 100%;
+
+  --secondary: 240 5% 15%;
+  --secondary-foreground: 0 0% 98%;
+
+  --muted: 240 5% 15%;
+  --muted-foreground: 240 5% 65%;
+
+  --accent: 250 100% 65%;
+  --accent-foreground: 0 0% 100%;
+
+  --destructive: 0 62.8% 30.6%;
+  --destructive-foreground: 0 0% 98%;
+
+  --border: 240 5% 15%;
+  --input: 240 5% 15%;
+  --ring: 250 100% 65%;
+
+  --radius: 0.75rem;
+
+  --font-sans: 'Inter', sans-serif;
+  --font-display: 'Space Grotesk', sans-serif;
+  --font-mono: 'JetBrains Mono', monospace;
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground font-sans antialiased selection:bg-primary/20 selection:text-primary;
+  }
+  h1, h2, h3, h4, h5, h6 {
+    @apply font-display tracking-tight;
+  }
+}
+
+/* Custom Utilities */
+.glass {
+  @apply bg-background/60 backdrop-blur-xl border border-white/5;
+}
+
+.text-gradient {
+  @apply bg-clip-text text-transparent bg-gradient-to-r from-white via-white/80 to-white/60;
+}
+
+.text-gradient-primary {
+  @apply bg-clip-text text-transparent bg-gradient-to-r from-primary via-purple-400 to-pink-500;
+}
+
+.card-hover {
+  @apply transition-all duration-300 hover:border-primary/50 hover:shadow-lg hover:shadow-primary/5 hover:-translate-y-1;
+}
+
+/* Scrollbar */
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+::-webkit-scrollbar-thumb {
+  @apply bg-muted rounded-full hover:bg-muted-foreground/50 transition-colors;
+}
+
+/* Syntax Highlighting overrides */
+code[class*="language-"],
+pre[class*="language-"] {
+  @apply text-sm font-mono !bg-transparent !text-sm;
+  text-shadow: none !important;
+}

src/client/main.tsx

@@ -0,0 +1,13 @@
+import { createRoot } from "react-dom/client";
+import React from "react";
+import App from "./App";
+import "./index.css";
+import { BrowserRouter } from "react-router-dom";
+
+createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <BrowserRouter>
+      <App />
+    </BrowserRouter>
+  </React.StrictMode>
+)

src/client/pages/Docs.tsx

@@ -0,0 +1,256 @@
+import { useState, useMemo } from "react";
+import { Navbar } from "@/components/Navbar";
+import { PluginCard } from "@/components/PluginCard";
+import { Footer } from "@/components/Footer";
+import { StatsCard } from "@/components/StatsCard";
+import { VisitorChart } from "@/components/VisitorChart";
+import { usePlugins, useStats } from "@/client/hooks/usePlugin";
+import { Activity, CheckCircle2, XCircle, TrendingUp, Loader2, Search, X } from "lucide-react";
+import { Input } from "@/components/ui/input";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+
+export default function Docs() {
+  const { plugins, loading: pluginsLoading } = usePlugins();
+  const { stats, loading: statsLoading } = useStats();
+  
+  const [selectedCategory, setSelectedCategory] = useState<string | null>(null);
+  const [searchQuery, setSearchQuery] = useState("");
+  const [selectedTags, setSelectedTags] = useState<string[]>([]);
+
+  const allTags = useMemo(() => {
+    const tagsSet = new Set<string>();
+    plugins.forEach(plugin => {
+      plugin.tags?.forEach(tag => tagsSet.add(tag));
+    });
+    return Array.from(tagsSet).sort();
+  }, [plugins]);
+
+  const filteredPlugins = useMemo(() => {
+    let filtered = plugins;
+
+    if (selectedCategory) {
+      filtered = filtered.filter((p) => p.category.includes(selectedCategory));
+    }
+
+    if (searchQuery.trim()) {
+      const query = searchQuery.toLowerCase();
+      filtered = filtered.filter((p) => 
+        p.name.toLowerCase().includes(query) ||
+        p.description.toLowerCase().includes(query) ||
+        p.endpoint.toLowerCase().includes(query) ||
+        p.tags?.some(tag => tag.toLowerCase().includes(query))
+      );
+    }
+
+    if (selectedTags.length > 0) {
+      filtered = filtered.filter((p) => 
+        selectedTags.every(tag => p.tags?.includes(tag))
+      );
+    }
+
+    return filtered;
+  }, [plugins, selectedCategory, searchQuery, selectedTags]);
+
+  const toggleTag = (tag: string) => {
+    setSelectedTags(prev => 
+      prev.includes(tag) 
+        ? prev.filter(t => t !== tag)
+        : [...prev, tag]
+    );
+  };
+
+  const clearAllFilters = () => {
+    setSearchQuery("");
+    setSelectedTags([]);
+    setSelectedCategory(null);
+  };
+
+  return (
+    <div className="min-h-screen bg-background flex flex-col font-sans selection:bg-primary/30">
+      {/* Navbar with Categories in Hamburger Menu */}
+      <Navbar onCategorySelect={setSelectedCategory} selectedCategory={selectedCategory} />
+
+      {/* Main Content */}
+      <main className="flex-grow">
+        <div className="max-w-7xl mx-auto px-4 py-8">
+          
+          {/* Statistics Cards */}
+          <div className="mb-8">
+            <h2 className="text-2xl font-bold text-white mb-4">API Statistics</h2>
+            {statsLoading ? (
+              <div className="flex items-center justify-center py-12">
+                <Loader2 className="w-8 h-8 text-purple-400 animate-spin" />
+              </div>
+            ) : stats ? (
+              <>
+                <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
+                  <StatsCard
+                    title="Total Requests"
+                    value={stats.totalRequests.toLocaleString()}
+                    icon={Activity}
+                    color="purple"
+                  />
+                  <StatsCard
+                    title="Successful"
+                    value={stats.totalSuccess.toLocaleString()}
+                    icon={CheckCircle2}
+                    color="green"
+                  />
+                  <StatsCard
+                    title="Failed"
+                    value={stats.totalFailed.toLocaleString()}
+                    icon={XCircle}
+                    color="red"
+                  />
+                  <StatsCard
+                    title="Success Rate"
+                    value={`${stats.successRate}%`}
+                    icon={TrendingUp}
+                    color="blue"
+                  />
+                </div>
+                
+                {/* Visitor Chart */}
+                <VisitorChart />
+              </>
+            ) : (
+              <div className="text-sm text-gray-500">Failed to load statistics</div>
+            )}
+          </div>
+
+          {/* Search and Filter Section */}
+          <div className="mb-6 space-y-4">
+            {/* Search Bar */}
+            <div className="relative">
+              <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 w-5 h-5 text-gray-400" />
+              <Input
+                type="text"
+                placeholder="Search endpoints, descriptions, or tags..."
+                value={searchQuery}
+                onChange={(e) => setSearchQuery(e.target.value)}
+                className="pl-10 bg-white/[0.02] border-white/10 text-white placeholder:text-gray-500 focus:border-purple-500 h-12"
+              />
+              {searchQuery && (
+                <button
+                  onClick={() => setSearchQuery("")}
+                  className="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-white"
+                >
+                  <X className="w-4 h-4" />
+                </button>
+              )}
+            </div>
+
+            {/* Tags Filter */}
+            {allTags.length > 0 && (
+              <div>
+                <div className="flex items-center justify-between mb-2">
+                  <h3 className="text-sm font-semibold text-gray-400">Filter by Tags</h3>
+                  {selectedTags.length > 0 && (
+                    <button
+                      onClick={() => setSelectedTags([])}
+                      className="text-xs text-purple-400 hover:text-purple-300"
+                    >
+                      Clear tags
+                    </button>
+                  )}
+                </div>
+                <div className="flex flex-wrap gap-2">
+                  {allTags.map((tag) => (
+                    <Badge
+                      key={tag}
+                      onClick={() => toggleTag(tag)}
+                      className={`cursor-pointer transition-colors ${
+                        selectedTags.includes(tag)
+                          ? "bg-purple-500/30 text-purple-300 border-purple-500 hover:bg-purple-500/40"
+                          : "bg-white/5 text-gray-400 border-white/10 hover:bg-white/10"
+                      } border`}
+                    >
+                      {tag}
+                    </Badge>
+                  ))}
+                </div>
+              </div>
+            )}
+
+            {/* Active Filters Summary */}
+            {(selectedCategory || searchQuery || selectedTags.length > 0) && (
+              <div className="flex items-center gap-2 flex-wrap">
+                <span className="text-sm text-gray-400">Active filters:</span>
+                {selectedCategory && (
+                  <Badge className="bg-blue-500/20 text-blue-400 border-blue-500/50">
+                    Category: {selectedCategory}
+                  </Badge>
+                )}
+                {searchQuery && (
+                  <Badge className="bg-green-500/20 text-green-400 border-green-500/50">
+                    Search: "{searchQuery}"
+                  </Badge>
+                )}
+                {selectedTags.map(tag => (
+                  <Badge key={tag} className="bg-purple-500/20 text-purple-400 border-purple-500/50">
+                    Tag: {tag}
+                  </Badge>
+                ))}
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  onClick={clearAllFilters}
+                  className="text-xs text-gray-400 hover:text-white"
+                >
+                  Clear all
+                </Button>
+              </div>
+            )}
+          </div>
+
+          {/* Results Count */}
+          <div className="mb-6">
+            <h2 className="text-2xl font-bold text-white capitalize">
+              {selectedCategory ? `${selectedCategory} Endpoints` : "All Endpoints"}
+            </h2>
+            <p className="text-gray-400 text-sm mt-1">
+              Showing {filteredPlugins.length} of {plugins.length} endpoint{filteredPlugins.length !== 1 ? 's' : ''}
+            </p>
+          </div>
+
+          {/* Plugins List */}
+          <div className="space-y-6">
+            {pluginsLoading ? (
+              <div className="flex items-center justify-center py-20">
+                <Loader2 className="w-8 h-8 text-purple-400 animate-spin" />
+              </div>
+            ) : filteredPlugins.length > 0 ? (
+              filteredPlugins.map((plugin) => (
+                <PluginCard key={plugin.endpoint} plugin={plugin} />
+              ))
+            ) : (
+              <div className="text-center py-20">
+                <div className="text-gray-400 text-lg mb-2">No endpoints found</div>
+                <div className="text-gray-600 text-sm mb-4">
+                  {searchQuery || selectedTags.length > 0
+                    ? "Try adjusting your search or filters"
+                    : selectedCategory
+                    ? "No plugins available in this category"
+                    : "No plugins available"}
+                </div>
+                {(searchQuery || selectedTags.length > 0 || selectedCategory) && (
+                  <Button
+                    onClick={clearAllFilters}
+                    variant="outline"
+                    className="border-white/10 text-purple-400 hover:bg-purple-500/10"
+                  >
+                    Clear all filters
+                  </Button>
+                )}
+              </div>
+            )}
+          </div>
+          
+        </div>
+      </main>
+
+      <Footer />
+    </div>
+  );
+}

src/client/pages/Home.tsx

@@ -0,0 +1,267 @@
+import { CodeSnippet } from "@/components/CodeSnippet";
+import { Footer } from "@/components/Footer";
+import { Button } from "@/components/ui/button";
+import { motion } from "framer-motion";
+import { DollarSign, Code2, Key, ChevronDown } from "lucide-react";
+import { Link } from "react-router-dom";
+import { useState } from "react";
+import { getBaseUrl } from "@/lib/api-url";
+
+export default function Home() {
+  const exampleFetchCode = `// Completely easy to use API!
+const res = await fetch("${getBaseUrl()}/api/data");
+const json = await res.json();
+
+console.log(json)
+// Check out your console!
+`;
+
+  const [openFaq, setOpenFaq] = useState<number | null>(null);
+
+  const faqs = [
+    {
+      question: "Do I need an API key to use DitzzyAPI?",
+      answer: "No! DitzzyAPI is completely free and doesn't require any API key. Just start making requests right away."
+    },
+    {
+      question: "Is there really no usage limit?",
+      answer: "DitzzyAPI is free and unlimited for everyone. However, we implement rate limiting to ensure fair usage and keep our servers stable for all users."
+    },
+    {
+      question: "What are the rate limits?",
+      answer: "We apply reasonable rate limits per IP address to prevent abuse and maintain server stability. Normal usage patterns are well within these limits."
+    },
+    {
+      question: "How do you keep the service free?",
+      answer: "We're passionate about supporting the developer community. Rate limits help us manage costs while keeping the service free for everyone."
+    }
+  ];
+
+  return (
+    <div className="min-h-screen bg-background flex flex-col font-sans selection:bg-primary/30">
+      <main className="flex-grow pt-8">
+        {/* Hero Section */}
+        <section className="relative overflow-hidden py-24 sm:py-32">
+          <div className="absolute top-0 left-1/2 -translate-x-1/2 w-[1000px] h-[600px] bg-primary/20 blur-[120px] rounded-full opacity-50 pointer-events-none" />
+          <div className="absolute bottom-0 right-0 w-[800px] h-[600px] bg-purple-500/10 blur-[100px] rounded-full opacity-30 pointer-events-none" />
+
+          <div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex flex-col items-center text-center">
+            <motion.div
+              initial={{ opacity: 0, y: 20 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ duration: 0.5 }}
+              className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-white/5 border border-white/10 text-xs font-medium text-primary mb-8 backdrop-blur-md"
+            >
+              <span className="relative flex h-2 w-2">
+                <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-primary opacity-75"></span>
+                <span className="relative inline-flex rounded-full h-2 w-2 bg-primary"></span>
+              </span>
+              <a href="https://github.com/OhMyDitzzy/Yuki">DitzzyAPI has an official bot script, Click here to check now!</a>
+            </motion.div>
+            
+            <motion.h1
+              initial={{ opacity: 0, y: 20 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ duration: 0.5, delay: 0.1 }}
+              className="text-5xl sm:text-7xl font-display font-bold tracking-tight text-white mb-6 max-w-4xl"
+            >
+              Build faster with the <br />
+              <span className="text-gradient-primary">ultimate developer API</span>
+            </motion.h1>
+
+            <motion.p
+              initial={{ opacity: 0, y: 20 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ duration: 0.5, delay: 0.2 }}
+              className="text-lg sm:text-xl text-muted-foreground max-w-2xl mb-10 leading-relaxed"
+            >
+              Free, unlimited, open-source API, and no API key required. Start building instantly with our 
+              developer-friendly API.
+            </motion.p>
+
+            <motion.div
+              initial={{ opacity: 0, y: 20 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ duration: 0.5, delay: 0.3 }}
+              className="flex flex-col sm:flex-row gap-4 w-full sm:w-auto"
+            >
+              <Link to="/docs">
+                <Button size="lg" className="w-full sm:w-auto h-12 px-8 text-base rounded-xl">
+                  View Documentation
+                </Button>
+              </Link>
+              <a href="https://github.com/OhMyDitzzy/DitzzyAPI" target="_blank" rel="noopener noreferrer">
+                <Button variant="outline" size="lg" className="w-full sm:w-auto h-12 px-8 text-base rounded-xl border-white/10 hover:bg-white/5">
+                  View on GitHub
+                </Button>
+              </a>
+            </motion.div>
+
+            <div className="mt-20 w-full flex justify-center">
+              <CodeSnippet
+                filename="api_example.ts"
+                language="typescript"
+                code={exampleFetchCode}
+                delay={0.5}
+                showLineNumbers={true}
+                copyable={true}
+              />
+            </div>
+          </div>
+        </section>
+
+        {/* Stats Section */}
+        <section className="py-16 border-b border-white/5">
+          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <div className="grid grid-cols-2 md:grid-cols-4 gap-8">
+              {[
+                { value: "100%", label: "Free Forever" },
+                { value: "No Keys", label: "Just Start Coding" },
+                { value: "<100ms", label: "Avg Response" },
+                { value: "24/7", label: "Always Online" }
+              ].map((stat, i) => (
+                <motion.div
+                  key={i}
+                  initial={{ opacity: 0, y: 20 }}
+                  whileInView={{ opacity: 1, y: 0 }}
+                  viewport={{ once: true }}
+                  transition={{ delay: i * 0.1 }}
+                  className="text-center"
+                >
+                  <div className="text-4xl sm:text-5xl font-bold text-gradient-primary mb-2">
+                    {stat.value}
+                  </div>
+                  <div className="text-sm text-muted-foreground">
+                    {stat.label}
+                  </div>
+                </motion.div>
+              ))}
+            </div>
+          </div>
+        </section>
+
+        {/* Features Section */}
+        <section className="py-24 bg-black/20 border-b border-white/5">
+          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <motion.div
+              initial={{ opacity: 0, y: 20 }}
+              whileInView={{ opacity: 1, y: 0 }}
+              viewport={{ once: true }}
+              className="text-center mb-16"
+            >
+              <h2 className="text-3xl sm:text-4xl font-bold text-white mb-4">
+                Why choose DitzzyAPI?
+              </h2>
+              <p className="text-lg text-muted-foreground max-w-2xl mx-auto">
+                No registration, no API keys, no hidden fees. Just pure simplicity.
+              </p>
+            </motion.div>
+            
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
+              {[
+                { icon: Key, title: "No API Key Needed", desc: "Start using immediately. No sign-ups, no authentication hassles." },
+                { icon: DollarSign, title: "Free Unlimited", desc: "Completely free with unlimited requests. No credit card required." },                
+                { icon: Code2, title: "Developer Friendly", desc: "Simple endpoints, clear documentation, and 24/7 availability." }
+              ].map((feature, i) => (
+                <motion.div
+                  key={i}
+                  initial={{ opacity: 0, y: 20 }}
+                  whileInView={{ opacity: 1, y: 0 }}
+                  viewport={{ once: true }}
+                  transition={{ delay: i * 0.1 }}
+                  className="p-6 rounded-2xl bg-white/5 border border-white/5 hover:border-primary/50 transition-colors group"
+                >
+                  <div className="w-12 h-12 rounded-xl bg-primary/10 flex items-center justify-center mb-4 group-hover:bg-primary/20 transition-colors">
+                    <feature.icon className="w-6 h-6 text-primary" />
+                  </div>
+                  <h3 className="text-xl font-bold text-white mb-2">{feature.title}</h3>
+                  <p className="text-muted-foreground">{feature.desc}</p>
+                </motion.div>
+              ))}
+            </div>
+          </div>
+        </section>
+
+        {/* FAQ Section */}
+        <section className="py-24 border-b border-white/5">
+          <div className="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8">
+            <motion.div
+              initial={{ opacity: 0, y: 20 }}
+              whileInView={{ opacity: 1, y: 0 }}
+              viewport={{ once: true }}
+              className="text-center mb-16"
+            >
+              <h2 className="text-3xl sm:text-4xl font-bold text-white mb-4">
+                Frequently Asked Questions
+              </h2>
+              <p className="text-lg text-muted-foreground">
+                Everything you need to know about DitzzyAPI
+              </p>
+            </motion.div>
+
+            <div className="space-y-4">
+              {faqs.map((faq, i) => (
+                <motion.div
+                  key={i}
+                  initial={{ opacity: 0, y: 20 }}
+                  whileInView={{ opacity: 1, y: 0 }}
+                  viewport={{ once: true }}
+                  transition={{ delay: i * 0.1 }}
+                  className="rounded-xl bg-white/5 border border-white/5 overflow-hidden"
+                >
+                  <button
+                    onClick={() => setOpenFaq(openFaq === i ? null : i)}
+                    className="w-full px-6 py-5 flex items-center justify-between text-left hover:bg-white/5 transition-colors"
+                  >
+                    <span className="text-lg font-semibold text-white">
+                      {faq.question}
+                    </span>
+                    <ChevronDown
+                      className={`w-5 h-5 text-primary transition-transform ${
+                        openFaq === i ? "rotate-180" : ""
+                      }`}
+                    />
+                  </button>
+                  {openFaq === i && (
+                    <div className="px-6 pb-5 text-muted-foreground">
+                      {faq.answer}
+                    </div>
+                  )}
+                </motion.div>
+              ))}
+            </div>
+          </div>
+        </section>
+
+        {/* CTA Section */}
+        <section className="py-24 relative overflow-hidden">
+          <div className="absolute inset-0 bg-gradient-to-b from-primary/10 to-transparent pointer-events-none blur-[120px] opacity-50" />
+          <div className="relative max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
+            <motion.div
+              initial={{ opacity: 0, y: 20 }}
+              whileInView={{ opacity: 1, y: 0 }}
+              viewport={{ once: true }}
+            >
+              <h2 className="text-3xl sm:text-5xl font-bold text-white mb-6">
+                Ready to get started?
+              </h2>
+              <p className="text-lg text-muted-foreground mb-8 max-w-2xl mx-auto">
+                Join thousands of developers using DitzzyAPI. No registration needed, 
+                just pick an endpoint and start coding!
+              </p>
+              <div className="flex flex-col sm:flex-row gap-4 justify-center">
+                <Link to="/docs">
+                  <Button size="lg" className="w-full sm:w-auto h-12 px-8 text-base rounded-xl">
+                    Start Building Now
+                  </Button>
+                </Link>
+              </div>
+            </motion.div>
+          </div>
+        </section>
+      </main>
+
+      <Footer />
+    </div>
+  );
+}

src/client/pages/not-found.tsx

@@ -0,0 +1,21 @@
+import { Button } from "@/components/ui/button";
+import { AlertCircle } from "lucide-react";
+import { Link } from "react-router-dom"
+
+export default function NotFound() {
+  return (
+    <div className="min-h-screen w-full flex flex-col items-center justify-center bg-background text-center p-4">
+      <div className="w-16 h-16 bg-red-500/10 rounded-full flex items-center justify-center mb-6">
+        <AlertCircle className="w-8 h-8 text-red-500" />
+      </div>
+
+      <h1 className="text-4xl font-display font-bold text-white mb-2">404 Page Not Found</h1>
+      <p className="text-muted-foreground max-w-md mb-8">
+        The page you are looking for doesn't exist or has been moved.
+      </p>
+      <Link to="/">
+        <Button>Go back</Button>
+      </Link>
+    </div>
+  )
+}

src/components/CodeBlock.tsx

@@ -0,0 +1,63 @@
+import { useEffect, useRef } from "react";
+import Prism from "prismjs";
+import "prismjs/themes/prism-tomorrow.css";
+import "prismjs/components/prism-bash";
+import "prismjs/components/prism-javascript";
+import "prismjs/components/prism-typescript";
+import "prismjs/components/prism-json";
+import { Button } from "@/components/ui/button";
+import { Copy, Check } from "lucide-react";
+import { useState } from "react";
+
+interface CodeBlockProps {
+  code: string;
+  language: "bash" | "javascript" | "typescript" | "json";
+  showCopy?: boolean;
+}
+
+export function CodeBlock({ code, language, showCopy = true }: CodeBlockProps) {
+  const codeRef = useRef<HTMLElement>(null);
+  const [copied, setCopied] = useState(false);
+
+  useEffect(() => {
+    if (codeRef.current) {
+      Prism.highlightElement(codeRef.current);
+    }
+  }, [code, language]);
+
+  const handleCopy = () => {
+    navigator.clipboard.writeText(code);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2000);
+  };
+
+  return (
+    <div className="relative group">
+      {showCopy && (
+        <Button
+          variant="ghost"
+          size="sm"
+          onClick={handleCopy}
+          className="absolute top-2 right-2 h-8 opacity-0 group-hover:opacity-100 transition-opacity bg-white/10 hover:bg-white/20 z-10"
+        >
+          {copied ? (
+            <>
+              <Check className="w-3 h-3 mr-1" />
+              Copied
+            </>
+          ) : (
+            <>
+              <Copy className="w-3 h-3 mr-1" />
+              Copy
+            </>
+          )}
+        </Button>
+      )}
+      <pre className="!bg-[#1e1e1e] !border !border-white/10 !rounded-lg !p-4 !m-0 overflow-x-auto">
+        <code ref={codeRef} className={`language-${language} !text-sm`}>
+          {code}
+        </code>
+      </pre>
+    </div>
+  );
+}

src/components/CodeSnippet.tsx

@@ -0,0 +1,129 @@
+import { useEffect, useState } from "react"
+import { motion } from "framer-motion"
+import { Copy, Check } from "lucide-react"
+import { Button } from "@/components/ui/button"
+import Prism from "prismjs"
+import "prismjs/themes/prism-tomorrow.css"
+import "prismjs/components/prism-javascript"
+import "prismjs/components/prism-typescript"
+import "prismjs/components/prism-python"
+import "prismjs/components/prism-jsx"
+import "prismjs/components/prism-tsx"
+import "prismjs/components/prism-json"
+import "prismjs/components/prism-bash"
+import "prismjs/components/prism-markup"
+import "prismjs/components/prism-css"
+
+interface CodeSnippetProps {
+  filename?: string
+  language?: string
+  code: string
+  delay?: number
+  className?: string
+  showLineNumbers?: boolean
+  copyable?: boolean
+}
+
+const LANGUAGE_MAP: Record<string, string> = {
+  js: "javascript",
+  javascript: "javascript",
+  ts: "typescript",
+  typescript: "typescript",
+  py: "python",
+  python: "python",
+  jsx: "jsx",
+  tsx: "tsx",
+  json: "json",
+  bash: "bash",
+  sh: "bash",
+  html: "markup",
+  css: "css",
+  sql: "sql",
+  go: "go",
+  rust: "rust",
+  java: "java",
+};
+
+export function CodeSnippet({
+  filename = "example.js",
+  language = "javascript",
+  code,
+  delay = 0.5,
+  className = "",
+  showLineNumbers = false,
+  copyable = true,
+}: CodeSnippetProps) {
+  const [copied, setCopied] = useState(false);
+  const prismLanguage = LANGUAGE_MAP[language.toLowerCase()] || language;
+
+  useEffect(() => {
+    // Highlight code whenever component mounts or code changes
+    Prism.highlightAll();
+  }, [code, language]);
+
+  const handleCopy = async () => {
+    try {
+      await navigator.clipboard.writeText(code);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    } catch (err) {
+      console.error("Failed to copy:", err);
+    }
+  };
+
+  const displayLanguage = language.toUpperCase();
+
+  return (
+    <motion.div
+      initial={{ opacity: 0, y: 40 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{ duration: 0.7, delay }}
+      className={`group relative w-full max-w-3xl rounded-xl overflow-hidden border border-white/10 shadow-2xl bg-[#0d1117]/80 backdrop-blur-sm ${className}`}
+    >
+      {/* Header */}
+      <div className="flex items-center justify-between px-4 py-3 border-b border-white/5 bg-gradient-to-r from-white/[0.03] to-white/[0.01]">
+        <div className="flex items-center gap-2">
+          <div className="flex gap-1.5">
+            <div className="w-3 h-3 rounded-full bg-red-500/80" />
+            <div className="w-3 h-3 rounded-full bg-yellow-500/80" />
+            <div className="w-3 h-3 rounded-full bg-green-500/80" />
+          </div>
+          <div className="text-xs text-muted-foreground ml-2 font-mono truncate">
+            {filename}
+          </div>
+        </div>
+
+        <div className="flex items-center gap-3">
+          {copyable && (
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={handleCopy}
+              className="h-7 px-2 hover:bg-white/10 transition-colors"
+            >
+              {copied ? (
+                <Check className="w-3.5 h-3.5 text-green-400" />
+              ) : (
+                <Copy className="w-3.5 h-3.5 text-gray-400" />
+              )}
+              <span className="ml-1 text-xs">
+                {copied ? "Copied!" : "Copy"}
+              </span>
+            </Button>
+          )}
+        </div>
+      </div>
+
+      {/* Code Area */}
+      <div className="relative">
+        <pre className={`font-mono text-sm leading-relaxed m-0 overflow-x-auto p-6 ${showLineNumbers ? 'line-numbers' : ''}`}>
+          <code className={`language-${prismLanguage}`}>
+            {code}
+          </code>
+        </pre>
+
+        <div className="absolute right-0 top-0 bottom-0 w-8 bg-gradient-to-l from-[#0d1117] to-transparent pointer-events-none" />
+      </div>
+    </motion.div>
+  );
+}

src/components/ErrorBoundary.tsx

@@ -0,0 +1,184 @@
+import React, { Component, ReactNode } from "react";
+import { Button } from "./ui/button";
+import { AlertTriangle, RefreshCw, Home, Code } from "lucide-react";
+
+interface Props {
+  children: ReactNode;
+  fallback?: ReactNode;
+}
+
+interface State {
+  hasError: boolean;
+  error: Error | null;
+  errorInfo: React.ErrorInfo | null;
+}
+
+export class ErrorBoundary extends Component<Props, State> {
+  constructor(props: Props) {
+    super(props);
+    this.state = {
+      hasError: false,
+      error: null,
+      errorInfo: null,
+    };
+  }
+
+  static getDerivedStateFromError(error: Error): Partial<State> {
+    return { hasError: true };
+  }
+
+  componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
+    console.error("Error caught by boundary:", error, errorInfo);
+    this.setState({
+      error,
+      errorInfo,
+    });
+  }
+
+  handleReset = () => {
+    this.setState({
+      hasError: false,
+      error: null,
+      errorInfo: null,
+    });
+  };
+
+  render() {
+    if (this.state.hasError) {
+      if (this.props.fallback) {
+        return this.props.fallback;
+      }
+
+      return (
+        <div className="min-h-screen flex items-center justify-center bg-background px-4 py-8">
+          <div className="max-w-3xl w-full">
+            {/* Main Error Card */}
+            <div className="bg-white/[0.02] border border-white/10 rounded-xl overflow-hidden backdrop-blur-sm">
+              {/* Header with Gradient */}
+              <div className="bg-gradient-to-r from-red-500/20 via-orange-500/20 to-yellow-500/20 border-b border-white/10 p-8">
+                <div className="flex items-start gap-4">
+                  {/* Animated Icon */}
+                  <div className="flex-shrink-0">
+                    <div className="w-16 h-16 bg-red-500/20 rounded-2xl flex items-center justify-center border border-red-500/30 backdrop-blur-sm animate-pulse">
+                      <AlertTriangle className="w-8 h-8 text-red-400" />
+                    </div>
+                  </div>
+                  
+                  <div className="flex-1 min-w-0">
+                    <h1 className="text-3xl font-bold text-white mb-2 flex items-center gap-2">
+                      Oops! Something went wrong
+                    </h1>
+                    <p className="text-gray-400 text-base">
+                      Don't worry, your data is safe. The error has been logged and we'll look into it.
+                    </p>
+                  </div>
+                </div>
+              </div>
+
+              {/* Error Details */}
+              <div className="p-8 space-y-6">
+                {this.state.error && (
+                  <div className="space-y-4">
+                    {/* Error Message */}
+                    <div>
+                      <h3 className="text-sm font-semibold text-gray-400 mb-2 flex items-center gap-2">
+                        <Code className="w-4 h-4" />
+                        Error Message
+                      </h3>
+                      <div className="bg-black/50 border border-red-500/30 rounded-lg p-4 overflow-x-auto">
+                        <pre className="text-sm text-red-300 whitespace-pre-wrap break-words">
+                          {this.state.error.toString()}
+                        </pre>
+                      </div>
+                    </div>
+
+                    {/* Stack Trace (Dev Only) */}
+                    {import.meta.env.DEV && this.state.errorInfo && (
+                      <details className="group">
+                        <summary className="cursor-pointer text-sm font-semibold text-gray-400 hover:text-gray-300 transition-colors select-none flex items-center gap-2 mb-2">
+                          <svg 
+                            className="w-4 h-4 transition-transform group-open:rotate-90" 
+                            fill="none" 
+                            stroke="currentColor" 
+                            viewBox="0 0 24 24"
+                          >
+                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
+                          </svg>
+                          Stack Trace (Development Mode)
+                        </summary>
+                        <div className="bg-black/50 border border-white/10 rounded-lg p-4 overflow-x-auto">
+                          <pre className="text-xs text-gray-400 whitespace-pre-wrap">
+                            {this.state.errorInfo.componentStack}
+                          </pre>
+                        </div>
+                      </details>
+                    )}
+                  </div>
+                )}
+
+                {/* Action Buttons */}
+                <div className="flex flex-wrap gap-3 pt-4">
+                  <Button 
+                    onClick={this.handleReset} 
+                    className="bg-purple-500 hover:bg-purple-600 text-white gap-2"
+                  >
+                    <RefreshCw className="w-4 h-4" />
+                    Try Again
+                  </Button>
+                  <Button
+                    onClick={() => window.location.reload()}
+                    variant="outline"
+                    className="border-white/10 text-gray-300 hover:bg-white/5 gap-2"
+                  >
+                    <RefreshCw className="w-4 h-4" />
+                    Refresh Page
+                  </Button>
+                  <Button
+                    onClick={() => (window.location.href = "/")}
+                    variant="outline"
+                    className="border-white/10 text-gray-300 hover:bg-white/5 gap-2"
+                  >
+                    <Home className="w-4 h-4" />
+                    Go Home
+                  </Button>
+                </div>
+
+                {/* Help Text */}
+                <div className="pt-4 border-t border-white/10">
+                  <p className="text-xs text-gray-500">
+                    If this problem persists, please contact support or check the console for more details.
+                  </p>
+                </div>
+              </div>
+            </div>
+
+            {/* Additional Help Card */}
+            <div className="mt-6 bg-white/[0.02] border border-white/10 rounded-xl p-6">
+              <h3 className="text-sm font-semibold text-white mb-3">Quick Troubleshooting</h3>
+              <ul className="space-y-2 text-sm text-gray-400">
+                <li className="flex items-start gap-2">
+                  <span className="text-purple-400 mt-0.5">•</span>
+                  <span>Try clearing your browser cache and cookies</span>
+                </li>
+                <li className="flex items-start gap-2">
+                  <span className="text-purple-400 mt-0.5">•</span>
+                  <span>Check your internet connection</span>
+                </li>
+                <li className="flex items-start gap-2">
+                  <span className="text-purple-400 mt-0.5">•</span>
+                  <span>Make sure you're using a supported browser</span>
+                </li>
+                <li className="flex items-start gap-2">
+                  <span className="text-purple-400 mt-0.5">•</span>
+                  <span>Disable browser extensions that might interfere</span>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      );
+    }
+
+    return this.props.children;
+  }
+}

src/components/Footer.tsx

@@ -0,0 +1,45 @@
+import { Terminal } from "lucide-react";
+
+export function Footer() {
+  return (
+    <footer className="bg-background border-t border-border/40 py-12">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div className="grid grid-cols-1 md:grid-cols-4 gap-8">
+          <div className="col-span-1 md:col-span-2">
+            <div className="flex items-center gap-2 mb-4">
+              <div className="w-8 h-8 rounded-lg bg-primary/20 flex items-center justify-center">
+                <Terminal className="w-5 h-5 text-primary" />
+              </div>
+              <span className="font-display font-bold text-xl tracking-tight text-white">
+                Ditzzy<span className="text-primary">API</span>
+              </span>
+            </div>
+            <p className="text-muted-foreground max-w-sm">
+              The developer-first API platform. Secure, scalable, and effortless integration for modern applications.
+            </p>
+          </div>
+          
+          <div>
+            <h4 className="font-semibold text-white mb-4">Links</h4>
+            <ul className="space-y-2 text-sm text-muted-foreground">
+              <li><a href="/docs" className="hover:text-primary transition-colors">Documentation</a></li>
+              <li><a href="#" className="hover:text-primary transition-colors">Status</a></li>
+            </ul>
+          </div>
+          
+          <div>
+            <h4 className="font-semibold text-white mb-4">Legal</h4>
+            <ul className="space-y-2 text-sm text-muted-foreground">
+              <li><a href="#" className="hover:text-primary transition-colors">Privacy Policy</a></li>
+              <li><a href="#" className="hover:text-primary transition-colors">Terms of Service</a></li>
+            </ul>
+          </div>
+        </div>
+        
+        <div className="mt-12 pt-8 border-t border-border/40 text-center text-sm text-muted-foreground">
+          © {new Date().getFullYear()} DitzzyAPI. All rights reserved.
+        </div>
+      </div>
+    </footer>
+  );
+}

src/components/Navbar.tsx

@@ -0,0 +1,118 @@
+import { useState } from "react";
+import { Link } from "react-router-dom";
+import { Menu, Terminal, X, Home, BookOpen, ChevronRight } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { useCategories } from "@/client/hooks/usePlugin";
+import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from "@/components/ui/sheet";
+
+interface NavbarProps {
+  onCategorySelect?: (category: string | null) => void;
+  selectedCategory?: string | null;
+}
+
+export function Navbar({ onCategorySelect, selectedCategory }: NavbarProps) {
+  const [isOpen, setIsOpen] = useState(false);
+  const { categories } = useCategories();
+
+  const handleCategoryClick = (category: string) => {
+    onCategorySelect?.(category);
+    setIsOpen(false);
+  };
+
+  return (
+    <nav className="border-b border-white/10 bg-black/50 backdrop-blur-xl sticky top-0 z-50">
+      <div className="max-w-7xl mx-auto px-4 py-4">
+        <div className="flex items-center justify-between">
+          {/* Logo */}
+          <Link to="/" className="text-xl font-bold text-white flex items-center gap-2">
+            <Terminal className="w-5 h-5 text-primary" />
+            DitzzyAPI
+          </Link>
+
+          {/* Desktop Navigation */}
+          <div className="hidden md:flex items-center gap-6">
+            <Link
+              to="/"
+              className="text-gray-400 hover:text-white transition flex items-center gap-2"
+            >
+              <Home className="w-4 h-4" />
+              Home
+            </Link>
+            <Link to="/docs" className="text-purple-400 font-medium flex items-center gap-2">
+              <BookOpen className="w-4 h-4" />
+              Documentation
+            </Link>
+          </div>
+
+          {/* Hamburger Menu - Categories */}
+          <Sheet open={isOpen} onOpenChange={setIsOpen}>
+            <SheetTrigger asChild>
+              <Button variant="ghost" size="icon" className="text-white">
+                {isOpen ? <X className="w-6 h-6" /> : <Menu className="w-6 h-6" />}
+              </Button>
+            </SheetTrigger>
+            <SheetContent side="right" className="w-80 bg-background border-white/10">
+              <SheetHeader>
+                <SheetTitle className="text-white">Categories</SheetTitle>
+              </SheetHeader>
+              
+              <div className="mt-6 space-y-2">
+                {/* All Endpoints */}
+                <button
+                  onClick={() => handleCategoryClick("")}
+                  className={`w-full flex items-center justify-between px-4 py-3 rounded-lg text-left transition ${
+                    !selectedCategory
+                      ? "bg-purple-500/20 text-purple-400 border border-purple-500/50"
+                      : "bg-white/5 text-gray-300 hover:bg-white/10"
+                  }`}
+                >
+                  <span className="font-medium">All Endpoints</span>
+                  <ChevronRight className="w-4 h-4" />
+                </button>
+
+                {/* Categories */}
+                {categories.map((cat) => (
+                  <button
+                    key={cat.name}
+                    onClick={() => handleCategoryClick(cat.name)}
+                    className={`w-full flex items-center justify-between px-4 py-3 rounded-lg text-left transition ${
+                      selectedCategory === cat.name
+                        ? "bg-purple-500/20 text-purple-400 border border-purple-500/50"
+                        : "bg-white/5 text-gray-300 hover:bg-white/10"
+                    }`}
+                  >
+                    <span className="capitalize">{cat.name}</span>
+                    <div className="flex items-center gap-2">
+                      <span className="text-xs bg-white/10 px-2 py-1 rounded">{cat.count}</span>
+                      <ChevronRight className="w-4 h-4" />
+                    </div>
+                  </button>
+                ))}
+              </div>
+
+              {/* Mobile Navigation Links */}
+              <div className="md:hidden mt-8 space-y-2 pt-6 border-t border-white/10">
+                <Link
+                  to="/"
+                  onClick={() => setIsOpen(false)}
+                  className="flex items-center gap-2 px-4 py-3 rounded-lg text-gray-300 hover:bg-white/10 transition"
+                >
+                  <Home className="w-4 h-4" />
+                  Home
+                </Link>
+                <Link
+                  to="/docs"
+                  onClick={() => setIsOpen(false)}
+                  className="flex items-center gap-2 px-4 py-3 rounded-lg text-purple-400 hover:bg-white/10 transition"
+                >
+                  <BookOpen className="w-4 h-4" />
+                  Documentation
+                </Link>
+              </div>
+            </SheetContent>
+          </Sheet>
+        </div>
+      </div>
+    </nav>
+  );
+}

src/components/PluginCard.tsx

@@ -0,0 +1,506 @@
+import { useState } from "react";
+import { Card } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { PluginMetadata } from "@/client/hooks/usePlugin";
+import { Play, ChevronDown, ChevronUp, Copy, Check } from "lucide-react";
+import { CodeBlock } from "@/components/CodeBlock";
+import { getApiUrl } from "@/lib/api-url";
+
+interface PluginCardProps {
+  plugin: PluginMetadata;
+}
+
+const methodColors: Record<string, string> = {
+  GET: "bg-green-500/20 text-green-400 border-green-500/50",
+  POST: "bg-blue-500/20 text-blue-400 border-blue-500/50",
+  PUT: "bg-yellow-500/20 text-yellow-400 border-yellow-500/50",
+  DELETE: "bg-red-500/20 text-red-400 border-red-500/50",
+  PATCH: "bg-purple-500/20 text-purple-400 border-purple-500/50",
+};
+
+export function PluginCard({ plugin }: PluginCardProps) {
+  const [paramValues, setParamValues] = useState<Record<string, string>>({});
+  const [response, setResponse] = useState<any>(null);
+  const [responseHeaders, setResponseHeaders] = useState<Record<string, string>>({});
+  const [requestUrl, setRequestUrl] = useState<string>("");
+  const [loading, setLoading] = useState(false);
+  const [isExpanded, setIsExpanded] = useState(false);
+  const [copiedUrl, setCopiedUrl] = useState(false);
+  const [copiedRequestUrl, setCopiedRequestUrl] = useState(false);
+
+  const handleParamChange = (paramName: string, value: string) => {
+    setParamValues((prev) => ({ ...prev, [paramName]: value }));
+  };
+
+  const handleExecute = async () => {
+    setLoading(true);
+    
+    try {
+      let url = "/api" + plugin.endpoint;
+      let fullUrl = getApiUrl(plugin.endpoint);
+
+      if (plugin.method === "GET" && plugin.parameters?.query) {
+        const queryParams = new URLSearchParams();
+        plugin.parameters.query.forEach((param) => {
+          const value = paramValues[param.name];
+          if (value) {
+            queryParams.append(param.name, value);
+          }
+        });
+
+        if (queryParams.toString()) {
+          url += "?" + queryParams.toString();
+          fullUrl += "?" + queryParams.toString();
+        }
+      }
+
+      // Store the request URL for display
+      setRequestUrl(fullUrl);
+
+      const fetchOptions: RequestInit = {
+        method: plugin.method,
+      };
+
+      // Add body for POST/PUT/PATCH
+      if (["POST", "PUT", "PATCH"].includes(plugin.method) && plugin.parameters?.body) {
+        const bodyData: Record<string, any> = {};
+        plugin.parameters.body.forEach((param) => {
+          const value = paramValues[param.name];
+          if (value) {
+            bodyData[param.name] = value;
+          }
+        });
+        fetchOptions.body = JSON.stringify(bodyData);
+        fetchOptions.headers = {
+          "Content-Type": "application/json",
+        };
+      }
+
+      const res = await fetch(url, fetchOptions);
+      const data = await res.json();
+
+      // Capture response headers
+      const headers: Record<string, string> = {};
+      res.headers.forEach((value, key) => {
+        headers[key] = value;
+      });
+
+      setResponseHeaders(headers);
+      setResponse({
+        status: res.status,
+        statusText: res.statusText,
+        data,
+      });
+    } catch (error) {
+      setResponse({
+        status: 500,
+        statusText: "Error",
+        data: { error: error instanceof Error ? error.message : "Unknown error" },
+      });
+      setResponseHeaders({});
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const copyApiUrl = () => {
+    const fullUrl = getApiUrl(plugin.endpoint);
+    navigator.clipboard.writeText(fullUrl);
+    setCopiedUrl(true);
+    setTimeout(() => setCopiedUrl(false), 2000);
+  };
+
+  const copyRequestUrl = () => {
+    navigator.clipboard.writeText(requestUrl);
+    setCopiedRequestUrl(true);
+    setTimeout(() => setCopiedRequestUrl(false), 2000);
+  };
+  
+  const hasQueryParams = plugin.parameters?.query && plugin.parameters.query.length > 0;
+  const hasBodyParams = plugin.parameters?.body && plugin.parameters.body.length > 0;
+  const hasPathParams = plugin.parameters?.path && plugin.parameters.path.length > 0;
+  const hasAnyParams = hasQueryParams || hasBodyParams || hasPathParams;
+  
+  const generateCurlExample = () => {
+    let curl = `curl -X ${plugin.method} "${getApiUrl(plugin.endpoint)}`;
+    
+    if (hasQueryParams) {
+      const exampleParams = plugin.parameters!.query!
+        .map((p) => `${p.name}=${p.example || 'value'}`)
+        .join('&');
+      curl += `?${exampleParams}`;
+    }
+    
+    curl += '"';
+    
+    if (hasBodyParams) {
+      curl += ' \\\n  -H "Content-Type: application/json" \\\n  -d \'';
+      const bodyExample: Record<string, any> = {};
+      plugin.parameters!.body!.forEach((p) => {
+        bodyExample[p.name] = p.example || 'value';
+      });
+      curl += JSON.stringify(bodyExample, null, 2);
+      curl += "'";
+    }
+    
+    return curl;
+  };
+
+  const generateNodeExample = () => {
+    let code = `const response = await fetch("${getApiUrl(plugin.endpoint)}`;
+    
+    if (hasQueryParams) {
+      const exampleParams = plugin.parameters!.query!
+        .map((p) => `${p.name}=${p.example || 'value'}`)
+        .join('&');
+      code += `?${exampleParams}`;
+    }
+    
+    code += '", {\n  method: "' + plugin.method + '"';
+    
+    if (hasBodyParams) {
+      code += ',\n  headers: {\n    "Content-Type": "application/json"\n  },\n  body: JSON.stringify(';
+      const bodyExample: Record<string, any> = {};
+      plugin.parameters!.body!.forEach((p) => {
+        bodyExample[p.name] = p.example || 'value';
+      });
+      code += JSON.stringify(bodyExample, null, 2);
+      code += ')';
+    }
+    
+    code += '\n});\n\nconst data = await response.json();\nconsole.log(data);';
+    return code;
+  };
+
+  return (
+    <Card className="bg-white/[0.02] border-white/10 overflow-hidden">
+      {/* Collapsible Header */}
+      <div 
+        className="p-6 border-b border-white/10 cursor-pointer hover:bg-white/[0.02] transition-colors"
+        onClick={() => setIsExpanded(!isExpanded)}
+      >
+        <div className="flex items-start justify-between gap-4">
+          <div className="flex-1 min-w-0">
+            <div className="flex items-center gap-3 mb-3 flex-wrap">
+              <Badge className={`${methodColors[plugin.method]} border font-bold px-3 py-1 flex-shrink-0`}>
+                {plugin.method}
+              </Badge>
+              <code className="text-sm text-purple-400 font-mono break-all">{plugin.endpoint}</code>
+              <button
+                onClick={(e) => {
+                  e.stopPropagation();
+                  copyApiUrl();
+                }}
+                className="text-gray-400 hover:text-white transition-colors p-1 flex-shrink-0"
+                title="Copy API URL"
+              >
+                {copiedUrl ? (
+                  <Check className="w-4 h-4 text-green-400" />
+                ) : (
+                  <Copy className="w-4 h-4" />
+                )}
+              </button>
+            </div>
+            <h3 className="text-xl font-bold text-white mb-2 break-words">{plugin.name}</h3>
+            <p className="text-gray-400 text-sm break-words">{plugin.description}</p>
+            
+            {/* Tags */}
+            {plugin.tags && plugin.tags.length > 0 && (
+              <div className="flex flex-wrap gap-2 mt-3">
+                {plugin.tags.map((tag) => (
+                  <Badge key={tag} variant="outline" className="bg-white/5 text-gray-400 border-white/10 text-xs">
+                    {tag}
+                  </Badge>
+                ))}
+              </div>
+            )}
+
+            {/* API URL Display */}
+            <div className="mt-3 flex items-start gap-2">
+              <span className="text-xs text-gray-500 flex-shrink-0">API URL:</span>
+              <code className="text-xs text-gray-300 bg-black/30 px-2 py-1 rounded break-all">
+                {getApiUrl(plugin.endpoint)}
+              </code>
+            </div>
+          </div>
+
+          <button 
+            className="text-gray-400 hover:text-white transition-colors flex-shrink-0 p-2 hover:bg-white/5 rounded-lg"
+            onClick={(e) => {
+              e.stopPropagation();
+              setIsExpanded(!isExpanded);
+            }}
+          >
+            {isExpanded ? (
+              <ChevronUp className="w-6 h-6" />
+            ) : (
+              <ChevronDown className="w-6 h-6" />
+            )}
+          </button>
+        </div>
+      </div>
+
+      {/* Expandable Content */}
+      {isExpanded && (
+        <Tabs defaultValue="try" className="w-full">
+          <TabsList className="w-full justify-start rounded-none border-b border-white/10 bg-transparent p-0">
+            <TabsTrigger
+              value="documentation"
+              className="rounded-none data-[state=active]:bg-transparent data-[state=active]:border-b-2 data-[state=active]:border-purple-500 data-[state=active]:text-purple-400 px-6 py-3"
+            >
+              Documentation
+            </TabsTrigger>
+            <TabsTrigger
+              value="try"
+              className="rounded-none data-[state=active]:bg-transparent data-[state=active]:border-b-2 data-[state=active]:border-purple-500 data-[state=active]:text-purple-400 px-6 py-3"
+            >
+              Try It Out
+            </TabsTrigger>
+          </TabsList>
+
+          {/* Documentation Tab */}
+          <TabsContent value="documentation" className="p-6 space-y-6">
+            {/* Parameters Table */}
+            {hasAnyParams && (
+              <div>
+                <h4 className="text-purple-400 font-semibold mb-3">Parameters</h4>
+                <div className="overflow-x-auto">
+                  <table className="w-full text-sm">
+                    <thead>
+                      <tr className="border-b border-white/10">
+                        <th className="text-left text-gray-400 font-medium pb-2 pr-4">Name</th>
+                        <th className="text-left text-gray-400 font-medium pb-2 pr-4">Type</th>
+                        <th className="text-left text-gray-400 font-medium pb-2 pr-4">Required</th>
+                        <th className="text-left text-gray-400 font-medium pb-2">Description</th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                      {/* Path Parameters */}
+                      {plugin.parameters?.path?.map((param) => (
+                        <tr key={param.name} className="border-b border-white/5">
+                          <td className="py-3 pr-4 text-white font-mono">{param.name}</td>
+                          <td className="py-3 pr-4 text-blue-400 font-mono text-xs">{param.type}</td>
+                          <td className="py-3 pr-4">
+                            <span className={param.required ? "text-red-400" : "text-gray-500"}>
+                              {param.required ? "Yes" : "No"}
+                            </span>
+                          </td>
+                          <td className="py-3 text-gray-400">{param.description}</td>
+                        </tr>
+                      ))}
+                      {/* Query Parameters */}
+                      {plugin.parameters?.query?.map((param) => (
+                        <tr key={param.name} className="border-b border-white/5">
+                          <td className="py-3 pr-4 text-white font-mono">{param.name}</td>
+                          <td className="py-3 pr-4 text-blue-400 font-mono text-xs">{param.type}</td>
+                          <td className="py-3 pr-4">
+                            <span className={param.required ? "text-red-400" : "text-gray-500"}>
+                              {param.required ? "Yes" : "No"}
+                            </span>
+                          </td>
+                          <td className="py-3 text-gray-400">{param.description}</td>
+                        </tr>
+                      ))}
+                      {/* Body Parameters */}
+                      {plugin.parameters?.body?.map((param) => (
+                        <tr key={param.name} className="border-b border-white/5">
+                          <td className="py-3 pr-4 text-white font-mono">{param.name}</td>
+                          <td className="py-3 pr-4 text-blue-400 font-mono text-xs">{param.type}</td>
+                          <td className="py-3 pr-4">
+                            <span className={param.required ? "text-red-400" : "text-gray-500"}>
+                              {param.required ? "Yes" : "No"}
+                            </span>
+                          </td>
+                          <td className="py-3 text-gray-400">{param.description}</td>
+                        </tr>
+                      ))}
+                    </tbody>
+                  </table>
+                </div>
+              </div>
+            )}
+
+            {/* Responses */}
+            {plugin.responses && Object.keys(plugin.responses).length > 0 && (
+              <div>
+                <h4 className="text-purple-400 font-semibold mb-3">Responses</h4>
+                <div className="space-y-3">
+                  {Object.entries(plugin.responses).map(([status, response]) => (
+                    <div key={status} className="border border-white/10 rounded-lg overflow-hidden">
+                      <div className={`px-4 py-2 flex items-center gap-3 ${
+                        parseInt(status) >= 200 && parseInt(status) < 300
+                          ? "bg-green-500/10"
+                          : parseInt(status) >= 400 && parseInt(status) < 500
+                          ? "bg-yellow-500/10"
+                          : "bg-red-500/10"
+                      }`}>
+                        <Badge
+                          className={`${
+                            parseInt(status) >= 200 && parseInt(status) < 300
+                              ? "bg-green-500/20 text-green-400 border-green-500/50"
+                              : parseInt(status) >= 400 && parseInt(status) < 500
+                              ? "bg-yellow-500/20 text-yellow-400 border-yellow-500/50"
+                              : "bg-red-500/20 text-red-400 border-red-500/50"
+                          } border font-bold`}
+                        >
+                          {status}
+                        </Badge>
+                        <span className="text-sm text-white">{response.description}</span>
+                      </div>
+                      <pre className="p-4 bg-black/50 text-xs overflow-x-auto">
+                        <code className="text-gray-300">{JSON.stringify(response.example, null, 2)}</code>
+                      </pre>
+                    </div>
+                  ))}
+                </div>
+              </div>
+            )}
+
+            {/* Code Examples */}
+            <div>
+              <h4 className="text-purple-400 font-semibold mb-3">Code Example</h4>
+              <div className="space-y-3">
+                <div>
+                  <div className="mb-2">
+                    <span className="text-xs text-gray-400">cURL</span>
+                  </div>
+                  <CodeBlock code={generateCurlExample()} language="bash" />
+                </div>
+                
+                <div>
+                  <div className="mb-2">
+                    <span className="text-xs text-gray-400">Node.js (fetch)</span>
+                  </div>
+                  <CodeBlock code={generateNodeExample()} language="javascript" />
+                </div>
+              </div>
+            </div>
+          </TabsContent>
+
+          {/* Try It Out Tab */}
+          <TabsContent value="try" className="p-6">
+            {/* Parameters Input */}
+            {hasAnyParams ? (
+              <div className="space-y-4 mb-4">
+                {/* Query Parameters */}
+                {plugin.parameters?.query?.map((param) => (
+                  <div key={param.name}>
+                    <label className="block text-sm text-gray-300 mb-2">
+                      {param.name}
+                      {param.required && <span className="text-red-400 ml-1">*</span>}
+                      <span className="text-xs text-gray-500 ml-2">({param.type})</span>
+                    </label>
+                    <Input
+                      type="text"
+                      placeholder={param.example?.toString() || param.description}
+                      value={paramValues[param.name] || ""}
+                      onChange={(e) => handleParamChange(param.name, e.target.value)}
+                      className="bg-black/50 border-white/10 text-white focus:border-purple-500"
+                    />
+                    <p className="text-xs text-gray-500 mt-1">{param.description}</p>
+                  </div>
+                ))}
+                
+                {/* Body Parameters */}
+                {plugin.parameters?.body?.map((param) => (
+                  <div key={param.name}>
+                    <label className="block text-sm text-gray-300 mb-2">
+                      {param.name}
+                      {param.required && <span className="text-red-400 ml-1">*</span>}
+                      <span className="text-xs text-gray-500 ml-2">({param.type})</span>
+                    </label>
+                    <Input
+                      type="text"
+                      placeholder={param.example?.toString() || param.description}
+                      value={paramValues[param.name] || ""}
+                      onChange={(e) => handleParamChange(param.name, e.target.value)}
+                      className="bg-black/50 border-white/10 text-white focus:border-purple-500"
+                    />
+                    <p className="text-xs text-gray-500 mt-1">{param.description}</p>
+                  </div>
+                ))}
+              </div>
+            ) : (
+              <p className="text-sm text-gray-400 mb-4">No parameters required</p>
+            )}
+
+            {/* Execute Button */}
+            <Button
+              onClick={handleExecute}
+              disabled={loading}
+              className="w-full bg-purple-500 hover:bg-purple-600 text-white py-6 text-base font-semibold"
+            >
+              <Play className="w-5 h-5 mr-2" />
+              {loading ? "Executing..." : "Execute"}
+            </Button>
+
+            {/* Response Display */}
+            {response && (
+              <div className="mt-6 space-y-4">
+                {/* Request URL */}
+                <div>
+                  <div className="flex items-center justify-between mb-2">
+                    <span className="text-sm text-gray-400">Request URL</span>
+                    <button
+                      onClick={copyRequestUrl}
+                      className="text-gray-400 hover:text-white transition-colors p-1"
+                      title="Copy Request URL"
+                    >
+                      {copiedRequestUrl ? (
+                        <Check className="w-4 h-4 text-green-400" />
+                      ) : (
+                        <Copy className="w-4 h-4" />
+                      )}
+                    </button>
+                  </div>
+                  <div className="bg-black/50 border border-white/10 rounded p-3 overflow-x-auto">
+                    <code className="text-xs text-purple-300 break-all">{requestUrl}</code>
+                  </div>
+                </div>
+
+                {/* Response Status */}
+                <div className="flex items-center justify-between">
+                  <span className="text-sm text-gray-400">Response Status</span>
+                  <Badge className={`${
+                    response.status >= 200 && response.status < 300
+                      ? "bg-green-500/20 text-green-400"
+                      : "bg-red-500/20 text-red-400"
+                  }`}>
+                    {response.status} {response.statusText}
+                  </Badge>
+                </div>
+
+                {/* Response Headers */}
+                {Object.keys(responseHeaders).length > 0 && (
+                  <div>
+                    <h5 className="text-sm text-gray-400 mb-2">Response Headers</h5>
+                    <div className="bg-black/50 border border-white/10 rounded p-4 space-y-1 overflow-x-auto">
+                      {Object.entries(responseHeaders).map(([key, value]) => (
+                        <div key={key} className="text-xs">
+                          <span className="text-purple-400">{key}:</span>{" "}
+                          <span className="text-gray-300">{value}</span>
+                        </div>
+                      ))}
+                    </div>
+                  </div>
+                )}
+
+                {/* Response Body with Syntax Highlighting */}
+                <div>
+                  <h5 className="text-sm text-gray-400 mb-2">Response Body</h5>
+                  <CodeBlock 
+                    code={JSON.stringify(response.data, null, 2)} 
+                    language="json"
+                  />
+                </div>
+              </div>
+            )}
+          </TabsContent>
+        </Tabs>
+      )}
+    </Card>
+  );
+}

src/components/StatsCard.tsx

@@ -0,0 +1,30 @@
+import { Card } from "@/components/ui/card";
+import { LucideIcon } from "lucide-react";
+
+interface StatsCardProps {
+  title: string;
+  value: string | number;
+  icon: LucideIcon;
+  color: "purple" | "green" | "red" | "blue";
+}
+
+const colorClasses = {
+  purple: "text-purple-400 bg-purple-500/10 border-purple-500/20",
+  green: "text-green-400 bg-green-500/10 border-green-500/20",
+  red: "text-red-400 bg-red-500/10 border-red-500/20",
+  blue: "text-blue-400 bg-blue-500/10 border-blue-500/20",
+};
+
+export function StatsCard({ title, value, icon: Icon, color }: StatsCardProps) {
+  return (
+    <Card className={`p-4 backdrop-blur-sm ${colorClasses[color]}`}>
+      <div className="flex items-center justify-between mb-2">
+        <Icon className="w-5 h-5" />
+      </div>
+      <div className={`text-2xl font-bold ${colorClasses[color].split(" ")[0]}`}>
+        {value}
+      </div>
+      <div className="text-xs text-muted-foreground mt-1">{title}</div>
+    </Card>
+  );
+}

src/components/VisitorChart.tsx

@@ -0,0 +1,104 @@
+import { useEffect, useState } from "react";
+import { Card } from "@/components/ui/card";
+import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from "recharts";
+import { Users, Loader2 } from "lucide-react";
+
+interface VisitorData {
+  timestamp: number;
+  count: number;
+}
+
+export function VisitorChart() {
+  const [data, setData] = useState<VisitorData[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    fetchVisitorData();
+    const interval = setInterval(fetchVisitorData, 5 * 60 * 1000);
+    return () => clearInterval(interval);
+  }, []);
+
+  const fetchVisitorData = async () => {
+    try {
+      const res = await fetch("/api/stats/visitors");
+      const json = await res.json();
+      if (json.success) {
+        setData(json.data);
+      }
+    } catch (error) {
+      console.error("Failed to fetch visitor data:", error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const formatXAxis = (timestamp: number) => {
+    const date = new Date(timestamp);
+    return date.getHours().toString().padStart(2, '0') + ':00';
+  };
+
+  const CustomTooltip = ({ active, payload }: any) => {
+    if (active && payload && payload.length) {
+      const data = payload[0].payload;
+      const date = new Date(data.timestamp);
+      const timeStr = date.toLocaleString('en-US', {
+        month: 'short',
+        day: 'numeric',
+        hour: '2-digit',
+        minute: '2-digit',
+      });
+
+      return (
+        <div className="bg-black/90 border border-white/20 rounded-lg p-3 backdrop-blur-sm">
+          <p className="text-xs text-gray-400 mb-1">{timeStr}</p>
+          <p className="text-sm font-semibold text-purple-400">
+            {data.count} visitor{data.count !== 1 ? 's' : ''}
+          </p>
+        </div>
+      );
+    }
+    return null;
+  };
+
+  return (
+    <Card className="p-6 bg-white/[0.02] border-white/10">
+      <div className="flex items-center gap-2 mb-4">
+        <Users className="w-5 h-5 text-purple-400" />
+        <h3 className="text-lg font-semibold text-white">Visitor Activity (Last 24 Hours)</h3>
+      </div>
+
+      {loading ? (
+        <div className="h-64 flex items-center justify-center">
+          <Loader2 className="w-6 h-6 text-purple-400 animate-spin" />
+        </div>
+      ) : (
+        <ResponsiveContainer width="100%" height={300}>
+          <LineChart data={data} margin={{ top: 5, right: 30, left: 0, bottom: 5 }}>
+            <CartesianGrid strokeDasharray="3 3" stroke="rgba(255,255,255,0.1)" />
+            <XAxis
+              dataKey="timestamp"
+              tickFormatter={formatXAxis}
+              stroke="rgba(255,255,255,0.5)"
+              style={{ fontSize: '12px' }}
+              interval="preserveStartEnd"
+            />
+            <YAxis
+              stroke="rgba(255,255,255,0.5)"
+              style={{ fontSize: '12px' }}
+              allowDecimals={false}
+            />
+            <Tooltip content={<CustomTooltip />} />
+            <Line
+              type="monotone"
+              dataKey="count"
+              stroke="#a855f7"
+              strokeWidth={2}
+              dot={{ fill: '#a855f7', r: 3 }}
+              activeDot={{ r: 5 }}
+            />
+          </LineChart>
+        </ResponsiveContainer>
+      )}
+    </Card>
+  );
+}

src/components/ui/badge.tsx

@@ -0,0 +1,36 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const badgeVariants = cva(
+  "inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  {
+    variants: {
+      variant: {
+        default:
+          "border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80",
+        secondary:
+          "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        destructive:
+          "border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80",
+        outline: "text-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+export interface BadgeProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof badgeVariants> {}
+
+function Badge({ className, variant, ...props }: BadgeProps) {
+  return (
+    <div className={cn(badgeVariants({ variant }), className)} {...props} />
+  )
+}
+
+export { Badge, badgeVariants }

src/components/ui/button.tsx

@@ -0,0 +1,57 @@
+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-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default:
+          "bg-primary text-primary-foreground shadow hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
+        outline:
+          "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
+        secondary:
+          "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-9 px-4 py-2",
+        sm: "h-8 rounded-md px-3 text-xs",
+        lg: "h-10 rounded-md px-8",
+        icon: "h-9 w-9",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button"
+    return (
+      <Comp
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Button.displayName = "Button"
+
+export { Button, buttonVariants }

src/components/ui/card.tsx

@@ -0,0 +1,76 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+const Card = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      "rounded-xl border bg-card text-card-foreground shadow",
+      className
+    )}
+    {...props}
+  />
+))
+Card.displayName = "Card"
+
+const CardHeader = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex flex-col space-y-1.5 p-6", className)}
+    {...props}
+  />
+))
+CardHeader.displayName = "CardHeader"
+
+const CardTitle = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("font-semibold leading-none tracking-tight", className)}
+    {...props}
+  />
+))
+CardTitle.displayName = "CardTitle"
+
+const CardDescription = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+CardDescription.displayName = "CardDescription"
+
+const CardContent = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
+))
+CardContent.displayName = "CardContent"
+
+const CardFooter = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex items-center p-6 pt-0", className)}
+    {...props}
+  />
+))
+CardFooter.displayName = "CardFooter"
+
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }

src/components/ui/input.tsx

@@ -0,0 +1,22 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<"input">>(
+  ({ className, type, ...props }, ref) => {
+    return (
+      <input
+        type={type}
+        className={cn(
+          "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Input.displayName = "Input"
+
+export { Input }

src/components/ui/select.tsx

@@ -0,0 +1,159 @@
+"use client"
+
+import * as React from "react"
+import * as SelectPrimitive from "@radix-ui/react-select"
+import { Check, ChevronDown, ChevronUp } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const Select = SelectPrimitive.Root
+
+const SelectGroup = SelectPrimitive.Group
+
+const SelectValue = SelectPrimitive.Value
+
+const SelectTrigger = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      "flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background data-[placeholder]:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <SelectPrimitive.Icon asChild>
+      <ChevronDown className="h-4 w-4 opacity-50" />
+    </SelectPrimitive.Icon>
+  </SelectPrimitive.Trigger>
+))
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName
+
+const SelectScrollUpButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollUpButton
+    ref={ref}
+    className={cn(
+      "flex cursor-default items-center justify-center py-1",
+      className
+    )}
+    {...props}
+  >
+    <ChevronUp className="h-4 w-4" />
+  </SelectPrimitive.ScrollUpButton>
+))
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName
+
+const SelectScrollDownButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollDownButton
+    ref={ref}
+    className={cn(
+      "flex cursor-default items-center justify-center py-1",
+      className
+    )}
+    {...props}
+  >
+    <ChevronDown className="h-4 w-4" />
+  </SelectPrimitive.ScrollDownButton>
+))
+SelectScrollDownButton.displayName =
+  SelectPrimitive.ScrollDownButton.displayName
+
+const SelectContent = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
+>(({ className, children, position = "popper", ...props }, ref) => (
+  <SelectPrimitive.Portal>
+    <SelectPrimitive.Content
+      ref={ref}
+      className={cn(
+        "relative z-50 max-h-[--radix-select-content-available-height] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover text-popover-foreground shadow-md 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 origin-[--radix-select-content-transform-origin]",
+        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)]"
+        )}
+      >
+        {children}
+      </SelectPrimitive.Viewport>
+      <SelectScrollDownButton />
+    </SelectPrimitive.Content>
+  </SelectPrimitive.Portal>
+))
+SelectContent.displayName = SelectPrimitive.Content.displayName
+
+const SelectLabel = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Label
+    ref={ref}
+    className={cn("px-2 py-1.5 text-sm font-semibold", className)}
+    {...props}
+  />
+))
+SelectLabel.displayName = SelectPrimitive.Label.displayName
+
+const SelectItem = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    {...props}
+  >
+    <span className="absolute right-2 flex h-3.5 w-3.5 items-center justify-center">
+      <SelectPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </SelectPrimitive.ItemIndicator>
+    </span>
+    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+  </SelectPrimitive.Item>
+))
+SelectItem.displayName = SelectPrimitive.Item.displayName
+
+const SelectSeparator = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 my-1 h-px bg-muted", className)}
+    {...props}
+  />
+))
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName
+
+export {
+  Select,
+  SelectGroup,
+  SelectValue,
+  SelectTrigger,
+  SelectContent,
+  SelectLabel,
+  SelectItem,
+  SelectSeparator,
+  SelectScrollUpButton,
+  SelectScrollDownButton,
+}

src/components/ui/separator.tsx

@@ -0,0 +1,29 @@
+import * as React from "react"
+import * as SeparatorPrimitive from "@radix-ui/react-separator"
+
+import { cn } from "@/lib/utils"
+
+const Separator = React.forwardRef<
+  React.ElementRef<typeof SeparatorPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
+>(
+  (
+    { className, orientation = "horizontal", decorative = true, ...props },
+    ref
+  ) => (
+    <SeparatorPrimitive.Root
+      ref={ref}
+      decorative={decorative}
+      orientation={orientation}
+      className={cn(
+        "shrink-0 bg-border",
+        orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
+        className
+      )}
+      {...props}
+    />
+  )
+)
+Separator.displayName = SeparatorPrimitive.Root.displayName
+
+export { Separator }

src/components/ui/sheet.tsx

@@ -0,0 +1,138 @@
+import * as React from "react"
+import * as SheetPrimitive from "@radix-ui/react-dialog"
+import { cva, type VariantProps } from "class-variance-authority"
+import { X } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const Sheet = SheetPrimitive.Root
+
+const SheetTrigger = SheetPrimitive.Trigger
+
+const SheetClose = SheetPrimitive.Close
+
+const SheetPortal = SheetPrimitive.Portal
+
+const SheetOverlay = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <SheetPrimitive.Overlay
+    className={cn(
+      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className
+    )}
+    {...props}
+    ref={ref}
+  />
+))
+SheetOverlay.displayName = SheetPrimitive.Overlay.displayName
+
+const sheetVariants = cva(
+  "fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500 data-[state=open]:animate-in data-[state=closed]:animate-out",
+  {
+    variants: {
+      side: {
+        top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
+        bottom:
+          "inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
+        left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
+        right:
+          "inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
+      },
+    },
+    defaultVariants: {
+      side: "right",
+    },
+  }
+)
+
+interface SheetContentProps
+  extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
+    VariantProps<typeof sheetVariants> {}
+
+const SheetContent = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Content>,
+  SheetContentProps
+>(({ side = "right", className, children, ...props }, ref) => (
+  <SheetPortal>
+    <SheetOverlay />
+    <SheetPrimitive.Content
+      ref={ref}
+      className={cn(sheetVariants({ side }), className)}
+      {...props}
+    >
+      <SheetPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
+        <X className="h-4 w-4" />
+        <span className="sr-only">Close</span>
+      </SheetPrimitive.Close>
+      {children}
+    </SheetPrimitive.Content>
+  </SheetPortal>
+))
+SheetContent.displayName = SheetPrimitive.Content.displayName
+
+const SheetHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col space-y-2 text-center sm:text-left",
+      className
+    )}
+    {...props}
+  />
+)
+SheetHeader.displayName = "SheetHeader"
+
+const SheetFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+      className
+    )}
+    {...props}
+  />
+)
+SheetFooter.displayName = "SheetFooter"
+
+const SheetTitle = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <SheetPrimitive.Title
+    ref={ref}
+    className={cn("text-lg font-semibold text-foreground", className)}
+    {...props}
+  />
+))
+SheetTitle.displayName = SheetPrimitive.Title.displayName
+
+const SheetDescription = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <SheetPrimitive.Description
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+SheetDescription.displayName = SheetPrimitive.Description.displayName
+
+export {
+  Sheet,
+  SheetPortal,
+  SheetOverlay,
+  SheetTrigger,
+  SheetClose,
+  SheetContent,
+  SheetHeader,
+  SheetFooter,
+  SheetTitle,
+  SheetDescription,
+}

src/components/ui/tabs.tsx

@@ -0,0 +1,53 @@
+import * as React from "react"
+import * as TabsPrimitive from "@radix-ui/react-tabs"
+
+import { cn } from "@/lib/utils"
+
+const Tabs = TabsPrimitive.Root
+
+const TabsList = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.List
+    ref={ref}
+    className={cn(
+      "inline-flex h-9 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground",
+      className
+    )}
+    {...props}
+  />
+))
+TabsList.displayName = TabsPrimitive.List.displayName
+
+const TabsTrigger = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      "inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow",
+      className
+    )}
+    {...props}
+  />
+))
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName
+
+const TabsContent = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Content
+    ref={ref}
+    className={cn(
+      "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+      className
+    )}
+    {...props}
+  />
+))
+TabsContent.displayName = TabsPrimitive.Content.displayName
+
+export { Tabs, TabsList, TabsTrigger, TabsContent }

src/index.html

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1" />
+    <link rel="icon" href="/favicon.svg" type="image/svg+xml" />
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/client/main.tsx"></script>
+  </body>
+</html>

src/lib/api-url.ts

@@ -0,0 +1,25 @@
+export function getBaseUrl(): string {
+  // Check if we're in browser
+  if (typeof window !== 'undefined') {
+    if (window.location.hostname !== 'localhost' && window.location.hostname !== '127.0.0.1') {
+      return process.env.DOMAIN_URL;
+    }
+    return `${window.location.protocol}//${window.location.host}`;
+  }
+
+  return process.env.NODE_ENV === 'production' 
+    ? process.env.DOMAIN_URL
+    : 'http://localhost:5000';
+}
+
+export function getApiUrl(endpoint: string): string {
+  const baseUrl = getBaseUrl();
+  // Remove leading slash if present to avoid double slashes
+  const cleanEndpoint = endpoint.startsWith('/') ? endpoint : `/${endpoint}`;
+  return `${baseUrl}/api${cleanEndpoint}`;
+}
+
+export function getDisplayUrl(): string {
+  const baseUrl = getBaseUrl();
+  return baseUrl.replace(/^https?:\/\//, '');
+}

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));
+}

src/server/index.ts

@@ -0,0 +1,261 @@
+import express, { type Request, Response, NextFunction } from "express";
+import { serveStatic } from "./static";
+import { createServer } from "http";
+import { initPluginLoader, getPluginLoader } from "./plugin-loader";
+import { join } from "path";
+import { initStatsTracker, getStatsTracker } from "./lib/stats-tracker";
+
+const app = express();
+const httpServer = createServer(app);
+
+declare module "http" {
+  interface IncomingMessage {
+    rawBody: unknown;
+  }
+}
+
+app.use(
+  express.json({
+    verify: (req, _res, buf) => {
+      req.rawBody = buf;
+    },
+  }),
+);
+
+app.use(express.urlencoded({ extended: false }));
+
+export function log(message: string, source = "express") {
+  const formattedTime = new Date().toLocaleTimeString("en-US", {
+    hour: "numeric",
+    minute: "2-digit",
+    second: "2-digit",
+    hour12: true,
+  });
+
+  console.log(`${formattedTime} [${source}] ${message}`);
+}
+
+interface RateLimitStore {
+  [key: string]: {
+    count: number;
+    resetTime: number;
+  };
+}
+
+const rateLimitStore: RateLimitStore = {};
+const RATE_LIMIT = 25;
+const WINDOW_MS = 60 * 1000;
+
+setInterval(() => {
+  const now = Date.now();
+  Object.keys(rateLimitStore).forEach((key) => {
+    if (rateLimitStore[key].resetTime < now) {
+      delete rateLimitStore[key];
+    }
+  });
+}, 5 * 60 * 1000);
+
+app.use("/api", (req: Request, res: Response, next: NextFunction) => {
+  const clientIp = req.ip || req.socket.remoteAddress || "unknown";
+  const now = Date.now();
+
+  if (!rateLimitStore[clientIp]) {
+    rateLimitStore[clientIp] = {
+      count: 1,
+      resetTime: now + WINDOW_MS,
+    };
+    return next();
+  }
+
+  const clientData = rateLimitStore[clientIp];
+
+  if (now > clientData.resetTime) {
+    clientData.count = 1;
+    clientData.resetTime = now + WINDOW_MS;
+    return next();
+  }
+
+  clientData.count++;
+
+  const remaining = Math.max(0, RATE_LIMIT - clientData.count);
+  const resetInSeconds = Math.ceil((clientData.resetTime - now) / 1000);
+
+  res.setHeader("X-RateLimit-Limit", RATE_LIMIT.toString());
+  res.setHeader("X-RateLimit-Remaining", remaining.toString());
+  res.setHeader("X-RateLimit-Reset", resetInSeconds.toString());
+
+  if (clientData.count > RATE_LIMIT) {
+    log(`Rate limit exceeded for IP: ${clientIp}`, "rate-limit");
+    return res.status(429).json({
+      message: "Too many requests, please try again later.",
+      retryAfter: resetInSeconds,
+    });
+  }
+
+  next();
+});
+
+app.use((req, res, next) => {
+  const start = Date.now();
+  const path = req.path;
+  let capturedJsonResponse: Record<string, any> | undefined = undefined;
+
+  const originalResJson = res.json;
+  res.json = function (bodyJson, ...args) {
+    capturedJsonResponse = bodyJson;
+    return originalResJson.apply(res, [bodyJson, ...args]);
+  };
+
+  res.on("finish", () => {
+    const duration = Date.now() - start;
+    if (path.startsWith("/api")) {
+      let logLine = `${req.method} ${path} ${res.statusCode} in ${duration}ms`;
+      if (capturedJsonResponse) {
+        logLine += ` :: ${JSON.stringify(capturedJsonResponse)}`;
+      }
+
+      log(logLine);
+      
+      const excludedPaths = [
+        '/api/plugins',
+        '/api/stats', 
+        '/api/categories',
+        '/docs'
+      ];
+      
+      const isPluginEndpoint = !excludedPaths.some(excluded => path.startsWith(excluded));
+      
+      if (isPluginEndpoint) {
+        const clientIp = req.ip || req.socket.remoteAddress || "unknown";
+        getStatsTracker().trackRequest(path, res.statusCode, clientIp);
+      }
+    }
+  });
+
+  next();
+});
+
+(async () => {
+  initStatsTracker();
+  log("Stats tracker initialized");
+  
+  const pluginsDir = join(process.cwd(), "src/server/plugins");
+  const pluginLoader = initPluginLoader(pluginsDir);
+ 
+  const isDev = process.env.NODE_ENV === "development";
+  await pluginLoader.loadPlugins(app, isDev);
+
+  app.get("/api/plugins", (req, res) => {
+    const metadata = getPluginLoader().getPluginMetadata();
+    res.json({
+      success: true,
+      count: metadata.length,
+      plugins: metadata,
+    });
+  });
+
+  app.get("/api/plugins/category/:category", (req, res) => {
+    const { category } = req.params;
+    const allPlugins = getPluginLoader().getPluginMetadata();
+    const filtered = allPlugins.filter(p => 
+      p.category.includes(category)
+    );
+    
+    res.json({
+      success: true,
+      category,
+      count: filtered.length,
+      plugins: filtered,
+    });
+  });
+  
+  app.get("/api/stats", (req, res) => {
+    const globalStats = getStatsTracker().getGlobalStats();
+    const topEndpoints = getStatsTracker().getTopEndpoints(5);
+    
+    res.json({
+      success: true,
+      stats: {
+        global: globalStats,
+        topEndpoints,
+      },
+    });
+  });
+  
+  app.get("/api/stats/visitors", (req, res) => {
+    const chartData = getStatsTracker().getVisitorChartData();
+  
+    res.json({
+      success: true,
+      data: chartData,
+    });
+  });
+  
+  app.get("/api/categories", (req, res) => {
+    const allPlugins = getPluginLoader().getPluginMetadata();
+    const categoriesMap = new Map<string, number>();
+
+    allPlugins.forEach(plugin => {
+      plugin.category.forEach(cat => {
+        categoriesMap.set(cat, (categoriesMap.get(cat) || 0) + 1);
+      });
+    });
+
+    const categories = Array.from(categoriesMap.entries()).map(([name, count]) => ({
+      name,
+      count,
+    }));
+
+    res.json({
+      success: true,
+      categories,
+    });
+  });  
+
+  app.use((err: any, _req: Request, res: Response, _next: NextFunction) => {
+    const status = err.status || err.statusCode || 500;
+    const message = err.message || "Internal Server Error";
+
+    res.status(status).json({ message });
+    throw err;
+  });
+
+  if (process.env.NODE_ENV === "production") {
+    serveStatic(app);
+  } else {
+    const { setupVite } = await import("./vite");
+    await setupVite(httpServer, app);
+  }
+  
+  app.use((req: Request, res: Response, next: NextFunction) => {
+    if (req.path.startsWith("/api")) {
+      return res.status(404).json({
+        message: "API endpoint not found",
+        path: req.path,
+      });
+    }
+    next();
+  });
+
+  const port = parseInt(process.env.PORT || "7860", 10);
+  httpServer.listen(
+    {
+      port,
+      host: "0.0.0.0",
+      reusePort: true,
+    },
+    () => {
+      log(`serving on port ${port}`);
+    },
+  );
+  
+  process.on('uncaughtException', (error: Error) => {
+    log(`Uncaught Exception: ${error.message}`, 'error');
+    console.error(error.stack);
+  });
+
+  process.on('unhandledRejection', (reason: any, promise: Promise<any>) => {
+    log(`Unhandled Rejection at: ${promise}, reason: ${reason}`, 'error');
+    console.error(reason);
+  });
+})();

src/server/lib/response-helper.js

@@ -0,0 +1,85 @@
+/**
+ * Send standardized success response
+ */
+export function sendSuccess(
+  res,
+  data,
+  message,
+  statusCode = 200
+) {
+  const response = {
+    status: statusCode,
+    author: "Ditzzy",
+    note: "Thank you for using this API!",
+    results: data,
+  };
+
+  if (message) {
+    response.message = message;
+  }
+
+  return res.status(statusCode).json(response);
+}
+
+/**
+ * Send standardized error response
+ */
+export function sendError(
+  res,
+  statusCode,
+  message,
+  error
+) {
+  const response = {
+    status: statusCode,
+    message,
+  };
+
+  if (error) {
+    response.error = error;
+  }
+
+  return res.status(statusCode).json(response);
+}
+
+/**
+ * Common error responses
+ */
+export const ErrorResponses = {
+  badRequest: (res, message = "Bad request") =>
+    sendError(res, 400, message),
+
+  invalidUrl: (res, message = "Invalid URL") =>
+    sendError(res, 400, message),
+
+  missingParameter: (res, param) =>
+    sendError(res, 400, `Missing required parameter: ${param}`),
+
+  invalidParameter: (res, param, reason) =>
+    sendError(
+      res,
+      400,
+      `Invalid parameter: ${param}${reason ? ` - ${reason}` : ""}`
+    ),
+
+  notFound: (res, message = "Resource not found") =>
+    sendError(res, 404, message),
+
+  serverError: (
+    res,
+    message = "An error occurred, please try again later."
+  ) =>
+    sendError(res, 500, message),
+
+  tooManyRequests: (
+    res,
+    message = "Too many requests, please slow down."
+  ) =>
+    sendError(res, 429, message),
+
+  serviceUnavailable: (
+    res,
+    message = "Service temporarily unavailable"
+  ) =>
+    sendError(res, 503, message),
+};

src/server/lib/stats-tracker.ts

@@ -0,0 +1,167 @@
+interface EndpointStats {
+  totalRequests: number;
+  successRequests: number;
+  failedRequests: number;
+  lastAccessed: number;
+}
+
+interface VisitorData {
+  timestamp: number;
+  count: number;
+}
+
+interface GlobalStats {
+  totalRequests: number;
+  totalSuccess: number;
+  totalFailed: number;
+  uniqueVisitors: Set<string>;
+  endpoints: Map<string, EndpointStats>;
+  startTime: number;
+  visitorsByHour: Map<number, Set<string>>;
+}
+
+class StatsTracker {
+  private stats: GlobalStats;
+
+  constructor() {
+    this.stats = {
+      totalRequests: 0,
+      totalSuccess: 0,
+      totalFailed: 0,
+      uniqueVisitors: new Set(),
+      endpoints: new Map(),
+      startTime: Date.now(),
+      visitorsByHour: new Map(),
+    };
+  }
+
+  trackRequest(endpoint: string, statusCode: number, clientIp: string) {
+    this.stats.totalRequests++;
+    this.stats.uniqueVisitors.add(clientIp);
+
+    const currentHour = Math.floor(Date.now() / (1000 * 60 * 60));
+    if (!this.stats.visitorsByHour.has(currentHour)) {
+      this.stats.visitorsByHour.set(currentHour, new Set());
+    }
+    this.stats.visitorsByHour.get(currentHour)!.add(clientIp);
+
+    const cutoffHour = currentHour - 24;
+    Array.from(this.stats.visitorsByHour.keys()).forEach(hour => {
+      if (hour < cutoffHour) {
+        this.stats.visitorsByHour.delete(hour);
+      }
+    });
+
+    if (statusCode >= 200 && statusCode < 400) {
+      this.stats.totalSuccess++;
+    } else {
+      this.stats.totalFailed++;
+    }
+
+    if (!this.stats.endpoints.has(endpoint)) {
+      this.stats.endpoints.set(endpoint, {
+        totalRequests: 0,
+        successRequests: 0,
+        failedRequests: 0,
+        lastAccessed: Date.now(),
+      });
+    }
+
+    const endpointStats = this.stats.endpoints.get(endpoint)!;
+    endpointStats.totalRequests++;
+    endpointStats.lastAccessed = Date.now();
+
+    if (statusCode >= 200 && statusCode < 400) {
+      endpointStats.successRequests++;
+    } else {
+      endpointStats.failedRequests++;
+    }
+  }
+
+  getGlobalStats() {
+    const uptime = Date.now() - this.stats.startTime;
+    const uptimeHours = Math.floor(uptime / (1000 * 60 * 60));
+    const uptimeDays = Math.floor(uptimeHours / 24);
+
+    return {
+      totalRequests: this.stats.totalRequests,
+      totalSuccess: this.stats.totalSuccess,
+      totalFailed: this.stats.totalFailed,
+      uniqueVisitors: this.stats.uniqueVisitors.size,
+      successRate: this.stats.totalRequests > 0
+        ? ((this.stats.totalSuccess / this.stats.totalRequests) * 100).toFixed(2)
+        : "0.00",
+      uptime: {
+        ms: uptime,
+        hours: uptimeHours,
+        days: uptimeDays,
+        formatted: uptimeDays > 0 
+          ? `${uptimeDays}d ${uptimeHours % 24}h`
+          : `${uptimeHours}h`,
+      },
+    };
+  }
+
+  getVisitorChartData(): VisitorData[] {
+    const currentHour = Math.floor(Date.now() / (1000 * 60 * 60));
+    const data: VisitorData[] = [];
+
+    for (let i = 23; i >= 0; i--) {
+      const hour = currentHour - i;
+      const visitors = this.stats.visitorsByHour.get(hour);
+      const timestamp = hour * 1000 * 60 * 60;
+      
+      data.push({
+        timestamp,
+        count: visitors ? visitors.size : 0,
+      });
+    }
+
+    return data;
+  }
+
+  getEndpointStats(endpoint: string) {
+    return this.stats.endpoints.get(endpoint) || null;
+  }
+
+  getAllEndpointStats() {
+    const result: Record<string, EndpointStats> = {};
+    this.stats.endpoints.forEach((stats, endpoint) => {
+      result[endpoint] = stats;
+    });
+    return result;
+  }
+  
+  getTopEndpoints(limit: number = 10) {
+    return Array.from(this.stats.endpoints.entries())
+      .map(([endpoint, stats]) => ({ endpoint, ...stats }))
+      .sort((a, b) => b.totalRequests - a.totalRequests)
+      .slice(0, limit);
+  }
+
+  reset() {
+    this.stats = {
+      totalRequests: 0,
+      totalSuccess: 0,
+      totalFailed: 0,
+      uniqueVisitors: new Set(),
+      endpoints: new Map(),
+      startTime: Date.now(),
+      visitorsByHour: new Map(),
+    };
+  }
+}
+
+let statsTracker: StatsTracker;
+
+export function initStatsTracker() {
+  statsTracker = new StatsTracker();
+  return statsTracker;
+}
+
+export function getStatsTracker() {
+  if (!statsTracker) {
+    throw new Error("StatsTracker not initialized. Call initStatsTracker() first.");
+  }
+  return statsTracker;
+}

src/server/plugin-loader.ts

@@ -0,0 +1,303 @@
+import { Express, Router } from "express";
+import { readdirSync, statSync, existsSync } from "fs";
+import { join, extname, relative } from "path";
+import { watch } from "chokidar";
+import { pathToFileURL } from "url";
+import { ApiPluginHandler, PluginMetadata, PluginRegistry } from "./types/plugin";
+
+export class PluginLoader {
+  private pluginRegistry: PluginRegistry = {};
+  private pluginsDir: string;
+  private router: Router | null = null;
+  private app: Express | null = null;
+  private watcher: any = null;
+
+  constructor(pluginsDir: string) {
+    this.pluginsDir = pluginsDir;
+  }
+
+  async loadPlugins(app: Express, enableHotReload = false) {
+    this.app = app;
+    this.router = Router();
+
+    await this.scanDirectory(this.pluginsDir, this.router);
+    app.use("/api", this.router);
+
+    console.log(`✅ Loaded ${Object.keys(this.pluginRegistry).length} plugins`);
+
+    if (enableHotReload) {
+      this.enableHotReload();
+    }
+
+    return this.pluginRegistry;
+  }
+
+  private enableHotReload() {
+    if (this.watcher) {
+      console.log("Hot reload already enabled");
+      return;
+    }
+
+    console.log("🔥 Hot reload enabled for plugins");
+
+    let reloadTimeout: NodeJS.Timeout | null = null;
+
+    this.watcher = watch(this.pluginsDir, {
+      ignored: /(^|[\/\\])\../, // ignore dotfiles
+      persistent: true,
+      ignoreInitial: true,
+      awaitWriteFinish: {
+        stabilityThreshold: 500,
+        pollInterval: 100,
+      },
+    });
+
+    const handleChange = (eventType: string, path: string) => {
+      console.log(`📝 Plugin ${eventType}: ${relative(this.pluginsDir, path)}`);
+
+      if (reloadTimeout) {
+        clearTimeout(reloadTimeout);
+      }
+
+      reloadTimeout = setTimeout(() => {
+        this.reloadPlugins();
+      }, 200);
+    };
+
+    this.watcher
+      .on("add", (path: string) => handleChange("added", path))
+      .on("change", (path: string) => handleChange("changed", path))
+      .on("unlink", (path: string) => {
+        console.log(`🗑️ Plugin removed: ${relative(this.pluginsDir, path)}`);
+        this.reloadPlugins();
+      });
+  }
+
+  private async reloadPlugins() {
+    if (!this.app || !this.router) return;
+
+    try {
+      console.log("🔄 Reloading plugins...");
+      const oldRegistry = { ...this.pluginRegistry };
+      const oldRouter = this.router;
+      this.pluginRegistry = {};
+      const newRouter = Router();
+      this.clearModuleCache(this.pluginsDir);
+
+      try {
+        await this.scanDirectory(this.pluginsDir, newRouter);
+
+        // If successful, replace old router with new one
+        this.removeOldRouter();
+        this.router = newRouter;
+        this.app.use("/api", this.router);
+
+        console.log(`✅ Successfully reloaded ${Object.keys(this.pluginRegistry).length} plugins`);
+      } catch (scanError) {
+        console.error("❌ Error scanning plugins, rolling back...");
+        this.pluginRegistry = oldRegistry;
+        this.router = oldRouter;
+        throw scanError;
+      }
+    } catch (error) {
+      console.error("❌ Error reloading plugins:", error);
+      console.log("⚠️ Keeping previous plugin configuration");
+    }
+  }
+
+  private removeOldRouter() {
+    if (!this.app) return;
+
+    try {
+      // Express 5 uses app._router differently
+      const stack = (this.app as any)._router?.stack || [];
+
+      for (let i = stack.length - 1; i >= 0; i--) {
+        const layer = stack[i];
+        if (layer.name === 'router' && layer.regexp.test('/api')) {
+          stack.splice(i, 1);
+        }
+      }
+    } catch (error) {
+      // if _router structure is different, just log warning
+      console.warn("⚠️ Could not remove old router, continuing anyway...");
+    }
+  }
+
+  private clearModuleCache(dirPath: string) {
+    if (!existsSync(dirPath)) return;
+
+    const items = readdirSync(dirPath);
+
+    for (const item of items) {
+      const fullPath = join(dirPath, item);
+      const stat = statSync(fullPath);
+
+      if (stat.isDirectory()) {
+        this.clearModuleCache(fullPath);
+      } else if (stat.isFile() && (extname(item) === ".ts" || extname(item) === ".js")) {
+        // In ES modules, we can't clear cache like CommonJS.
+        // Hot Reload also doesn't seem to have any effect on API serving.
+        // For now, Just log and mark as reload, We have to restart the server in "development" mode.
+        // TODO: Find another way. If hot reloading doesn't work, try restarting automatically.
+        const relativePath = relative(process.cwd(), fullPath);
+        console.log(`♻️ Marked for reload: ${relativePath}`);
+      }
+    }
+  }
+
+  private async scanDirectory(dir: string, router: Router, categoryPath: string[] = []) {
+    try {
+      const items = readdirSync(dir);
+
+      for (const item of items) {
+        const fullPath = join(dir, item);
+        const stat = statSync(fullPath);
+
+        if (stat.isDirectory()) {
+          await this.scanDirectory(fullPath, router, [...categoryPath, item]);
+        } else if (stat.isFile() && (extname(item) === ".ts" || extname(item) === ".js")) {
+          await this.loadPlugin(fullPath, router, categoryPath);
+        }
+      }
+    } catch (error) {
+      console.error(`❌ Error scanning directory ${dir}:`, error);
+    }
+  }
+
+  private isValidPluginMetadata(handler: ApiPluginHandler, fileName: string): { valid: boolean; reason?: string } {
+    if (!handler.category || !Array.isArray(handler.category) || handler.category.length === 0) {
+      return { valid: false, reason: 'category is missing or empty' };
+    }
+
+    if (!handler.name || typeof handler.name !== 'string' || handler.name.trim() === '') {
+      return { valid: false, reason: 'name is missing or empty' };
+    }
+
+    if (!handler.description || typeof handler.description !== 'string' || handler.description.trim() === '') {
+      return { valid: false, reason: 'description is missing or empty' };
+    }
+
+    return { valid: true };
+  }
+
+  private async loadPlugin(filePath: string, router: Router, categoryPath: string[]) {
+    const fileName = relative(this.pluginsDir, filePath);
+    
+    try {
+      const fileUrl = pathToFileURL(filePath).href;
+      const cacheBuster = `?update=${Date.now()}`;
+      const module = await import(fileUrl + cacheBuster);
+
+      const handler: ApiPluginHandler = module.default;
+
+      if (!handler || !handler.exec) {
+        console.warn(`⚠️ Skipping plugin '${fileName}': missing handler or exec function`);
+        return;
+      }
+
+      if (!handler.method) {
+        console.warn(`⚠️ Skipping plugin '${fileName}': missing 'method' field`);
+        return;
+      }
+
+      if (!handler.alias || handler.alias.length === 0) {
+        console.warn(`⚠️ Skipping plugin '${fileName}': missing 'alias' array`);
+        return;
+      }
+
+      if (typeof handler.exec !== 'function') {
+        console.warn(`⚠️ Skipping plugin '${fileName}': 'exec' must be a function`);
+        return;
+      }
+
+      const metadataValidation = this.isValidPluginMetadata(handler, fileName);
+      const shouldShowInDocs = metadataValidation.valid;
+
+      if (!shouldShowInDocs) {
+        console.warn(`⚠️ Plugin '${fileName}' will be hidden from docs: ${metadataValidation.reason}`);
+      }
+
+      const basePath = handler.category && handler.category.length > 0 
+        ? `/${handler.category.join("/")}` 
+        : "";
+
+      const primaryAlias = handler.alias[0];
+      const primaryEndpoint = basePath ? `${basePath}/${primaryAlias}` : `/${primaryAlias}`;
+      const method = handler.method.toLowerCase() as "get" | "post" | "put" | "delete" | "patch";
+
+      const wrappedExec = async (req: any, res: any, next: any) => {
+        try {
+          await handler.exec(req, res, next);
+        } catch (error) {
+          console.error(`❌ Error in plugin ${handler.name || 'unknown'}:`, error);
+          if (!res.headersSent) {
+            res.status(500).json({
+              success: false,
+              message: "Plugin execution error",
+              plugin: handler.name || 'unknown',
+              error: error instanceof Error ? error.message : "Unknown error",
+            });
+          }
+        }
+      };
+
+      for (const alias of handler.alias) {
+        const endpoint = basePath ? `${basePath}/${alias}` : `/${alias}`;
+        router[method](endpoint, wrappedExec);
+        console.log(`✓ [${handler.method}] ${endpoint} -> ${handler.name || 'unnamed'}`);
+      }
+
+      if (shouldShowInDocs) {
+        const metadata: PluginMetadata = {
+          name: handler.name,
+          description: handler.description,
+          version: handler.version || "1.0.0",
+          category: handler.category,
+          method: handler.method,
+          endpoint: primaryEndpoint,
+          aliases: handler.alias,
+          tags: handler.tags || [],
+          parameters: handler.parameters || {
+            query: [],
+            body: [],
+            headers: [],
+            path: []
+          },
+          responses: handler.responses || {}
+        };
+
+        this.pluginRegistry[primaryEndpoint] = { handler, metadata };
+      }
+    } catch (error) {
+      console.error(`❌ Failed to load plugin '${fileName}':`, error instanceof Error ? error.message : error);
+    }
+  }
+
+  getPluginMetadata(): PluginMetadata[] {
+    return Object.values(this.pluginRegistry).map(p => p.metadata);
+  }
+
+  getPluginRegistry(): PluginRegistry {
+    return this.pluginRegistry;
+  }
+
+  stopHotReload() {
+    if (this.watcher) {
+      this.watcher.close();
+      this.watcher = null;
+      console.log("🛑 Hot reload stopped");
+    }
+  }
+}
+
+let pluginLoader: PluginLoader;
+
+export function initPluginLoader(pluginsDir: string) {
+  pluginLoader = new PluginLoader(pluginsDir);
+  return pluginLoader;
+}
+
+export function getPluginLoader() {
+  return pluginLoader;
+}

src/server/plugins/data.js

@@ -0,0 +1,15 @@
+const handler = {
+  name: "Greet user",
+  description: "Greet the user",
+  method: "GET",
+  category: [],
+  alias: ["data"],
+  exec: async (req, res) => {
+    res.json({
+      status: 200,
+      message: "Welcome to DitzzyAPI, Lets get started by visit our documentation on: https://api.ditzzy.my.id/docs"
+    })
+  }  
+}
+
+export default handler

src/server/plugins/downloader/tiktok.js

@@ -0,0 +1,123 @@
+import axios from "axios";
+import { sendSuccess, ErrorResponses } from "../../lib/response-helper.js";
+
+/** @type {import("../../types/plugin").ApiPluginHandler} */
+const handler = {
+  name: "TikTok Downloader",
+  description: "Download videos or slide photos from TikTok URLs. Supports both standard and HD quality downloads.",
+  version: "1.0.0",
+  method: "GET",
+  category: ["downloader"],
+  alias: ["tiktok", "tt"],
+  tags: ["social-media", "video", "downloader"],
+
+  parameters: {
+    query: [
+      {
+        name: "url",
+        type: "string",
+        required: true,
+        description: "TikTok video URL to download",
+        example: "https://www.tiktok.com/@username/video/1234567890",
+        pattern: "^https?:\\/\\/(www\\.|vm\\.)?tiktok\\.com\\/.+$"
+      }
+    ],
+    body: [],
+    headers: []
+  },
+
+  responses: {
+    200: {
+      status: 200,
+      description: "Successfully retrieved TikTok video data",
+      example: {
+        status: 200,
+        author: "Ditzzy",
+        note: "Thank you for using this API!",
+        results: {
+          id: "1234567890",
+          title: "Video Title",
+          author: {
+            nickname: "Username",
+            unique_id: "username"
+          },
+          play: "https://video-url.com/video.mp4",
+          wmplay: "https://video-url.com/video-watermark.mp4",
+          hdplay: "https://video-url.com/video-hd.mp4",
+          music: "https://music-url.com/audio.mp3",
+          duration: 15,
+          create_time: 1234567890
+        }
+      }
+    },
+    400: {
+      status: 400,
+      description: "Invalid TikTok URL provided",
+      example: {
+        status: 400,
+        message: "Invalid URL - must be a valid TikTok URL"
+      }
+    },
+    404: {
+      status: 404,
+      description: "Missing required parameter",
+      example: {
+        status: 404,
+        message: "Missing required parameter: url"
+      }
+    },
+    500: {
+      status: 500,
+      description: "Server error or TikTok API unavailable",
+      example: {
+        status: 500,
+        message: "An error occurred, please try again later."
+      }
+    }
+  },
+
+  exec: async (req, res) => {
+    const { url } = req.query;
+    
+    if (!url) {
+      return ErrorResponses.missingParameter(res, "url");
+    }
+
+    if (!url.match(/tiktok/gi)) {
+      return ErrorResponses.invalidUrl(res, "Invalid URL - must be a valid TikTok URL");
+    }
+
+    try {
+      const videoData = await fetchTikTokVideo(url);
+      return sendSuccess(res, videoData);
+    } catch (error) {
+      console.error("TikTok download error:", error);
+      return ErrorResponses.serverError(res);
+    }
+  }
+};
+
+export default handler;
+
+async function fetchTikTokVideo(url) {
+  const encodedParams = new URLSearchParams();
+  encodedParams.set("url", url);
+  encodedParams.set("hd", "1");
+
+  const response = await axios({
+    method: "POST",
+    url: "https://tikwm.com/api/",
+    headers: {
+      "Content-Type": "application/x-www-form-urlencoded; charset=UTF-8",
+      "Cookie": "current_language=en",
+      "User-Agent": "Mozilla/5.0 (Linux; Android 10; K) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/116.0.0.0 Mobile Safari/537.36"
+    },
+    data: encodedParams
+  });
+
+  if (!response.data || !response.data.data) {
+    throw new Error("Invalid response from TikTok API");
+  }
+
+  return response.data.data;
+}

src/server/static.ts

@@ -0,0 +1,19 @@
+import express, { type Express } from "express";
+import fs from "fs";
+import path from "path";
+
+export function serveStatic(app: Express) {
+  const distPath = path.resolve(__dirname, "public");
+  if (!fs.existsSync(distPath)) {
+    throw new Error(
+      `Could not find the build directory: ${distPath}, make sure to build the client first`,
+    );
+  }
+
+  app.use(express.static(distPath));
+
+  // fall through to index.html if the file doesn't exist
+  app.use((req, res) => {
+    res.sendFile(path.resolve(distPath, "index.html"));
+  });
+}

src/server/types/plugin.ts

@@ -0,0 +1,72 @@
+import { Request, Response, NextFunction } from "express";
+
+export interface PluginParameter {
+  name: string;
+  type: "string" | "number" | "boolean" | "array" | "object";
+  required: boolean;
+  description: string;
+  example?: any;
+  default?: any;
+  enum?: any[];
+  pattern?: string;
+}
+
+export interface PluginResponse {
+  status: number;
+  description: string;
+  example: any;
+}
+
+export interface PluginParameters {
+  query?: PluginParameter[];
+  body?: PluginParameter[];
+  headers?: PluginParameter[];
+  path?: PluginParameter[];
+}
+
+export interface ApiPluginHandler {
+  name: string;
+  description: string;
+  version: string;
+  category: string[];
+  method: "GET" | "POST" | "PUT" | "DELETE" | "PATCH";
+  alias: string[];
+  tags?: string[]; 
+  parameters?: PluginParameters;
+  responses?: {
+    [statusCode: number]: PluginResponse;
+  };
+
+  exec: (req: Request, res: Response, next: NextFunction) => Promise<any> | any;
+}
+
+export interface PluginMetadata {
+  name: string;
+  description: string;
+  version: string;
+  category: string[];
+  method: string;
+  endpoint: string;
+  aliases: string[];
+  tags?: string[];
+  parameters?: PluginParameters;
+  responses?: {
+    [statusCode: number]: PluginResponse;
+  };
+}
+
+export interface PluginRegistry {
+  [endpoint: string]: {
+    handler: ApiPluginHandler;
+    metadata: PluginMetadata;
+  };
+}
+
+export interface ApiResponse<T = any> {
+  status: number;
+  message?: string;
+  author?: string;
+  note?: string;
+  results?: T;
+  error?: string;
+}

src/server/vite.ts

@@ -0,0 +1,57 @@
+import { type Express } from "express";
+import { createServer as createViteServer, createLogger } from "vite";
+import { type Server } from "http";
+import viteConfig from "../../vite.config";
+import fs from "fs";
+import path from "path";
+import { nanoid } from "nanoid";
+
+const viteLogger = createLogger();
+
+export async function setupVite(server: Server, app: Express) {
+  const serverOptions = {
+    middlewareMode: true,
+    hmr: { server, path: "/vite-hmr" },
+    allowedHosts: true as const,
+  };
+
+  const vite = await createViteServer({
+    ...viteConfig,
+    configFile: false,
+    customLogger: {
+      ...viteLogger,
+      error: (msg, options) => {
+        viteLogger.error(msg, options);
+        process.exit(1);
+      },
+    },
+    server: serverOptions,
+    appType: "custom",
+  });
+
+  app.use(vite.middlewares);
+
+  app.use(async (req, res, next) => {
+    const url = req.originalUrl;
+
+    try {
+      const clientTemplate = path.resolve(
+        import.meta.dirname,
+        "..",
+        "index.html",
+      );
+
+      // always reload the index.html file from disk incase it changes
+      let template = await fs.promises.readFile(clientTemplate, "utf-8");
+      template = template.replace(
+        `client="/client/main.tsx"`,
+        `client="/client/main.tsx?v=${nanoid()}"`,
+      );
+      const page = await vite.transformIndexHtml(url, template);
+      res.status(200).set({ "Content-Type": "text/html" }).end(page);
+    } catch (e) {
+      vite.ssrFixStacktrace(e as Error);
+      next(e);
+    }
+  });
+}

tailwind.config.ts

@@ -0,0 +1,107 @@
+import type { Config } from "tailwindcss";
+
+export default {
+  darkMode: ["class"],
+  content: ["./src/index.html", "./src/**/*.{js,jsx,ts,tsx}"],
+  theme: {
+    extend: {
+      borderRadius: {
+        lg: ".5625rem", /* 9px */
+        md: ".375rem", /* 6px */
+        sm: ".1875rem", /* 3px */
+      },
+      colors: {
+        // Flat
+        background: "hsl(var(--background) / <alpha-value>)",
+        foreground: "hsl(var(--foreground) / <alpha-value>)",
+        border: "hsl(var(--border) / <alpha-value>)",
+        input: "hsl(var(--input) / <alpha-value>)",
+        card: {
+          DEFAULT: "hsl(var(--card) / <alpha-value>)",
+          foreground: "hsl(var(--card-foreground) / <alpha-value>)",
+          border: "hsl(var(--card-border) / <alpha-value>)",
+        },
+        popover: {
+          DEFAULT: "hsl(var(--popover) / <alpha-value>)",
+          foreground: "hsl(var(--popover-foreground) / <alpha-value>)",
+          border: "hsl(var(--popover-border) / <alpha-value>)",
+        },
+        primary: {
+          DEFAULT: "hsl(var(--primary) / <alpha-value>)",
+          foreground: "hsl(var(--primary-foreground) / <alpha-value>)",
+          border: "var(--primary-border)",
+        },
+        secondary: {
+          DEFAULT: "hsl(var(--secondary) / <alpha-value>)",
+          foreground: "hsl(var(--secondary-foreground) / <alpha-value>)",
+          border: "var(--secondary-border)",
+        },
+        muted: {
+          DEFAULT: "hsl(var(--muted) / <alpha-value>)",
+          foreground: "hsl(var(--muted-foreground) / <alpha-value>)",
+          border: "var(--muted-border)",
+        },
+        accent: {
+          DEFAULT: "hsl(var(--accent) / <alpha-value>)",
+          foreground: "hsl(var(--accent-foreground) / <alpha-value>)",
+          border: "var(--accent-border)",
+        },
+        destructive: {
+          DEFAULT: "hsl(var(--destructive) / <alpha-value>)",
+          foreground: "hsl(var(--destructive-foreground) / <alpha-value>)",
+          border: "var(--destructive-border)",
+        },
+        ring: "hsl(var(--ring) / <alpha-value>)",
+        chart: {
+          "1": "hsl(var(--chart-1) / <alpha-value>)",
+          "2": "hsl(var(--chart-2) / <alpha-value>)",
+          "3": "hsl(var(--chart-3) / <alpha-value>)",
+          "4": "hsl(var(--chart-4) / <alpha-value>)",
+          "5": "hsl(var(--chart-5) / <alpha-value>)",
+        },
+        sidebar: {
+          ring: "hsl(var(--sidebar-ring) / <alpha-value>)",
+          DEFAULT: "hsl(var(--sidebar) / <alpha-value>)",
+          foreground: "hsl(var(--sidebar-foreground) / <alpha-value>)",
+          border: "hsl(var(--sidebar-border) / <alpha-value>)",
+        },
+        "sidebar-primary": {
+          DEFAULT: "hsl(var(--sidebar-primary) / <alpha-value>)",
+          foreground: "hsl(var(--sidebar-primary-foreground) / <alpha-value>)",
+          border: "var(--sidebar-primary-border)",
+        },
+        "sidebar-accent": {
+          DEFAULT: "hsl(var(--sidebar-accent) / <alpha-value>)",
+          foreground: "hsl(var(--sidebar-accent-foreground) / <alpha-value>)",
+          border: "var(--sidebar-accent-border)"
+        },
+        status: {
+          online: "rgb(34 197 94)",
+          away: "rgb(245 158 11)",
+          busy: "rgb(239 68 68)",
+          offline: "rgb(156 163 175)",
+        },
+      },
+      fontFamily: {
+        sans: ["Inter", "sans-serif"],
+        display: ["Space Grotesk", "sans-serif"],
+        mono: ["JetBrains Mono", "monospace"],
+      },
+      keyframes: {
+        "accordion-down": {
+          from: { height: "0" },
+          to: { height: "var(--radix-accordion-content-height)" },
+        },
+        "accordion-up": {
+          from: { height: "var(--radix-accordion-content-height)" },
+          to: { height: "0" },
+        },
+      },
+      animation: {
+        "accordion-down": "accordion-down 0.2s ease-out",
+        "accordion-up": "accordion-up 0.2s ease-out",
+      },
+    },
+  },
+  plugins: [require("tailwindcss-animate"), require("@tailwindcss/typography")],
+} satisfies Config;

tsconfig.json

@@ -0,0 +1,23 @@
+{
+  "include": ["src/**/*"],
+  "exclude": ["node_modules", "build", "dist", "**/*.test.ts"],
+  "compilerOptions": {
+    "incremental": true,
+    "tsBuildInfoFile": "./node_modules/typescript/tsbuildinfo",
+    "noEmit": true,
+    "module": "ESNext",
+    "strict": true,
+    "lib": ["esnext", "dom", "dom.iterable"],
+    "jsx": "preserve",
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "allowImportingTsExtensions": true,
+    "allowSyntheticDefaultImports": true,
+    "moduleResolution": "bundler",
+    "baseUrl": ".",
+    "types": ["node", "vite/client"],
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  }
+}

vite.config.ts

@@ -0,0 +1,23 @@
+import { defineConfig } from "vite"
+import react from "@vitejs/plugin-react"
+import path from "node:path"
+
+export default defineConfig({
+  plugins: [react()],
+  resolve: {
+    alias: {
+      "@": path.resolve(import.meta.dirname, "src"),
+    },
+  },
+  root: path.resolve(import.meta.dirname, "src"),
+  build: {
+    outDir: path.resolve(import.meta.dirname, "dist/public"),
+    emptyOutDir: true,
+  },
+  server: {
+    fs: {
+      strict: true,
+      deny: ["**/.*"],
+    },
+  },
+})