fastapi-fullstack 0.1.2__py3-none-any.whl

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

@@ -0,0 +1,76 @@
+import type { NextConfig } from "next";
+{%- if cookiecutter.enable_i18n %}
+import createNextIntlPlugin from 'next-intl/plugin';
+
+const withNextIntl = createNextIntlPlugin('./src/i18n.ts');
+{%- endif %}
+
+// Content Security Policy directives
+const ContentSecurityPolicy = `
+  default-src 'self';
+  script-src 'self' 'unsafe-eval' 'unsafe-inline';
+  style-src 'self' 'unsafe-inline';
+  img-src 'self' blob: data: https:;
+  font-src 'self' data:;
+  connect-src 'self' ws: wss: http://localhost:* https://localhost:*;
+  frame-ancestors 'none';
+  base-uri 'self';
+  form-action 'self';
+`.replace(/\n/g, " ").trim();
+
+const securityHeaders = [
+  {
+    key: "Content-Security-Policy",
+    value: ContentSecurityPolicy,
+  },
+  {
+    key: "X-Content-Type-Options",
+    value: "nosniff",
+  },
+  {
+    key: "X-Frame-Options",
+    value: "DENY",
+  },
+  {
+    key: "X-XSS-Protection",
+    value: "1; mode=block",
+  },
+  {
+    key: "Referrer-Policy",
+    value: "strict-origin-when-cross-origin",
+  },
+  {
+    key: "Permissions-Policy",
+    value: "camera=(), microphone=(), geolocation=()",
+  },
+];
+
+const nextConfig: NextConfig = {
+  output: "standalone",
+
+  // Security headers
+  async headers() {
+    return [
+      {
+        source: "/(.*)",
+        headers: securityHeaders,
+      },
+    ];
+  },
+
+  // Environment variables available on the server side only
+  serverRuntimeConfig: {
+    apiUrl: process.env.BACKEND_URL || "http://localhost:{{ cookiecutter.backend_port }}",
+  },
+
+  // Environment variables available on both server and client
+  publicRuntimeConfig: {
+    appName: "{{ cookiecutter.project_name }}",
+  },
+};
+
+{%- if cookiecutter.enable_i18n %}
+export default withNextIntl(nextConfig);
+{%- else %}
+export default nextConfig;
+{%- endif %}

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

@@ -0,0 +1,66 @@
+{
+  "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"
+  },
+  "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/(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/(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/(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/(dashboard)/chat/page.tsx

@@ -0,0 +1,20 @@
+{%- if cookiecutter.enable_conversation_persistence and cookiecutter.use_database %}
+import { ChatContainer, ConversationSidebar } from "@/components/chat";
+
+export default function ChatPage() {
+  return (
+    <div className="flex h-full">
+      <ConversationSidebar />
+      <div className="flex-1 min-w-0">
+        <ChatContainer />
+      </div>
+    </div>
+  );
+}
+{%- else %}
+import { ChatContainer } from "@/components/chat";
+
+export default function ChatPage() {
+  return <ChatContainer />;
+}
+{%- endif %}

fastapi_gen/template/{{cookiecutter.project_slug}}/frontend/src/app/(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-6">
+      <div>
+        <h1 className="text-3xl font-bold">Dashboard</h1>
+        <p className="text-muted-foreground">
+          Welcome back{user?.name ? `, ${user.name}` : ""}!
+        </p>
+      </div>
+
+      <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
+        <Card>
+          <CardHeader>
+            <CardTitle className="flex items-center gap-2">
+              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">Checking...</p>
+            ) : healthError ? (
+              <p className="text-destructive">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-sm text-muted-foreground">
+                    Version: {health.version}
+                  </p>
+                )}
+              </div>
+            )}
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle>Your Account</CardTitle>
+          </CardHeader>
+          <CardContent>
+            {user ? (
+              <div className="space-y-1">
+                <p className="text-sm">
+                  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">Loading...</p>
+            )}
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  );
+}

