+ );
+ }
+
+ // Don't render anything if not authenticated (will redirect)
+ if (!user) {
+ return null;
+ }
+
+ return (
+
+
Dashboard
+
+ {/* User Info Card */}
+
+
+ Welcome back!
+
+ Logged in as {user.email}
+
+
+
+
+ User ID: {user.id}
+
+
+
+
+ {/* Projects Grid */}
+
Your Projects
+
+ {projects.map((project) => (
+
+
+ {project.name}
+ {project.status}
+
+
+
+
+
+ ))}
+
+ {/* New Project Card */}
+
+
+ + New Project
+ Start a new AI project
+
+
+
+
+
+
+
+ );
+}
diff --git a/frontend/src/app/demo/page.tsx b/frontend/src/app/demo/page.tsx
new file mode 100644
index 0000000..0eaa16d
--- /dev/null
+++ b/frontend/src/app/demo/page.tsx
@@ -0,0 +1,50 @@
+/**
+ * =============================================================================
+ * DEMO PAGE
+ * =============================================================================
+ *
+ * This page showcases various features you can use:
+ * - AI text generation
+ * - AI image generation (placeholder)
+ * - Database CRUD operations
+ *
+ * Route: /demo
+ */
+
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { AIDemo } from "@/components/ai-demo";
+import { DatabaseDemo } from "@/components/database-demo";
+
+export default function DemoPage() {
+ return (
+
+
Feature Demos
+
+ Explore the different features available in this template
+
+
+ {/* Tabs for different demo sections */}
+
+
+ AI Generation
+ Database (Supabase)
+
+
+ {/* AI Demo Tab */}
+
+
+
+
Text Generation
+
+
+
+
+
+ {/* Database Demo Tab */}
+
+
+
+
+
+ );
+}
diff --git a/frontend/src/app/globals.css b/frontend/src/app/globals.css
new file mode 100644
index 0000000..b9ff45c
--- /dev/null
+++ b/frontend/src/app/globals.css
@@ -0,0 +1,84 @@
+/**
+ * =============================================================================
+ * GLOBAL STYLES & SHADCN/UI THEME
+ * =============================================================================
+ *
+ * This file contains:
+ * 1. Tailwind CSS directives
+ * 2. CSS variables for Shadcn/ui theming
+ * 3. Global base styles
+ *
+ * Shadcn/ui uses CSS variables so you can easily customize the entire theme
+ * by changing values here. Both light and dark themes are defined.
+ */
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+ /*
+ * Light theme colors
+ * These are HSL values without the hsl() wrapper
+ * Format: hue saturation% lightness%
+ */
+ :root {
+ --background: 0 0% 100%;
+ --foreground: 222.2 84% 4.9%;
+ --card: 0 0% 100%;
+ --card-foreground: 222.2 84% 4.9%;
+ --popover: 0 0% 100%;
+ --popover-foreground: 222.2 84% 4.9%;
+ --primary: 222.2 47.4% 11.2%;
+ --primary-foreground: 210 40% 98%;
+ --secondary: 210 40% 96.1%;
+ --secondary-foreground: 222.2 47.4% 11.2%;
+ --muted: 210 40% 96.1%;
+ --muted-foreground: 215.4 16.3% 46.9%;
+ --accent: 210 40% 96.1%;
+ --accent-foreground: 222.2 47.4% 11.2%;
+ --destructive: 0 84.2% 60.2%;
+ --destructive-foreground: 210 40% 98%;
+ --border: 214.3 31.8% 91.4%;
+ --input: 214.3 31.8% 91.4%;
+ --ring: 222.2 84% 4.9%;
+ --radius: 0.5rem;
+ }
+
+ /*
+ * Dark theme colors
+ * Automatically applied when .dark class is on html/body
+ */
+ .dark {
+ --background: 222.2 84% 4.9%;
+ --foreground: 210 40% 98%;
+ --card: 222.2 84% 4.9%;
+ --card-foreground: 210 40% 98%;
+ --popover: 222.2 84% 4.9%;
+ --popover-foreground: 210 40% 98%;
+ --primary: 210 40% 98%;
+ --primary-foreground: 222.2 47.4% 11.2%;
+ --secondary: 217.2 32.6% 17.5%;
+ --secondary-foreground: 210 40% 98%;
+ --muted: 217.2 32.6% 17.5%;
+ --muted-foreground: 215 20.2% 65.1%;
+ --accent: 217.2 32.6% 17.5%;
+ --accent-foreground: 210 40% 98%;
+ --destructive: 0 62.8% 30.6%;
+ --destructive-foreground: 210 40% 98%;
+ --border: 217.2 32.6% 17.5%;
+ --input: 217.2 32.6% 17.5%;
+ --ring: 212.7 26.8% 83.9%;
+ }
+}
+
+@layer base {
+ /* Apply theme colors to all elements */
+ * {
+ @apply border-border;
+ }
+
+ body {
+ @apply bg-background text-foreground;
+ }
+}
diff --git a/frontend/src/app/layout.tsx b/frontend/src/app/layout.tsx
new file mode 100644
index 0000000..55c7909
--- /dev/null
+++ b/frontend/src/app/layout.tsx
@@ -0,0 +1,63 @@
+/**
+ * =============================================================================
+ * ROOT LAYOUT
+ * =============================================================================
+ *
+ * This is the root layout that wraps ALL pages in your Next.js app.
+ *
+ * Key responsibilities:
+ * - HTML structure and metadata
+ * - Global providers (auth, theme, etc.)
+ * - Persistent UI elements (navigation, footer)
+ *
+ * In Next.js App Router:
+ * - layout.tsx files wrap their child routes
+ * - They persist across page navigations (don't re-render)
+ * - Great for shared UI and providers
+ */
+
+import type { Metadata } from "next";
+import { Inter } from "next/font/google";
+// @ts-ignore - CSS imports don't need type declarations
+import "./globals.css";
+
+// Import providers
+import { Providers } from "@/components/providers";
+import { Navigation } from "@/components/navigation";
+
+// Load Inter font with Latin subset
+const inter = Inter({ subsets: ["latin"] });
+
+// Metadata for SEO - customize for your hackathon project!
+export const metadata: Metadata = {
+ title: "Hack Nation 2026 - AI-Powered App",
+ description: "Built with Next.js, FastAPI, and AI",
+};
+
+export default function RootLayout({
+ children,
+}: {
+ children: React.ReactNode;
+}) {
+ return (
+
+
+ {/*
+ Providers wrap the entire app with context providers:
+ - Supabase auth context
+ - Theme context (light/dark mode)
+ - Any other global state
+ */}
+
+ {/* Navigation is persistent across all pages */}
+
+
+ {/* Main content area */}
+
+ {children}
+
+
+
+
+ );
+}
diff --git a/frontend/src/app/login/page.tsx b/frontend/src/app/login/page.tsx
new file mode 100644
index 0000000..54409ea
--- /dev/null
+++ b/frontend/src/app/login/page.tsx
@@ -0,0 +1,194 @@
+/**
+ * =============================================================================
+ * LOGIN PAGE
+ * =============================================================================
+ *
+ * This page demonstrates:
+ * - Supabase authentication (email/password & OAuth)
+ * - Form handling in React
+ * - Redirecting after successful login
+ *
+ * Supabase Auth Features Used:
+ * - signInWithPassword: Email/password login
+ * - signInWithOAuth: Social login (Google, GitHub, etc.)
+ * - signUp: Create new account
+ *
+ * Route: /login
+ */
+
+"use client";
+
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import Link from "next/link";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";
+import { useSupabase } from "@/lib/supabase/provider";
+
+export default function LoginPage() {
+ const { supabase } = useSupabase();
+ const router = useRouter();
+
+ // Form state
+ const [email, setEmail] = useState("");
+ const [password, setPassword] = useState("");
+ const [loading, setLoading] = useState(false);
+ const [error, setError] = useState(null);
+ const [isSignUp, setIsSignUp] = useState(false);
+
+ /**
+ * Handle email/password authentication
+ */
+ async function handleEmailAuth(e: React.FormEvent) {
+ e.preventDefault();
+ setLoading(true);
+ setError(null);
+
+ try {
+ if (isSignUp) {
+ // Create new account
+ const { error } = await supabase.auth.signUp({
+ email,
+ password,
+ options: {
+ // Redirect URL after email confirmation
+ emailRedirectTo: `${window.location.origin}/auth/callback`,
+ },
+ });
+
+ if (error) throw error;
+
+ // Show success message (Supabase sends confirmation email)
+ setError("Check your email to confirm your account!");
+ } else {
+ // Sign in existing user
+ const { error } = await supabase.auth.signInWithPassword({
+ email,
+ password,
+ });
+
+ if (error) throw error;
+
+ // Redirect to dashboard on success
+ router.push("/dashboard");
+ }
+ } catch (err: any) {
+ setError(err.message);
+ } finally {
+ setLoading(false);
+ }
+ }
+
+ /**
+ * Handle OAuth login (Google, GitHub, etc.)
+ */
+ async function handleOAuthLogin(provider: "google" | "github") {
+ setLoading(true);
+ setError(null);
+
+ try {
+ const { error } = await supabase.auth.signInWithOAuth({
+ provider,
+ options: {
+ redirectTo: `${window.location.origin}/auth/callback`,
+ },
+ });
+
+ if (error) throw error;
+ } catch (err: any) {
+ setError(err.message);
+ setLoading(false);
+ }
+ }
+
+ return (
+
+
+
+ {isSignUp ? "Create Account" : "Welcome Back"}
+
+ {isSignUp
+ ? "Sign up to start building with AI"
+ : "Sign in to your account"}
+
+
+
+
+ {/* OAuth Buttons */}
+
+
+
+
+
+ {/* Divider */}
+
+
+
+
+
+
+ Or continue with email
+
+
+
+
+ {/* Email/Password Form */}
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/frontend/src/app/page.tsx b/frontend/src/app/page.tsx
new file mode 100644
index 0000000..8663018
--- /dev/null
+++ b/frontend/src/app/page.tsx
@@ -0,0 +1,105 @@
+/**
+ * =============================================================================
+ * HOME PAGE
+ * =============================================================================
+ *
+ * This is the main landing page of your app (route: /)
+ *
+ * In Next.js App Router:
+ * - page.tsx files define the UI for a route
+ * - This file is at /app/page.tsx, so it renders at /
+ * - /app/about/page.tsx would render at /about
+ *
+ * This page demonstrates:
+ * - Using Shadcn/ui components
+ * - Calling the AI endpoint
+ * - Basic layout structure
+ */
+
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { AIDemo } from "@/components/ai-demo";
+import Link from "next/link";
+
+export default function HomePage() {
+ return (
+
+ {/* Hero Section */}
+
+
+ 🚀 Hack Nation 2026
+
+
+ A full-stack template with Next.js, FastAPI, Supabase, and AI integration.
+ Everything you need to build your hackathon project!
+