fastapi-fullstack 0.1.7__py3-none-any.whl

fastapi_gen/template/{{cookiecutter.project_slug}}/frontend/package.json

@@ -0,0 +1,69 @@
+{
+  "name": "{{ cookiecutter.project_slug }}-frontend",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev -p {{ cookiecutter.frontend_port }}",
+    "build": "next build",
+    "start": "next start -p {{ cookiecutter.frontend_port }}",
+    "lint": "next lint",
+    "lint:fix": "next lint --fix",
+    "format": "prettier --write .",
+    "format:check": "prettier --check .",
+    "type-check": "tsc --noEmit",
+    "test:e2e": "playwright test",
+    "test:e2e:ui": "playwright test --ui",
+    "test:e2e:headed": "playwright test --headed",
+    "test:e2e:debug": "playwright test --debug",
+    "test:e2e:report": "playwright show-report",
+    "test": "vitest",
+    "test:run": "vitest run",
+    "test:coverage": "vitest run --coverage",
+    "test:ui": "vitest --ui"
+  },
+  "dependencies": {
+    "next": "^15.1.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "@tanstack/react-query": "^5.62.0",
+    "zustand": "^5.0.2",
+    "nanoid": "^5.0.9",
+    "lucide-react": "^0.468.0",
+    "clsx": "^2.1.1",
+    "tailwind-merge": "^2.6.0",
+{%- if cookiecutter.enable_logfire %}
+    "@vercel/otel": "^1.10.0",
+    "@opentelemetry/api": "^1.9.0",
+{%- endif %}
+{%- if cookiecutter.enable_i18n %}
+    "next-intl": "^3.25.3",
+{%- endif %}
+    "class-variance-authority": "^0.7.1",
+    "react-markdown": "^9.0.1",
+    "remark-gfm": "^4.0.0",
+    "rehype-highlight": "^7.0.0"
+  },
+  "devDependencies": {
+    "typescript": "^5.7.2",
+    "@types/node": "^22.10.2",
+    "@types/react": "^19.0.1",
+    "@types/react-dom": "^19.0.2",
+    "tailwindcss": "^4.0.0-beta.8",
+    "@tailwindcss/postcss": "^4.0.0-beta.8",
+    "postcss": "^8.4.49",
+    "eslint": "^9.17.0",
+    "eslint-config-next": "^15.1.0",
+    "eslint-config-prettier": "^9.1.0",
+    "prettier": "^3.4.2",
+    "prettier-plugin-tailwindcss": "^0.6.9",
+    "@playwright/test": "^1.49.1",
+    "vitest": "^2.1.8",
+    "@vitejs/plugin-react": "^4.3.4",
+    "@testing-library/react": "^16.1.0",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/user-event": "^14.5.2",
+    "jsdom": "^25.0.1",
+    "@vitest/coverage-v8": "^2.1.8",
+    "@vitest/ui": "^2.1.8"
+  }
+}

fastapi_gen/template/{{cookiecutter.project_slug}}/frontend/playwright.config.ts

@@ -0,0 +1,101 @@
+{%- if cookiecutter.use_frontend %}
+import { defineConfig, devices } from "@playwright/test";
+
+/**
+ * Playwright E2E test configuration.
+ *
+ * See https://playwright.dev/docs/test-configuration.
+ */
+export default defineConfig({
+  testDir: "./e2e",
+  /* Run tests in files in parallel */
+  fullyParallel: true,
+  /* Fail the build on CI if you accidentally left test.only in the source code. */
+  forbidOnly: !!process.env.CI,
+  /* Retry on CI only */
+  retries: process.env.CI ? 2 : 0,
+  /* Opt out of parallel tests on CI. */
+  workers: process.env.CI ? 1 : undefined,
+  /* Reporter to use. See https://playwright.dev/docs/test-reporters */
+  reporter: [
+    ["list"],
+    ["html", { outputFolder: "playwright-report" }],
+  ],
+  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+  use: {
+    /* Base URL to use in actions like `await page.goto('/')`. */
+    baseURL: process.env.PLAYWRIGHT_BASE_URL || "http://localhost:{{ cookiecutter.frontend_port }}",
+
+    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+    trace: "on-first-retry",
+
+    /* Capture screenshot on failure */
+    screenshot: "only-on-failure",
+
+    /* Video recording on failure */
+    video: "on-first-retry",
+  },
+
+  /* Configure projects for major browsers */
+  projects: [
+    /* Authentication setup - runs first */
+    {
+      name: "setup",
+      testMatch: /.*\.setup\.ts/,
+    },
+
+    {
+      name: "chromium",
+      use: {
+        ...devices["Desktop Chrome"],
+      },
+      dependencies: ["setup"],
+    },
+
+    {
+      name: "firefox",
+      use: {
+        ...devices["Desktop Firefox"],
+      },
+      dependencies: ["setup"],
+    },
+
+    {
+      name: "webkit",
+      use: {
+        ...devices["Desktop Safari"],
+      },
+      dependencies: ["setup"],
+    },
+
+    /* Test against mobile viewports. */
+    {
+      name: "Mobile Chrome",
+      use: {
+        ...devices["Pixel 5"],
+      },
+      dependencies: ["setup"],
+    },
+    {
+      name: "Mobile Safari",
+      use: {
+        ...devices["iPhone 12"],
+      },
+      dependencies: ["setup"],
+    },
+  ],
+
+  /* Run your local dev server before starting the tests */
+  webServer: process.env.CI
+    ? undefined
+    : {
+        command: "bun run dev",
+        url: "http://localhost:{{ cookiecutter.frontend_port }}",
+        reuseExistingServer: !process.env.CI,
+        timeout: 120 * 1000,
+      },
+});
+{%- else %}
+/* Playwright config - frontend not configured */
+export {};
+{%- endif %}