fastapi_gen/template/{{cookiecutter.project_slug}}/frontend/src/app/(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-1 flex flex-col min-w-0">
+        <Header />
+        <main className="flex-1 overflow-hidden">{children}</main>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,156 @@
+{%- 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-8 text-center">
+          <p className="text-muted-foreground">Please log in to view your profile.</p>
+        </Card>
+      </div>
+    );
+  }
+
+  return (
+    <div className="container mx-auto max-w-4xl py-8">
+      <div className="mb-8">
+        <h1 className="text-3xl font-bold tracking-tight">Profile</h1>
+        <p className="text-muted-foreground">
+          Manage your account settings and preferences
+        </p>
+      </div>
+
+      <div className="grid gap-6">
+        {/* Profile Card */}
+        <Card className="p-6">
+          <div className="flex items-start justify-between">
+            <div className="flex items-center gap-4">
+              <div className="flex h-16 w-16 items-center justify-center rounded-full bg-primary/10">
+                <User className="h-8 w-8 text-primary" />
+              </div>
+              <div>
+                <h2 className="text-xl font-semibold">{user.email}</h2>
+                <div className="mt-1 flex 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)}
+            >
+              <Settings className="mr-2 h-4 w-4" />
+              {isEditing ? "Cancel" : "Edit"}
+            </Button>
+          </div>
+        </Card>
+
+        {/* Account Information */}
+        <Card className="p-6">
+          <h3 className="mb-4 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">
+                <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-sm text-muted-foreground">
+                <Calendar className="h-4 w-4" />
+                <span>Member since {new Date(user.created_at).toLocaleDateString()}</span>
+              </div>
+            )}
+          </div>
+
+          {isEditing && (
+            <div className="mt-4 flex justify-end gap-2">
+              <Button variant="outline" onClick={() => setIsEditing(false)}>
+                Cancel
+              </Button>
+              <Button>Save Changes</Button>
+            </div>
+          )}
+        </Card>
+
+        {/* Preferences */}
+        <Card className="p-6">
+          <h3 className="mb-4 text-lg font-semibold">Preferences</h3>
+          <div className="flex items-center justify-between">
+            <div>
+              <p className="font-medium">Theme</p>
+              <p className="text-sm text-muted-foreground">
+                Choose your preferred color scheme
+              </p>
+            </div>
+            <ThemeToggle variant="dropdown" />
+          </div>
+        </Card>
+
+        {/* Danger Zone */}
+        <Card className="border-destructive/50 p-6">
+          <h3 className="mb-4 text-lg font-semibold text-destructive">
+            Danger Zone
+          </h3>
+          <div className="flex items-center justify-between">
+            <div>
+              <p className="font-medium">Sign out</p>
+              <p className="text-sm text-muted-foreground">
+                Sign out from your account on this device
+              </p>
+            </div>
+            <Button variant="destructive" onClick={logout}>
+              Sign Out
+            </Button>
+          </div>
+        </Card>
+      </div>
+    </div>
+  );
+}
+{%- elif cookiecutter.use_frontend %}
+export default function ProfilePage() {
+  return (
+    <div className="container mx-auto py-8">
+      <h1 className="text-3xl font-bold">Profile</h1>
+      <p className="mt-4 text-muted-foreground">
+        User authentication is not enabled.
+      </p>
+    </div>
+  );
+}
+{%- else %}
+/* Profile page - frontend not configured */
+export default function ProfilePage() {
+  return null;
+}
+{%- endif %}

fastapi_gen/template/{{cookiecutter.project_slug}}/frontend/src/app/api/auth/login/route.ts

@@ -0,0 +1,58 @@
+{% raw %}import { NextRequest, NextResponse } from "next/server";
+import { backendFetch, BackendApiError } from "@/lib/server-api";
+import type { LoginResponse } from "@/types";
+
+export async function POST(request: NextRequest) {
+  try {
+    const body = await request.json();
+
+    // Backend expects OAuth2 form data format
+    const formData = new URLSearchParams();
+    formData.append("username", body.email);
+    formData.append("password", body.password);
+
+    const data = await backendFetch<LoginResponse>("/api/v1/auth/login", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/x-www-form-urlencoded",
+      },
+      body: formData.toString(),
+    });
+
+    // Set HTTP-only cookies for tokens
+    const response = NextResponse.json({
+      user: data.user,
+      message: "Login successful",
+    });
+
+    // Set access token cookie (short-lived)
+    response.cookies.set("access_token", data.access_token, {
+      httpOnly: true,
+      secure: process.env.NODE_ENV === "production",
+      sameSite: "lax",
+      maxAge: 60 * 15, // 15 minutes
+      path: "/",
+    });
+
+    // Set refresh token cookie (long-lived)
+    response.cookies.set("refresh_token", data.refresh_token, {
+      httpOnly: true,
+      secure: process.env.NODE_ENV === "production",
+      sameSite: "lax",
+      maxAge: 60 * 60 * 24 * 7, // 7 days
+      path: "/",
+    });
+
+    return response;
+  } catch (error) {
+    if (error instanceof BackendApiError) {
+      const detail =
+        (error.data as { detail?: string })?.detail || "Login failed";
+      return NextResponse.json({ detail }, { status: error.status });
+    }
+    return NextResponse.json(
+      { detail: "Internal server error" },
+      { status: 500 }
+    );
+  }
+}{% endraw %}

fastapi_gen/template/{{cookiecutter.project_slug}}/frontend/src/app/api/auth/logout/route.ts

@@ -0,0 +1,24 @@
+import { NextResponse } from "next/server";
+
+export async function POST() {
+  const response = NextResponse.json({ message: "Logged out successfully" });
+
+  // Clear auth cookies
+  response.cookies.set("access_token", "", {
+    httpOnly: true,
+    secure: process.env.NODE_ENV === "production",
+    sameSite: "lax",
+    maxAge: 0,
+    path: "/",
+  });
+
+  response.cookies.set("refresh_token", "", {
+    httpOnly: true,
+    secure: process.env.NODE_ENV === "production",
+    sameSite: "lax",
+    maxAge: 0,
+    path: "/",
+  });
+
+  return response;
+}