[V0_FILE]typescriptreact:file="app/page.tsx" "use client" import { useState } from "react" import { Heart, MessageCircle, Share, Plus, Home, Search, User, Bell } from "lucide-react" import { Button } from "@/components/ui/button" import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar" import { Card, CardContent } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" interface Post { id: string user: { name: string username: string avatar: string } content: string image?: string likes: number comments: number shares: number timestamp: string isLiked: boolean } const mockPosts: Post[] = [ { id: "1", user: { name: "Sarah Chen", username: "@sarahc", avatar: "/placeholder.svg?height=40&width=40", }, content: "Just discovered this amazing coffee shop in downtown! The vibes are immaculate ☕✨ #CoffeeLife #YOLO", image: "/placeholder.svg?height=300&width=400", likes: 124, comments: 23, shares: 8, timestamp: "2h", isLiked: false, }, { id: "2", user: { name: "Alex Rivera", username: "@alexr", avatar: "/placeholder.svg?height=40&width=40", }, content: "Weekend hiking adventure complete! 🏔️ Nothing beats connecting with nature and disconnecting from the digital world.", likes: 89, comments: 15, shares: 12, timestamp: "4h", isLiked: true, }, { id: "3", user: { name: "Maya Patel", username: "@mayap", avatar: "/placeholder.svg?height=40&width=40", }, content: "Cooking experiment: fusion tacos with Korean BBQ! 🌮🔥 Who wants the recipe?", image: "/placeholder.svg?height=300&width=400", likes: 156, comments: 34, shares: 19, timestamp: "6h", isLiked: false, }, ] export default function YoloApp() { const [posts, setPosts] = useState(mockPosts) const [activeTab, setActiveTab] = useState("home") const handleLike = (postId: string) => { setPosts( posts.map((post) => post.id === postId ? { ...post, isLiked: !post.isLiked, likes: post.isLiked ? post.likes - 1 : post.likes + 1, } : post, ), ) } const renderFeed = () => (

{/* Header */}

YOLO

{/* Stories/Status */}

You

Your Story

{["Emma", "Jake", "Lisa", "Tom", "Anna"].map((name, index) => (

{name[0]} {name}

))}

{/* Posts */}

{posts.map((post) => ( {/* Post Header */}

{post.user.name[0]}

{post.user.name}

{post.user.username} • {post.timestamp}

{/* Post Content */}

{post.content}

{/* Post Image */} {post.image && (

)} {/* Post Actions */}

))}

) const renderProfile = () => (

{/* Profile Header */}

John Doe

@johndoe

Living life to the fullest! 🌟 Travel enthusiast | Coffee lover | Tech geek

{/* Stats */}

127

Posts

2.4K

Followers

892

Following

{/* Action Buttons */}

{/* Recent Posts Grid */}

Create Post

</div>
        </div>

<div className="flex flex-wrap gap-2">
          <Badge variant="secondary" className="cursor-pointer hover:bg-purple-100">
            📸 Photo
          </Badge>
          <Badge variant="secondary" className="cursor-pointer hover:bg-purple-100">
            🎥 Video
          </Badge>
          <Badge variant="secondary" className="cursor-pointer hover:bg-purple-100">
            📍 Location
          </Badge>
          <Badge variant="secondary" className="cursor-pointer hover:bg-purple-100">
            😊 Feeling
          </Badge>
        </div>

<div className="border-2 border-dashed border-gray-300 rounded-lg p-8 text-center">
          <div className="text-gray-400">
            <Plus className="h-12 w-12 mx-auto mb-2" />
            <p>Tap to add photos or videos</p>
          </div>
        </div>
      </div>
    </div>
  )

return (
    <div className="min-h-screen bg-gray-50">
      {/* Main Content */}
      <main className="max-w-md mx-auto bg-white min-h-screen relative">
        {activeTab === "home" && renderFeed()}
        {activeTab === "profile" && renderProfile()}
        {activeTab === "create" && renderCreatePost()}

{/* Bottom Navigation */}
        <div className="fixed bottom-0 left-1/2 transform -translate-x-1/2 w-full max-w-md bg-white border-t">
          <div className="flex justify-around py-2">
            <Button
              variant="ghost"
              size="sm"
              className={`flex flex-col items-center gap-1 ${activeTab === "home" ? "text-purple-600" : "text-gray-600"}`}
              onClick={() => setActiveTab("home")}
            >
              <Home className="h-5 w-5" />
              <span className="text-xs">Home</span>
            </Button>
            <Button
              variant="ghost"
              size="sm"
              className={`flex flex-col items-center gap-1 ${activeTab === "search" ? "text-purple-600" : "text-gray-600"}`}
              onClick={() => setActiveTab("search")}
            >
              <Search className="h-5 w-5" />
              <span className="text-xs">Search</span>
            </Button>
            <Button
              variant="ghost"
              size="sm"
              className={`flex flex-col items-center gap-1 ${activeTab === "create" ? "text-purple-600" : "text-gray-600"}`}
              onClick={() => setActiveTab("create")}
            >
              <div className="bg-gradient-to-r from-purple-500 to-pink-500 rounded-full p-1">
                <Plus className="h-4 w-4 text-white" />
              </div>
              <span className="text-xs">Create</span>
            </Button>
            <Button
              variant="ghost"
              size="sm"
              className={`flex flex-col items-center gap-1 ${activeTab === "notifications" ? "text-purple-600" : "text-gray-600"}`}
              onClick={() => setActiveTab("notifications")}
            >
              <Bell className="h-5 w-5" />
              <span className="text-xs">Activity</span>
            </Button>
            <Button
              variant="ghost"
              size="sm"
              className={`flex flex-col items-center gap-1 ${activeTab === "profile" ? "text-purple-600" : "text-gray-600"}`}
              onClick={() => setActiveTab("profile")}
            >
              <User className="h-5 w-5" />
              <span className="text-xs">Profile</span>
            </Button>
          </div>
        </div>
      </main>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/loading.tsx" isFixed="true"
export default function Loading() {
  return null
}
[V0_FILE]typescript:file="contexts/pi-auth-context.tsx" type="code-project" isLocked="true"
"use client";

import React, {
  createContext,
  useContext,
  useState,
  useEffect,
  type ReactNode,
} from "react";
import { PI_NETWORK_CONFIG, BACKEND_URLS } from "@/lib/system-config";
import { api, setApiAuthToken } from "@/lib/api";

export type LoginDTO = {
  id: string;
  username: string;
  credits_balance: number;
  terms_accepted: boolean;
};

interface PiAuthResult {
  accessToken: string;
  user: {
    uid: string;
    username: string;
  };
}

declare global {
  interface Window {
    Pi: {
      init: (config: { version: string; sandbox?: boolean }) => Promise<void>;
      authenticate: (scopes: string[]) => Promise<PiAuthResult>;
    };
  }
}

interface PiAuthContextType {
  isAuthenticated: boolean;
  authMessage: string;
  piAccessToken: string | null;
  userData: LoginDTO | null;
  reinitialize: () => Promise<void>;
}

const PiAuthContext = createContext<PiAuthContextType | undefined>(undefined);

const loadPiSDK = (): Promise<void> => {
  return new Promise((resolve, reject) => {
    const script = document.createElement("script");
    if (!PI_NETWORK_CONFIG.SDK_URL) {
      throw new Error("SDK URL is not set");
    }
    script.src = PI_NETWORK_CONFIG.SDK_URL;
    script.async = true;

script.onload = () => {
      console.log("✅ Pi SDK script loaded successfully");
      resolve();
    };

script.onerror = () => {
      console.error("❌ Failed to load Pi SDK script");
      reject(new Error("Failed to load Pi SDK script"));
    };

document.head.appendChild(script);
  });
};

export function PiAuthProvider({ children }: { children: ReactNode }) {
  const [isAuthenticated, setIsAuthenticated] = useState(false);
  const [authMessage, setAuthMessage] = useState("Initializing Pi Network...");
  const [piAccessToken, setPiAccessToken] = useState<string | null>(null);
  const [userData, setUserData] = useState<LoginDTO | null>(null);

const authenticateAndLogin = async (): Promise<void> => {
    setAuthMessage("Authenticating with Pi Network...");
    const piAuthResult = await window.Pi.authenticate(["username"]);

setAuthMessage("Logging in to backend...");
    const loginRes = await api.post<LoginDTO>(BACKEND_URLS.LOGIN, {
      pi_auth_token: piAuthResult.accessToken,
    });

if (piAuthResult?.accessToken) {
      setPiAccessToken(piAuthResult.accessToken);
      setApiAuthToken(piAuthResult.accessToken);
    }

setUserData(loginRes.data);
  };

const initializePiAndAuthenticate = async () => {
    try {
      setAuthMessage("Loading Pi Network SDK...");

// Only load if not already loaded
      if (typeof window.Pi === "undefined") {
        await loadPiSDK();
      }

if (typeof window.Pi === "undefined") {
        throw new Error("Pi object not available after script load");
      }

setAuthMessage("Initializing Pi Network...");
      await window.Pi.init({
        version: "2.0",
        sandbox: PI_NETWORK_CONFIG.SANDBOX,
      });

await authenticateAndLogin();

setIsAuthenticated(true);
    } catch (err) {
      console.error("❌ Pi Network initialization failed:", err);
      setAuthMessage(
        "Failed to authenticate or login. Please refresh and try again."
      );
    }
  };

useEffect(() => {
    initializePiAndAuthenticate();
  }, []);

const value: PiAuthContextType = {
    isAuthenticated,
    authMessage,
    piAccessToken,
    userData,
    reinitialize: initializePiAndAuthenticate,
  };

return (
    <PiAuthContext.Provider value={value}>{children}</PiAuthContext.Provider>
  );
}

/**
 * Hook to access Pi Network authentication state and user data
 *
 * Must be used within a component wrapped by PiAuthProvider.
 * Provides read-only access to authentication state and user data.
 *
 * @returns {PiAuthContextType} Authentication state and methods
 * @throws {Error} If used outside of PiAuthProvider
 *
 * @example
 * const { piAccessToken, userData, isAuthenticated, reinitialize } = usePiAuth();
 */
export function usePiAuth() {
  const context = useContext(PiAuthContext);
  if (context === undefined) {
    throw new Error("usePiAuth must be used within a PiAuthProvider");
  }
  return context;
}
[V0_FILE]typescript:file="components/auth-loading-screen.tsx" type="code-project" isLocked="true"
"use client";

import { usePiAuth } from "@/contexts/pi-auth-context";

export function AuthLoadingScreen() {
  const { authMessage, reinitialize } = usePiAuth();
  const isError = authMessage.toLowerCase().includes("failed");

return (
    <div className="min-h-screen flex items-center justify-center bg-background">
      <div className="max-w-md w-full px-6 text-center space-y-6">
        <div className="flex justify-center">
          <div className="relative">
            <div className="w-20 h-20 rounded-full border-4 border-primary/20" />
            <div className="absolute inset-0 w-20 h-20 rounded-full border-4 border-primary border-t-transparent animate-spin" />
          </div>
        </div>

<div className="space-y-2">
          <h2 className="text-2xl font-semibold">Pi Network Authentication</h2>
          <p
            className={`text-sm ${
              isError ? "text-destructive" : "text-muted-foreground"
            }`}
          >
            {authMessage}
          </p>
        </div>

{isError && (
          <button
            onClick={reinitialize}
            className="px-4 py-2 bg-primary text-primary-foreground rounded-md hover:bg-primary/90 transition-colors"
          >
            Try Again
          </button>
        )}
      </div>
    </div>
  );
}
[V0_FILE]typescript:file="components/app-wrapper.tsx" type="code-project" isLocked="true"
"use client";

import type { ReactNode } from "react";
import { PiAuthProvider, usePiAuth } from "@/contexts/pi-auth-context";
import { AuthLoadingScreen } from "./auth-loading-screen";

function AppContent({ children }: { children: ReactNode }) {
  const { isAuthenticated } = usePiAuth();
  if (!isAuthenticated) return <AuthLoadingScreen />;
  return <>{children}</>;
}

export function AppWrapper({ children }: { children: ReactNode }) {
  return (
    <PiAuthProvider>
      <AppContent>{children}</AppContent>
    </PiAuthProvider>
  );
}
[V0_FILE]typescript:file="app/layout.tsx" type="code-project" isLocked="true"
import type React from "react";
import type { Metadata } from "next";
import { GeistSans } from "geist/font/sans";
import { GeistMono } from "geist/font/mono";
import { AppWrapper } from "@/components/app-wrapper";
import "./globals.css";

export const metadata: Metadata = {
  title: "Made with App Studio",
  description: "Pi Network app",
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <head>
        <style>{`
html {
  font-family: ${GeistSans.style.fontFamily};
  --font-sans: ${GeistSans.variable};
  --font-mono: ${GeistMono.variable};
}
        `}</style>
      </head>
      <body>
        <AppWrapper>{children}</AppWrapper>
      </body>
    </html>
  );
}
[V0_FILE]typescript:file="lib/api.ts" type="code-project" isLocked="true"
/**
 * Global fetch-based client for making API requests.
 *
 * - Set auth with `setApiAuthToken(token)`; it injects the Authorization header.
 * - Parses JSON automatically; for 204 responses `data` is `null`.
 * - Returns `{ data, status, statusText, headers }`.
 * - On non-2xx, throws an Error with `status` and `data`.
 *
 * @example
 * import { api } from '@/lib/api';
 *
 * const createThing = async () => {
 *   const { data } = await api.post('/api/your-endpoint', { data: 'your data' });
 *   console.log(data);
 * };
 *
 * await api.get('/api/users');
 * await api.put('/api/user/123', { name: 'Updated' });
 * await api.delete('/api/user/123');
 */

type FetchResponse<T> = {
  data: T;
  status: number;
  statusText: string;
  headers: Headers;
};

export interface ApiError<T = unknown> extends Error {
  status: number;
  data: T;
}

let authToken: string | null = null;

const defaultHeaders: Record<string, string> = {
  "Content-Type": "application/json",
};

const request = async <T = any>(
  url: string,
  init: RequestInit = {}
): Promise<FetchResponse<T>> => {
  const headers: Record<string, string> = {
    ...defaultHeaders,
    ...(init.headers as Record<string, string> | undefined),
  };
  if (authToken) headers["Authorization"] = authToken;

const response = await fetch(url, { ...init, headers });

const contentType = response.headers.get("content-type") || "";
  const isJson = contentType.includes("application/json");
  const data =
    response.status === 204
      ? null
      : isJson
      ? await response.json()
      : await response.text();

if (!response.ok) {
    const error = new Error(
      response.statusText || "Request failed"
    ) as ApiError<T>;
    error.status = response.status;
    error.data = data as T;
    throw error;
  }

return {
    data: data as T,
    status: response.status,
    statusText: response.statusText,
    headers: response.headers,
  };
};

export const api = {
  get: <T = any>(url: string, init?: RequestInit) =>
    request<T>(url, { ...init, method: "GET" }),

delete: <T = any>(url: string, init?: RequestInit) =>
    request<T>(url, { ...init, method: "DELETE" }),

post: <T = any>(url: string, body?: any, init?: RequestInit) =>
    request<T>(url, {
      ...init,
      method: "POST",
      body: body === undefined ? init?.body : JSON.stringify(body),
    }),

put: <T = any>(url: string, body?: any, init?: RequestInit) =>
    request<T>(url, {
      ...init,
      method: "PUT",
      body: body === undefined ? init?.body : JSON.stringify(body),
    }),

patch: <T = any>(url: string, body?: any, init?: RequestInit) =>
    request<T>(url, {
      ...init,
      method: "PATCH",
      body: body === undefined ? init?.body : JSON.stringify(body),
    }),
};

export const setApiAuthToken = (token: string) => {
  authToken = token;
};
[V0_FILE]typescript:file="lib/system-config.ts" type="code-project" isLocked="true"
// LOCKED FILE

// *** System Configuration - NON-EDITABLE VALUES ***
          // This file contains configuration values that should not be modified during normal app customization.
          // These values are set during app creation.

// Pi Network Configuration
          export const PI_NETWORK_CONFIG = {
            SDK_URL: "https://sdk.minepi.com/pi-sdk.js",
            SANDBOX: false,
          } as const;

// Backend Configuration
          export const BACKEND_CONFIG = {
            BASE_URL: "https://backend.appstudio-u7cm9zhmha0ruwv8.piappengine.com",
          } as const;

// Backend URLs
          export const BACKEND_URLS = {
            LOGIN: `${BACKEND_CONFIG.BASE_URL}/v1/login`,

} as const;</article></body></html>