fastapi_gen/template/{{cookiecutter.project_slug}}/frontend/postcss.config.mjs

@@ -0,0 +1,7 @@
+const config = {
+  plugins: {
+    "@tailwindcss/postcss": {},
+  },
+};
+
+export default config;

fastapi_gen/template/{{cookiecutter.project_slug}}/frontend/src/app/[locale]/(auth)/layout.tsx

@@ -0,0 +1,11 @@
+export default function AuthLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-background px-4">
+      {children}
+    </div>
+  );
+}

fastapi_gen/template/{{cookiecutter.project_slug}}/frontend/src/app/[locale]/(auth)/login/page.tsx

@@ -0,0 +1,5 @@
+import { LoginForm } from "@/components/auth";
+
+export default function LoginPage() {
+  return <LoginForm />;
+}

fastapi_gen/template/{{cookiecutter.project_slug}}/frontend/src/app/[locale]/(auth)/register/page.tsx

@@ -0,0 +1,5 @@
+import { RegisterForm } from "@/components/auth";
+
+export default function RegisterPage() {
+  return <RegisterForm />;
+}

fastapi_gen/template/{{cookiecutter.project_slug}}/frontend/src/app/[locale]/(dashboard)/chat/page.tsx

@@ -0,0 +1,48 @@
+{%- if cookiecutter.enable_conversation_persistence and cookiecutter.use_database %}
+"use client";
+
+import { ChatContainer, ConversationSidebar, LocalConversationSidebar, ChatSidebarToggle } from "@/components/chat";
+import { useAuthStore } from "@/stores";
+
+export default function ChatPage() {
+  const { isAuthenticated } = useAuthStore();
+
+  const Sidebar = isAuthenticated ? ConversationSidebar : LocalConversationSidebar;
+
+  return (
+    <div className="flex h-full -m-3 sm:-m-6">
+      <Sidebar />
+      <div className="flex-1 min-w-0 flex flex-col">
+        <div className="flex items-center gap-2 p-2 border-b md:hidden">
+          <ChatSidebarToggle />
+          <span className="text-sm font-medium">Chat</span>
+        </div>
+        <div className="flex-1 min-h-0">
+          <ChatContainer />
+        </div>
+      </div>
+    </div>
+  );
+}
+{%- else %}
+"use client";
+
+import { ChatContainer, LocalConversationSidebar, ChatSidebarToggle } from "@/components/chat";
+
+export default function ChatPage() {
+  return (
+    <div className="flex h-full -m-3 sm:-m-6">
+      <LocalConversationSidebar />
+      <div className="flex-1 min-w-0 flex flex-col">
+        <div className="flex items-center gap-2 p-2 border-b md:hidden">
+          <ChatSidebarToggle />
+          <span className="text-sm font-medium">Chat</span>
+        </div>
+        <div className="flex-1 min-h-0">
+          <ChatContainer />
+        </div>
+      </div>
+    </div>
+  );
+}
+{%- endif %}

fastapi_gen/template/{{cookiecutter.project_slug}}/frontend/src/app/[locale]/(dashboard)/dashboard/page.tsx

