[V0_FILE]plaintext:file=".gitignore" # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. # dependencies /node_modules # next.js /.next/ /out/ # production /build # debug npm-debug.log* yarn-debug.log* yarn-error.log* .pnpm-debug.log* # env files .env* # vercel .vercel # typescript *.tsbuildinfo next-env.d.ts [V0_FILE]markdown:file="README.md" # Supabase Community Starter *Automatically synced with your [v0.dev](https://v0.dev) deployments* [![Deployed on Vercel](https://img.shields.io/badge/Deployed%20on-Vercel-black?style=for-the-badge&logo=vercel)](https://vercel.com/tisegenenes-projects/v0-supabase-community-starter) [![Built with v0](https://img.shields.io/badge/Built%20with-v0.dev-black?style=for-the-badge)](https://v0.dev/chat/projects/cOj058rslAA) ## Overview This repository will stay in sync with your deployed chats on [v0.dev](https://v0.dev). Any changes you make to your deployed app will be automatically pushed to this repository from [v0.dev](https://v0.dev). ## Deployment Your project is live at: **[https://vercel.com/tisegenenes-projects/v0-supabase-community-starter](https://vercel.com/tisegenenes-projects/v0-supabase-community-starter)** ## Build your app Continue building your app on: **[https://v0.dev/chat/projects/cOj058rslAA](https://v0.dev/chat/projects/cOj058rslAA)** ## How It Works 1. Create and modify your project using [v0.dev](https://v0.dev) 2. Deploy your chats from the v0 interface 3. Changes are automatically pushed to this repository 4. Vercel deploys the latest version from this repository [V0_FILE]typescriptreact:file="app/auth/login/page.tsx" import { createClient, isSupabaseConfigured } from "@/lib/supabase/server" import { redirect } from "next/navigation" import LoginForm from "@/components/login-form" export default async function LoginPage() { // If Supabase is not configured, show setup message directly if (!isSupabaseConfigured) { return (

Connect Supabase to get started

) } // Check if user is already logged in const supabase = createClient() const { data: { session }, } = await supabase.auth.getSession() // If user is logged in, redirect to home page if (session) { redirect("/") } return (

) } [V0_FILE]typescriptreact:file="app/auth/sign-up/page.tsx" import { createClient, isSupabaseConfigured } from "@/lib/supabase/server" import { redirect } from "next/navigation" import SignUpForm from "@/components/signup-form" export default async function SignUpPage() { // If Supabase is not configured, show setup message directly if (!isSupabaseConfigured) { return (

Connect Supabase to get started

) } [V0_FILE]css:file="app/globals.css" @tailwind base; @tailwind components; @tailwind utilities; @layer base { :root { --background: 0 0% 100%; --foreground: 0 0% 0%; --card: 0 0% 100%; --card-foreground: 0 0% 0%; --popover: 0 0% 100%; --popover-foreground: 0 0% 0%; --primary: 0 0% 0%; --primary-foreground: 0 0% 100%; --secondary: 0 0% 96%; --secondary-foreground: 0 0% 20%; --muted: 0 0% 96%; --muted-foreground: 0 0% 45%; --accent: 0 0% 96%; --accent-foreground: 0 0% 20%; --destructive: 0 84.2% 60.2%; --destructive-foreground: 0 0% 98%; --border: 0 0% 90%; --input: 0 0% 90%; --ring: 0 0% 0%; --radius: 0.5rem; } .dark { --background: 0 0% 10%; --foreground: 0 0% 98%; --card: 0 0% 10%; --card-foreground: 0 0% 98%; --popover: 0 0% 10%; --popover-foreground: 0 0% 98%; --primary: 0 0% 100%; --primary-foreground: 0 0% 0%; --secondary: 0 0% 15%; --secondary-foreground: 0 0% 98%; --muted: 0 0% 15%; --muted-foreground: 0 0% 65%; --accent: 0 0% 15%; --accent-foreground: 0 0% 98%; --destructive: 0 62.8% 30.6%; --destructive-foreground: 0 0% 98%; --border: 0 0% 20%; --input: 0 0% 20%; --ring: 0 0% 100%; } } @layer base { * { @apply border-border; } body { @apply bg-background text-foreground; } } [V0_FILE]typescriptreact:file="app/layout.tsx" import type React from "react" import type { Metadata } from "next" import { Geist } from "next/font/google" import "./globals.css" const geist = Geist({ subsets: ["latin"], }) export const metadata: Metadata = { title: "Supabase Auth with SSR", description: "A Next.js application with Supabase authentication using SSR", generator: 'v0.dev' } export default function RootLayout({ children, }: { children: React.ReactNode }) { return ( {children} ) } [V0_FILE]typescriptreact:file="app/page.tsx" import { createClient, isSupabaseConfigured } from "@/lib/supabase/server" import { redirect } from "next/navigation" import { Button } from "@/components/ui/button" import { LogOut } from "lucide-react" import { signOut } from "@/lib/actions" export default async function Home() { // If Supabase is not configured, show setup message directly if (!isSupabaseConfigured) { return (

Connect Supabase to get started

) } // Get the user from the server const supabase = createClient() const { data: { user }, } = await supabase.auth.getUser() // If no user, redirect to login if (!user) { redirect("/auth/login") } return (