@@ -0,0 +1,99 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui";
+import { apiClient } from "@/lib/api-client";
+import { useAuth } from "@/hooks";
+import type { HealthResponse } from "@/types";
+import { CheckCircle, XCircle, Loader2 } from "lucide-react";
+
+export default function DashboardPage() {
+  const { user } = useAuth();
+  const [health, setHealth] = useState<HealthResponse | null>(null);
+  const [healthLoading, setHealthLoading] = useState(true);
+  const [healthError, setHealthError] = useState(false);
+
+  useEffect(() => {
+    const checkHealth = async () => {
+      try {
+        const data = await apiClient.get<HealthResponse>("/health");
+        setHealth(data);
+        setHealthError(false);
+      } catch {
+        setHealthError(true);
+      } finally {
+        setHealthLoading(false);
+      }
+    };
+
+    checkHealth();
+  }, []);
+
+  return (
+    <div className="space-y-4 sm:space-y-6">
+      <div>
+        <h1 className="text-2xl sm:text-3xl font-bold">Dashboard</h1>
+        <p className="text-sm sm:text-base text-muted-foreground">
+          Welcome back{user?.name ? `, ${user.name}` : ""}!
+        </p>
+      </div>
+
+      <div className="grid gap-4 sm:gap-6 md:grid-cols-2 lg:grid-cols-3">
+        <Card>
+          <CardHeader className="pb-2 sm:pb-4">
+            <CardTitle className="flex items-center gap-2 text-base sm:text-lg">
+              API Status
+              {healthLoading ? (
+                <Loader2 className="h-4 w-4 animate-spin" />
+              ) : healthError ? (
+                <XCircle className="h-4 w-4 text-destructive" />
+              ) : (
+                <CheckCircle className="h-4 w-4 text-green-500" />
+              )}
+            </CardTitle>
+          </CardHeader>
+          <CardContent>
+            {healthLoading ? (
+              <p className="text-muted-foreground text-sm">Checking...</p>
+            ) : healthError ? (
+              <p className="text-destructive text-sm">Backend unavailable</p>
+            ) : (
+              <div className="space-y-1">
+                <p className="text-sm">
+                  Status: <span className="font-medium">{health?.status}</span>
+                </p>
+                {health?.version && (
+                  <p className="text-xs sm:text-sm text-muted-foreground">
+                    Version: {health.version}
+                  </p>
+                )}
+              </div>
+            )}
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader className="pb-2 sm:pb-4">
+            <CardTitle className="text-base sm:text-lg">Your Account</CardTitle>
+          </CardHeader>
+          <CardContent>
+            {user ? (
+              <div className="space-y-1">
+                <p className="text-sm break-all">
+                  Email: <span className="font-medium">{user.email}</span>
+                </p>
+                {user.name && (
+                  <p className="text-sm">
+                    Name: <span className="font-medium">{user.name}</span>
+                  </p>
+                )}
+              </div>
+            ) : (
+              <p className="text-muted-foreground text-sm">Loading...</p>
+            )}
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  );
+}

fastapi_gen/template/{{cookiecutter.project_slug}}/frontend/src/app/[locale]/(dashboard)/layout.tsx

@@ -0,0 +1,17 @@
+import { Header, Sidebar } from "@/components/layout";
+
+export default function DashboardLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <div className="flex h-screen overflow-hidden">
+      <Sidebar />
+      <div className="flex min-w-0 flex-1 flex-col">
+        <Header />
+        <main className="flex-1 overflow-auto p-3 sm:p-6">{children}</main>
+      </div>
+    </div>
+  );
+}

fastapi_gen/template/{{cookiecutter.project_slug}}/frontend/src/app/[locale]/(dashboard)/profile/page.tsx

@@ -0,0 +1,152 @@
+{%- if cookiecutter.use_frontend and cookiecutter.use_jwt %}
+"use client";
+
+import { useState } from "react";
+import { useAuth } from "@/hooks";
+import { Button, Card, Input, Label, Badge } from "@/components/ui";
+import { ThemeToggle } from "@/components/theme";
+import { User, Mail, Calendar, Shield, Settings } from "lucide-react";
+
+export default function ProfilePage() {
+  const { user, isAuthenticated, logout } = useAuth();
+  const [isEditing, setIsEditing] = useState(false);
+
+  if (!isAuthenticated || !user) {
+    return (
+      <div className="flex min-h-[50vh] items-center justify-center">
+        <Card className="p-6 sm:p-8 text-center mx-4">
+          <p className="text-muted-foreground">Please log in to view your profile.</p>
+        </Card>
+      </div>
+    );
+  }
+
+  return (
+    <div className="container mx-auto max-w-4xl">
+      <div className="mb-6 sm:mb-8">
+        <h1 className="text-2xl sm:text-3xl font-bold tracking-tight">Profile</h1>
+        <p className="text-sm sm:text-base text-muted-foreground">
+          Manage your account settings and preferences
+        </p>
+      </div>
+
+      <div className="grid gap-4 sm:gap-6">
+        <Card className="p-4 sm:p-6">
+          <div className="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-4">
+            <div className="flex items-center gap-3 sm:gap-4">
+              <div className="flex h-12 w-12 sm:h-16 sm:w-16 items-center justify-center rounded-full bg-primary/10 shrink-0">
+                <User className="h-6 w-6 sm:h-8 sm:w-8 text-primary" />
+              </div>
+              <div className="min-w-0">
+                <h2 className="text-lg sm:text-xl font-semibold truncate">{user.email}</h2>
+                <div className="mt-1 flex flex-wrap items-center gap-2">
+                  {user.is_superuser && (
+                    <Badge variant="secondary">
+                      <Shield className="mr-1 h-3 w-3" />
+                      Admin
+                    </Badge>
+                  )}
+                  {user.is_active && (
+                    <Badge variant="outline" className="text-green-600">
+                      Active
+                    </Badge>
+                  )}
+                </div>
+              </div>
+            </div>
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() => setIsEditing(!isEditing)}
+              className="self-start h-10"
+            >
+              <Settings className="mr-2 h-4 w-4" />
+              {isEditing ? "Cancel" : "Edit"}
+            </Button>
+          </div>
+        </Card>
+
+        <Card className="p-4 sm:p-6">
+          <h3 className="mb-4 text-base sm:text-lg font-semibold">Account Information</h3>
+          <div className="grid gap-4">
+            <div className="grid gap-2">
+              <Label htmlFor="email" className="flex items-center gap-2 text-sm">
+                <Mail className="h-4 w-4 text-muted-foreground" />
+                Email Address
+              </Label>
+              <Input
+                id="email"
+                type="email"
+                value={user.email}
+                disabled={!isEditing}
+                className={!isEditing ? "bg-muted" : ""}
+              />
+            </div>
+
+            {user.created_at && (
+              <div className="flex items-center gap-2 text-xs sm:text-sm text-muted-foreground">
+                <Calendar className="h-4 w-4 shrink-0" />
+                <span>Member since {new Date(user.created_at).toLocaleDateString()}</span>
+              </div>
+            )}
+          </div>
+
+          {isEditing && (
+            <div className="mt-4 flex flex-col sm:flex-row justify-end gap-2">
+              <Button variant="outline" onClick={() => setIsEditing(false)} className="h-10">
+                Cancel
+              </Button>
+              <Button className="h-10">Save Changes</Button>
+            </div>
+          )}
+        </Card>
+
+        <Card className="p-4 sm:p-6">
+          <h3 className="mb-4 text-base sm:text-lg font-semibold">Preferences</h3>
+          <div className="flex items-center justify-between gap-4">
+            <div className="min-w-0">
+              <p className="font-medium text-sm sm:text-base">Theme</p>
+              <p className="text-xs sm:text-sm text-muted-foreground">
+                Choose your preferred color scheme
+              </p>
+            </div>
+            <ThemeToggle variant="dropdown" />
+          </div>
+        </Card>
+
+        <Card className="border-destructive/50 p-4 sm:p-6">
+          <h3 className="mb-4 text-base sm:text-lg font-semibold text-destructive">
+            Danger Zone
+          </h3>
+          <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
+            <div>
+              <p className="font-medium text-sm sm:text-base">Sign out</p>
+              <p className="text-xs sm:text-sm text-muted-foreground">
+                Sign out from your account on this device
+              </p>
+            </div>
+            <Button variant="destructive" onClick={logout} className="h-10 self-start sm:self-auto">
+              Sign Out
+            </Button>
+          </div>
+        </Card>
+      </div>
+    </div>
+  );
+}
+{%- elif cookiecutter.use_frontend %}
+export default function ProfilePage() {
+  return (
+    <div className="container mx-auto">
+      <h1 className="text-2xl sm:text-3xl font-bold">Profile</h1>
+      <p className="mt-4 text-sm sm:text-base text-muted-foreground">
+        User authentication is not enabled.
+      </p>
+    </div>
+  );
+}
+{%- else %}
+export default function ProfilePage() {
+  return null;
+}
+{%- endif %}

fastapi_gen/template/{{cookiecutter.project_slug}}/frontend/src/app/[locale]/auth/callback/page.tsx