Hello {user.email}

) } [V0_FILE]json:file="components.json" { "$schema": "https://ui.shadcn.com/schema.json", "style": "default", "rsc": true, "tsx": true, "tailwind": { "config": "tailwind.config.ts", "css": "app/globals.css", "baseColor": "neutral", "cssVariables": true, "prefix": "" }, "aliases": { "components": "@/components", "utils": "@/lib/utils", "ui": "@/components/ui", "lib": "@/lib", "hooks": "@/hooks" }, "iconLibrary": "lucide" } [V0_FILE]typescriptreact:file="components/login-form.tsx" "use client" import { useActionState } from "react" import { useFormStatus } from "react-dom" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Loader2 } from "lucide-react" import Link from "next/link" import { useRouter } from "next/navigation" import { useEffect } from "react" import { signIn } from "@/lib/actions" function SubmitButton() { const { pending } = useFormStatus() return ( ) } export default function LoginForm() { const router = useRouter() const [state, formAction] = useActionState(signIn, null) // Handle successful login by redirecting useEffect(() => { if (state?.success) { router.push("/") } }, [state, router]) return (

Welcome back

) } [V0_FILE]typescriptreact:file="components/signup-form.tsx" "use client" import { useActionState } from "react" import { useFormStatus } from "react-dom" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Loader2 } from "lucide-react" import Link from "next/link" import { signUp } from "@/lib/actions" function SubmitButton() { const { pending } = useFormStatus() return ( ) } export default function SignUpForm() { // Initialize with null as the initial state const [state, formAction] = useActionState(signUp, null) return (

Create an account

) } [V0_FILE]typescriptreact:file="components/theme-provider.tsx" 'use client' import * as React from 'react' import { ThemeProvider as NextThemesProvider, type ThemeProviderProps, } from 'next-themes' export function ThemeProvider({ children, ...props }: ThemeProviderProps) { return {children} } [V0_FILE]typescriptreact:file="components/ui/button.tsx" 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 ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 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 hover:bg-primary/90", destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90", outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground", secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80", ghost: "hover:bg-accent hover:text-accent-foreground", link: "text-primary underline-offset-4 hover:underline", }, size: { default: "h-10 px-4 py-2", sm: "h-9 rounded-md px-3", lg: "h-11 rounded-md px-8", icon: "h-10 w-10", }, }, defaultVariants: { variant: "default", size: "default", }, } ) export interface ButtonProps extends React.ButtonHTMLAttributes, VariantProps { asChild?: boolean } const Button = React.forwardRef( ({ className, variant, size, asChild = false, ...props }, ref) => { const Comp = asChild ? Slot : "button" return ( ) } ) Button.displayName = "Button" export { Button, buttonVariants } [V0_FILE]typescriptreact:file="components/ui/input.tsx" import * as React from "react" import { cn } from "@/lib/utils" const Input = React.forwardRef>( ({ className, type, ...props }, ref) => { return ( ) } ) Input.displayName = "Input" export { Input } [V0_FILE]typescript:file="lib/actions.ts" "use server" import { createServerActionClient } from "@supabase/auth-helpers-nextjs" import { cookies } from "next/headers" import { redirect } from "next/navigation" // Update the signIn function to handle redirects properly export async function signIn(prevState: any, formData: FormData) { // Check if formData is valid if (!formData) { return { error: "Form data is missing" } } const email = formData.get("email") const password = formData.get("password") // Validate required fields if (!email || !password) { return { error: "Email and password are required" } } const cookieStore = cookies() const supabase = createServerActionClient({ cookies: () => cookieStore }) try { const { error } = await supabase.auth.signInWithPassword({ email: email.toString(), password: password.toString(), }) if (error) { return { error: error.message } } // Return success instead of redirecting directly return { success: true } } catch (error) { console.error("Login error:", error) return { error: "An unexpected error occurred. Please try again." } } } // Update the signUp function to handle potential null formData export async function signUp(prevState: any, formData: FormData) { // Check if formData is valid if (!formData) { return { error: "Form data is missing" } } const email = formData.get("email") const password = formData.get("password") // Validate required fields if (!email || !password) { return { error: "Email and password are required" } } const cookieStore = cookies() const supabase = createServerActionClient({ cookies: () => cookieStore }) try { const { error } = await supabase.auth.signUp({ email: email.toString(), password: password.toString(), }) if (error) { return { error: error.message } } return { success: "Check your email to confirm your account." } } catch (error) { console.error("Sign up error:", error) return { error: "An unexpected error occurred. Please try again." } } } export async function signOut() { const cookieStore = cookies() const supabase = createServerActionClient({ cookies: () => cookieStore }) await supabase.auth.signOut() redirect("/auth/login") } [V0_FILE]typescript:file="lib/supabase/client.ts" import { createClientComponentClient } from "@supabase/auth-helpers-nextjs" // Check if Supabase environment variables are available export const isSupabaseConfigured = typeof process.env.NEXT_PUBLIC_SUPABASE_URL === "string" && process.env.NEXT_PUBLIC_SUPABASE_URL.length > 0 && typeof process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY === "string" && process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY.length > 0 // Create a singleton instance of the Supabase client for Client Components export const supabase = createClientComponentClient() [V0_FILE]typescript:file="lib/supabase/middleware.ts" import { createMiddlewareClient } from "@supabase/auth-helpers-nextjs" import { NextResponse, type NextRequest } from "next/server" // Check if Supabase environment variables are available export const isSupabaseConfigured = typeof process.env.NEXT_PUBLIC_SUPABASE_URL === "string" && process.env.NEXT_PUBLIC_SUPABASE_URL.length > 0 && typeof process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY === "string" && process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY.length > 0 export async function updateSession(request: NextRequest) { // If Supabase is not configured, just continue without auth if (!isSupabaseConfigured) { return NextResponse.next({ request, }) } const res = NextResponse.next() // Create a Supabase client configured to use cookies const supabase = createMiddlewareClient({ req: request, res }) // Check if this is an auth callback const requestUrl = new URL(request.url) const code = requestUrl.searchParams.get("code") if (code) { // Exchange the code for a session await supabase.auth.exchangeCodeForSession(code) // Redirect to home page after successful auth return NextResponse.redirect(new URL("/", request.url)) } // Refresh session if expired - required for Server Components await supabase.auth.getSession() // Protected routes - redirect to login if not authenticated const isAuthRoute = request.nextUrl.pathname.startsWith("/auth/login") || request.nextUrl.pathname.startsWith("/auth/sign-up") || request.nextUrl.pathname === "/auth/callback" if (!isAuthRoute) { const { data: { session }, } = await supabase.auth.getSession() if (!session) { const redirectUrl = new URL("/auth/login", request.url) return NextResponse.redirect(redirectUrl) } } return res } [V0_FILE]typescript:file="lib/supabase/server.ts" import { createServerComponentClient } from "@supabase/auth-helpers-nextjs" import { cookies } from "next/headers" import { cache } from "react" // Check if Supabase environment variables are available export const isSupabaseConfigured = typeof process.env.NEXT_PUBLIC_SUPABASE_URL === "string" && process.env.NEXT_PUBLIC_SUPABASE_URL.length > 0 && typeof process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY === "string" && process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY.length > 0 // Create a cached version of the Supabase client for Server Components export const createClient = cache(() => { const cookieStore = cookies() if (!isSupabaseConfigured) { console.warn("Supabase environment variables are not set. Using dummy client.") return { auth: { getUser: () => Promise.resolve({ data: { user: null }, error: null }), getSession: () => Promise.resolve({ data: { session: null }, error: null }), }, } } return createServerComponentClient({ cookies: () => cookieStore }) }) [V0_FILE]typescript:file="lib/utils.ts" import { clsx, type ClassValue } from "clsx" import { twMerge } from "tailwind-merge" export function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)) } [V0_FILE]typescript:file="middleware.ts" import { updateSession } from "@/lib/supabase/middleware" import type { NextRequest } from "next/server" export async function middleware(request: NextRequest) { return await updateSession(request) } export const config = { matcher: [ /* * Match all request paths except for the ones starting with: * - _next/static (static files) * - _next/image (image optimization files) * - favicon.ico (favicon file) * Feel free to modify this pattern to include more paths. */ "/((?!_next/static|_next/image|favicon.ico|.*\\.(?:svg|png|jpg|jpeg|gif|webp)$).*)", ], } [V0_FILE]javascript:file="next.config.mjs" /** @type {import('next').NextConfig} */ const nextConfig = { eslint: { ignoreDuringBuilds: true, }, typescript: { ignoreBuildErrors: true, }, images: { unoptimized: true, }, } export default nextConfig [V0_FILE]json:file="package.json" { "name": "my-v0-project", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint" }, "dependencies": { "@hookform/resolvers": "^3.9.1", "@radix-ui/react-accordion": "1.2.2", "@radix-ui/react-alert-dialog": "1.1.4", "@radix-ui/react-aspect-ratio": "1.1.1", "@radix-ui/react-avatar": "1.1.2", "@radix-ui/react-checkbox": "1.1.3", "@radix-ui/react-collapsible": "1.1.2", "@radix-ui/react-context-menu": "2.2.4", "@radix-ui/react-dialog": "1.1.4", "@radix-ui/react-dropdown-menu": "2.1.4", "@radix-ui/react-hover-card": "1.1.4", "@radix-ui/react-label": "2.1.1", "@radix-ui/react-menubar": "1.1.4", "@radix-ui/react-navigation-menu": "1.2.3", "@radix-ui/react-popover": "1.1.4", "@radix-ui/react-progress": "1.1.1", "@radix-ui/react-radio-group": "1.2.2", "@radix-ui/react-scroll-area": "1.2.2", "@radix-ui/react-select": "2.1.4", "@radix-ui/react-separator": "1.1.1", "@radix-ui/react-slider": "1.2.2", "@radix-ui/react-slot": "1.1.1", "@radix-ui/react-switch": "1.1.2", "@radix-ui/react-tabs": "1.1.2", "@radix-ui/react-toast": "1.2.4", "@radix-ui/react-toggle": "1.1.1", "@radix-ui/react-toggle-group": "1.1.1", "@radix-ui/react-tooltip": "1.1.6", "@supabase/auth-helpers-nextjs": "latest", "@supabase/supabase-js": "latest", "autoprefixer": "^10.4.20", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "1.0.4", "date-fns": "4.1.0", "embla-carousel-react": "8.5.1", "input-otp": "1.4.1", "lucide-react": "^0.454.0", "next": "15.2.4", "next-themes": "^0.4.4", "react": "^19", "react-day-picker": "8.10.1", "react-dom": "^19", "react-hook-form": "^7.54.1", "react-resizable-panels": "^2.1.7", "recharts": "2.15.0", "sonner": "^1.7.1", "tailwind-merge": "^2.5.5", "tailwindcss-animate": "^1.0.7", "vaul": "^0.9.6", "zod": "^3.24.1" }, "devDependencies": { "@types/node": "^22", "@types/react": "^19", "@types/react-dom": "^19", "postcss": "^8.5", "tailwindcss": "^3.4.17", "typescript": "^5" } } [V0_FILE]javascript:file="postcss.config.mjs" /** @type {import('postcss-load-config').Config} */ const config = { plugins: { tailwindcss: {}, }, }; export default config; [V0_FILE]css:file="styles/globals.css" @tailwind base; @tailwind components; @tailwind utilities; body { font-family: Arial, Helvetica, sans-serif; } @layer utilities { .text-balance { text-wrap: balance; } } @layer base { :root { --background: 0 0% 100%; --foreground: 0 0% 3.9%; --card: 0 0% 100%; --card-foreground: 0 0% 3.9%; --popover: 0 0% 100%; --popover-foreground: 0 0% 3.9%; --primary: 0 0% 9%; --primary-foreground: 0 0% 98%; --secondary: 0 0% 96.1%; --secondary-foreground: 0 0% 9%; --muted: 0 0% 96.1%; --muted-foreground: 0 0% 45.1%; --accent: 0 0% 96.1%; --accent-foreground: 0 0% 9%; --destructive: 0 84.2% 60.2%; --destructive-foreground: 0 0% 98%; --border: 0 0% 89.8%; --input: 0 0% 89.8%; --ring: 0 0% 3.9%; --chart-1: 12 76% 61%; --chart-2: 173 58% 39%; --chart-3: 197 37% 24%; --chart-4: 43 74% 66%; --chart-5: 27 87% 67%; --radius: 0.5rem; --sidebar-background: 0 0% 98%; --sidebar-foreground: 240 5.3% 26.1%; --sidebar-primary: 240 5.9% 10%; --sidebar-primary-foreground: 0 0% 98%; --sidebar-accent: 240 4.8% 95.9%; --sidebar-accent-foreground: 240 5.9% 10%; --sidebar-border: 220 13% 91%; --sidebar-ring: 217.2 91.2% 59.8%; } .dark { --background: 0 0% 3.9%; --foreground: 0 0% 98%; --card: 0 0% 3.9%; --card-foreground: 0 0% 98%; --popover: 0 0% 3.9%; --popover-foreground: 0 0% 98%; --primary: 0 0% 98%; --primary-foreground: 0 0% 9%; --secondary: 0 0% 14.9%; --secondary-foreground: 0 0% 98%; --muted: 0 0% 14.9%; --muted-foreground: 0 0% 63.9%; --accent: 0 0% 14.9%; --accent-foreground: 0 0% 98%; --destructive: 0 62.8% 30.6%; --destructive-foreground: 0 0% 98%; --border: 0 0% 14.9%; --input: 0 0% 14.9%; --ring: 0 0% 83.1%; --chart-1: 220 70% 50%; --chart-2: 160 60% 45%; --chart-3: 30 80% 55%; --chart-4: 280 65% 60%; --chart-5: 340 75% 55%; --sidebar-background: 240 5.9% 10%; --sidebar-foreground: 240 4.8% 95.9%; --sidebar-primary: 224.3 76.3% 48%; --sidebar-primary-foreground: 0 0% 100%; --sidebar-accent: 240 3.7% 15.9%; --sidebar-accent-foreground: 240 4.8% 95.9%; --sidebar-border: 240 3.7% 15.9%; --sidebar-ring: 217.2 91.2% 59.8%; } } @layer base { * { @apply border-border; } body { @apply bg-background text-foreground; } } [V0_FILE]typescript:file="tailwind.config.ts" import type { Config } from "tailwindcss" const config = { darkMode: ["class"], content: [ "./pages/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}", "./app/**/*.{ts,tsx}", "./src/**/*.{ts,tsx}", "*.{js,ts,jsx,tsx,mdx}", ], prefix: "", theme: { container: { center: true, padding: "2rem", screens: { "2xl": "1400px", }, }, extend: { colors: { border: "hsl(var(--border))", input: "hsl(var(--input))", ring: "hsl(var(--ring))", background: "hsl(var(--background))", foreground: "hsl(var(--foreground))", primary: { DEFAULT: "hsl(var(--primary))", foreground: "hsl(var(--primary-foreground))", }, secondary: { DEFAULT: "hsl(var(--secondary))", foreground: "hsl(var(--secondary-foreground))", }, destructive: { DEFAULT: "hsl(var(--destructive))", foreground: "hsl(var(--destructive-foreground))", }, muted: { DEFAULT: "hsl(var(--muted))", foreground: "hsl(var(--muted-foreground))", }, accent: { DEFAULT: "hsl(var(--accent))", foreground: "hsl(var(--accent-foreground))", }, popover: { DEFAULT: "hsl(var(--popover))", foreground: "hsl(var(--popover-foreground))", }, card: { DEFAULT: "hsl(var(--card))", foreground: "hsl(var(--card-foreground))", }, }, borderRadius: { lg: "var(--radius)", md: "calc(var(--radius) - 2px)", sm: "calc(var(--radius) - 4px)", }, 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")], } satisfies Config export default config [V0_FILE]json:file="tsconfig.json" { "compilerOptions": { "lib": ["dom", "dom.iterable", "esnext"], "allowJs": true, "target": "ES6", "skipLibCheck": true, "strict": true, "noEmit": true, "esModuleInterop": true, "module": "esnext", "moduleResolution": "bundler", "resolveJsonModule": true, "isolatedModules": true, "jsx": "preserve", "incremental": true, "plugins": [ { "name": "next" } ], "paths": { "@/*": ["./*"] } }, "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"], "exclude": ["node_modules"] } [V0_FILE]png:file="public/placeholder-logo.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_Gob7m3lOU5Yu7nxJNAOtIBlVFjj0/1uv3SMJqY6_jxcFCTgTEak/public/placeholder-logo.png" [V0_FILE]xml:file="public/placeholder-logo.svg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_Gob7m3lOU5Yu7nxJNAOtIBlVFjj0/XB_XF8ESrwbAjotfOd5Wmb/public/placeholder-logo.svg" [V0_FILE]jpg:file="public/placeholder-user.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_Gob7m3lOU5Yu7nxJNAOtIBlVFjj0/ONejAluG3EJATcwwA61bXn/public/placeholder-user.jpg" [V0_FILE]jpg:file="public/placeholder.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_Gob7m3lOU5Yu7nxJNAOtIBlVFjj0/BlrBc_c6JuPtjsBHFMcNJn/public/placeholder.jpg" [V0_FILE]xml:file="public/placeholder.svg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_Gob7m3lOU5Yu7nxJNAOtIBlVFjj0/J0QvC3Vjlpi92ZtRdLC4Mx/public/placeholder.svg"