@@ -0,0 +1,113 @@
+{%- if cookiecutter.enable_oauth %}
+"use client";
+
+import { Suspense, useEffect, useState } from "react";
+import { useRouter, useSearchParams } from "next/navigation";
+import { useAuthStore } from "@/stores/auth-store";
+import { Card, CardContent } from "@/components/ui";
+import { ROUTES } from "@/lib/constants";
+
+function AuthCallbackContent() {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const [error, setError] = useState<string | null>(null);
+  const { checkAuth } = useAuthStore();
+
+  useEffect(() => {
+    const handleCallback = async () => {
+      const accessToken = searchParams.get("access_token");
+      const refreshToken = searchParams.get("refresh_token");
+      const errorParam = searchParams.get("error");
+
+      if (errorParam) {
+        setError(errorParam);
+        setTimeout(() => {
+          router.push(ROUTES.LOGIN);
+        }, 3000);
+        return;
+      }
+
+      if (accessToken && refreshToken) {
+        // Store tokens - the API route will handle this
+        try {
+          const response = await fetch("/api/auth/oauth-callback", {
+            method: "POST",
+            headers: {
+              "Content-Type": "application/json",
+            },
+            body: JSON.stringify({ accessToken, refreshToken }),
+          });
+
+          if (response.ok) {
+            // Refresh auth state
+            await checkAuth();
+            router.push(ROUTES.DASHBOARD);
+          } else {
+            setError("Failed to complete authentication");
+            setTimeout(() => {
+              router.push(ROUTES.LOGIN);
+            }, 3000);
+          }
+        } catch {
+          setError("Authentication error");
+          setTimeout(() => {
+            router.push(ROUTES.LOGIN);
+          }, 3000);
+        }
+      } else {
+        setError("Missing authentication tokens");
+        setTimeout(() => {
+          router.push(ROUTES.LOGIN);
+        }, 3000);
+      }
+    };
+
+    handleCallback();
+  }, [searchParams, router, checkAuth]);
+
+  return (
+    <Card className="w-full max-w-md">
+      <CardContent className="pt-6">
+        {error ? (
+          <div className="text-center">
+            <p className="text-destructive mb-2">{error}</p>
+            <p className="text-muted-foreground text-sm">Redirecting to login...</p>
+          </div>
+        ) : (
+          <div className="text-center">
+            <div className="border-primary mx-auto mb-4 h-8 w-8 animate-spin rounded-full border-b-2" />
+            <p className="text-muted-foreground">Completing authentication...</p>
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+}
+
+function LoadingFallback() {
+  return (
+    <Card className="w-full max-w-md">
+      <CardContent className="pt-6">
+        <div className="text-center">
+          <div className="border-primary mx-auto mb-4 h-8 w-8 animate-spin rounded-full border-b-2" />
+          <p className="text-muted-foreground">Loading...</p>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
+
+export default function AuthCallbackPage() {
+  return (
+    <div className="flex min-h-screen items-center justify-center">
+      <Suspense fallback={<LoadingFallback />}>
+        <AuthCallbackContent />
+      </Suspense>
+    </div>
+  );
+}
+{%- else %}
+export default function AuthCallbackPage() {
+  return <div>OAuth not enabled</div>;
+}
+{%- endif %}

fastapi_gen/template/{{cookiecutter.project_slug}}/frontend/src/app/[locale]/layout.tsx

@@ -0,0 +1,46 @@
+{%- if cookiecutter.enable_i18n %}
+import { NextIntlClientProvider } from "next-intl";
+import { getMessages } from "next-intl/server";
+{%- endif %}
+import { notFound } from "next/navigation";
+import { Providers } from "../providers";
+{%- if cookiecutter.enable_i18n %}
+import { locales, type Locale } from "@/i18n";
+{%- endif %}
+
+{%- if cookiecutter.enable_i18n %}
+export function generateStaticParams() {
+  return locales.map((locale) => ({ locale }));
+}
+{%- endif %}
+
+export default async function LocaleLayout({
+  children,
+  params,
+}: {
+  children: React.ReactNode;
+  params: Promise<{ locale: string }>;
+}) {
+  const { locale } = await params;
+
+{%- if cookiecutter.enable_i18n %}
+  // Validate locale
+  if (!locales.includes(locale as Locale)) {
+    notFound();
+  }
+
+  // Get messages for the current locale
+  const messages = await getMessages();
+
+  return (
+    <Providers>
+      <NextIntlClientProvider messages={messages}>
+        {children}
+      </NextIntlClientProvider>
+    </Providers>
+  );
+{%- else %}
+  // i18n disabled - just render with providers
+  return <Providers>{children}</Providers>;
+{%- endif %}
+}