\n);\n\nconst ErrorMessage: React.FC<{ message: string }> = ({ message }) => (\n

\n ❌\n {message}\n

\n);\n\nconst UserProfileCard: React.FC<{ user: GitHubUser }> = ({ user }) => (\n

\n \n \n \n \n

\n {user.name || user.login}\n

@{user.login}

\n {user.bio && (\n

{user.bio}

\n )}\n

\n {user.location && (\n \n 📍 {user.location}\n \n )}\n {user.company && (\n \n 🏢 {user.company}\n \n )}\n {user.blog && (\n \n 🔗 {user.blog}\n \n )}\n {user.twitter_username && (\n \n 🐦 @{user.twitter_username}\n \n )}\n {user.email && (\n \n ✉️ {user.email}\n \n )}\n

\n Joined GitHub on {formatDate(user.created_at)}\n •\n Last updated {formatDate(user.updated_at)}\n •\n User ID: {user.id}\n

\n);\n\nconst StatsGrid: React.FC<{ user: GitHubUser }> = ({ user }) => (\n

\n {[\n { label: 'Followers', value: user.followers, icon: '👥' },\n { label: 'Following', value: user.following, icon: '👤' },\n { label: 'Public Repos', value: user.public_repos, icon: '📚' },\n { label: 'Public Gists', value: user.public_gists, icon: '📝' }\n ].map((stat) => (\n

{stat.icon}

\n {stat.value.toLocaleString()}\n

{stat.label}

\n ))}\n

\n);\n\nconst RecentRepos: React.FC<{ repos: GitHubRepo[] }> = ({ repos }) => (\n

\n 📚 Recent Repositories\n

\n {repos.slice(0, 5).map((repo) => (\n

\n \n {repo.name}\n \n

\n \n ⭐ {repo.stargazers_count}\n \n \n 🍴 {repo.forks_count}\n \n

\n {repo.description && (\n

{repo.description}

\n )}\n

\n {repo.language && (\n \n \n {repo.language}\n \n )}\n {repo.topics.length > 0 && (\n

\n {repo.topics.slice(0, 3).map((topic) => (\n \n {topic}\n \n ))}\n

\n )}\n

\n \n Updated {formatDate(repo.updated_at)}\n \n

\n ))}\n

\n);\n\nconst RecentActivity: React.FC<{ events: GitHubEvent[] }> = ({ events }) => (\n

\n ⚡ Recent Activity\n

\n {events.slice(0, 8).map((event) => (\n

\n {event.type === 'PushEvent' && '📝'}\n {event.type === 'CreateEvent' && '🆕'}\n {event.type === 'WatchEvent' && '⭐'}\n {event.type === 'ForkEvent' && '🍴'}\n {event.type === 'IssuesEvent' && '🐛'}\n {event.type === 'PullRequestEvent' && '🔀'}\n {!['PushEvent', 'CreateEvent', 'WatchEvent', 'ForkEvent', 'IssuesEvent', 'PullRequestEvent'].includes(event.type) && '📋'}\n

{getEventDescription(event)}

\n {formatDate(event.created_at)}\n

\n ))}\n

\n);\n\nconst RawDataSection: React.FC<{ rawResponses: any }> = ({ rawResponses }) => {\n const [expandedSection, setExpandedSection] = useState(null);\n\n const toggleSection = (section: string) => {\n setExpandedSection(expandedSection === section ? null : section);\n };\n\n return (\n

\n 🔍 Raw API Responses\n

\n Click on any section below to view the raw JSON response from GitHub's API\n

\n {Object.entries(rawResponses).map(([key, data]) => (\n

\n toggleSection(key)}\n className=\"w-full px-4 py-3 text-left bg-gray-50 hover:bg-gray-100 rounded-t-lg flex items-center justify-between transition-colors\"\n >\n \n {key} API Response ({key === 'user' ? '1 object' : `${Array.isArray(data) ? data.length : 1} items`})\n \n \n {expandedSection === key ? '▼' : '▶'}\n \n \n {expandedSection === key && (\n

\n                  {JSON.stringify(data, null, 2)}\n

\n )}\n

\n ))}\n

\n 💡 API Information: This data is fetched from GitHub's REST API v3. \n The APIs used are: /users/{`{username}`}, /users/{`{username}`}/repos, \n and /users/{`{username}`}/events/public.\n

\n );\n};\n\n// Main App Component\nconst App: React.FC = () => {\n const [username, setUsername] = useState('');\n const [profileData, setProfileData] = useState(null);\n const [loading, setLoading] = useState(false);\n const [error, setError] = useState('');\n\n const fetchProfile = async (searchUsername: string) => {\n if (!searchUsername.trim()) return;\n\n setLoading(true);\n setError('');\n setProfileData(null);\n\n try {\n const response = await fetch(`/api/user/${encodeURIComponent(searchUsername.trim())}`);\n const data = await response.json();\n\n if (!response.ok) {\n throw new Error(data.error || 'Failed to fetch profile');\n }\n\n setProfileData(data);\n } catch (err) {\n setError(err instanceof Error ? err.message : 'An error occurred');\n } finally {\n setLoading(false);\n }\n };\n\n const handleSubmit = (e: React.FormEvent) => {\n e.preventDefault();\n fetchProfile(username);\n };\n\n // Load a default profile on mount\n useEffect(() => {\n fetchProfile('octocat');\n }, []);\n\n return (\n

\n GitHub Profile Viewer\n

\n Enter a GitHub username to view their comprehensive profile\n

\n \n \n

\n\n {loading && }\n \n {error && }\n\n {profileData && (\n

\n \n \n \n \n \n

\n )}\n

\n );\n};\n\n// Render the app\nconst root = createRoot(document.getElementById('root')!);\nroot.render();",[19,60],"fcc54224-4c75-11f0-9f79-76b3cceeab13","index.html","fcc54350-4c75-11f0-9f79-76b3cceeab13",3,["D",1750273008406],"\n\n\n \n \n GitHub User Profile Viewer\n \n \n \n\n\n

\n \n\n",[19,69],"fcc54be8-4c75-11f0-9f79-76b3cceeab13","directory",["D",1750273008406],[19],{"_36":106,"_13":107,"_39":108,"_41":-5,"_43":44,"_45":64,"_47":48,"_49":109,"_17":51,"_52":76,"_53":-5,"_55":56,"_57":-5,"_88":110,"_18":111},{"_36":75,"_13":19,"_39":42,"_41":-5,"_43":44,"_45":71,"_47":48,"_49":91,"_17":51,"_52":76,"_53":-5,"_55":56,"_57":-5,"_88":92,"_18":93},{"_36":82,"_13":83,"_39":84,"_41":-5,"_43":44,"_45":85,"_47":48,"_49":86,"_17":51,"_52":24,"_53":87,"_55":56,"_57":-5,"_88":89,"_18":90},"ec11c2cc-4c75-11f0-baf9-76b3cceeab13","README.md","ec11c380-4c75-11f0-baf9-76b3cceeab13",1,["D",1750272980389],"# GitHub User Profile Viewer\n\nA web application that displays comprehensive GitHub user profiles with detailed information cards and raw API responses.\n\n## Features\n\n- **User Profile Card**: Displays avatar, name, bio, location, company, and social links\n- **Statistics**: Shows followers, following, public repos, and gists\n- **Activity Data**: Recent repositories and contribution stats\n- **Raw API Responses**: Shows all GitHub API responses used to build the profile\n- **Responsive Design**: Works on desktop and mobile devices\n\n## Project Structure\n\n```\n├── backend/\n│ └── index.ts # Main API server with GitHub data fetching\n├── frontend/\n│ ├── index.html # Main HTML template\n│ ├── index.tsx # React frontend application\n│ └── style.css # Custom styles\n└── README.md\n```\n\n## GitHub APIs Used\n\n- **User API**: `/users/{username}` - Basic user information\n- **User Repos API**: `/users/{username}/repos` - User's repositories\n- **User Events API**: `/users/{username}/events/public` - Recent activity\n\n## Usage\n\n1. Enter a GitHub username in the search field\n2. View the formatted profile card with user details\n3. Scroll down to see raw API responses for transparency\n\n## Tech Stack\n\n- **Backend**: Hono (TypeScript API framework)\n- **Frontend**: React with TypeScript\n- **Styling**: TailwindCSS\n- **APIs**: GitHub REST API v4","children",[],[83],["D",1750273008406],[94,95,96],[19],{"_36":68,"_13":69,"_39":70,"_41":42,"_43":44,"_45":71,"_47":48,"_49":103,"_17":51,"_52":24,"_53":73,"_55":56,"_57":-5,"_88":104,"_18":105},{"_36":59,"_13":60,"_39":61,"_41":42,"_43":44,"_45":62,"_47":48,"_49":100,"_17":64,"_52":65,"_53":66,"_55":56,"_57":-5,"_88":101,"_18":102},{"_36":37,"_13":38,"_39":40,"_41":42,"_43":44,"_45":46,"_47":48,"_49":97,"_17":51,"_52":24,"_53":54,"_55":56,"_57":-5,"_88":98,"_18":99},["D",1750273024785],[],[19,38],["D",1750273245486],[],[19,60],["D",1750273008406],[],[19,69],"f881d1b4-4c75-11f0-a2b5-76b3cceeab13","backend","ade3fe30-982b-4771-813d-19d9d3b4d852",["D",1750273001253],[112],[107],{"_36":113,"_13":114,"_39":115,"_41":108,"_43":44,"_45":116,"_47":48,"_49":117,"_17":71,"_52":118,"_53":119,"_55":56,"_57":-5,"_88":120,"_18":121},"5a439d2e-4c76-11f0-8082-76b3cceeab13","index.ts","f881beae-4c75-11f0-a2b5-76b3cceeab13",8,["D",1750273165262],"http","import { Hono } from \"https://esm.sh/hono@3.11.7\";\nimport { readFile, serveFile } from \"https://esm.town/v/std/utils@85-main/index.ts\";\n\nconst app = new Hono();\n\n// Unwrap Hono errors to see original error details\napp.onError((err, c) => {\n throw err;\n});\n\n// Serve static files\napp.get(\"/frontend/*\", c => serveFile(c.req.path, import.meta.url));\n\n// Serve main page\napp.get(\"/\", async c => {\n const html = await readFile(\"/frontend/index.html\", import.meta.url);\n return c.html(html);\n});\n\n// GitHub API interfaces\ninterface GitHubUser {\n login: string;\n id: number;\n avatar_url: string;\n name: string | null;\n company: string | null;\n blog: string | null;\n location: string | null;\n email: string | null;\n bio: string | null;\n twitter_username: string | null;\n public_repos: number;\n public_gists: number;\n followers: number;\n following: number;\n created_at: string;\n updated_at: string;\n html_url: string;\n}\n\ninterface GitHubRepo {\n id: number;\n name: string;\n full_name: string;\n description: string | null;\n html_url: string;\n language: string | null;\n stargazers_count: number;\n forks_count: number;\n updated_at: string;\n created_at: string;\n topics: string[];\n}\n\ninterface GitHubEvent {\n id: string;\n type: string;\n created_at: string;\n repo?: {\n name: string;\n url: string;\n };\n payload: any;\n}\n\ninterface GitHubProfileData {\n user: GitHubUser;\n repos: GitHubRepo[];\n events: GitHubEvent[];\n rawResponses: {\n user: any;\n repos: any;\n events: any;\n };\n}\n\n// Helper function to make GitHub API requests\nasync function fetchGitHubAPI(endpoint: string): Promise {\n const headers: Record = {\n 'Accept': 'application/vnd.github.v3+json',\n 'User-Agent': 'GitHub-Profile-Viewer'\n };\n\n // Add GitHub token if available (for higher rate limits)\n const githubToken = Deno.env.get('GITHUB_TOKEN');\n if (githubToken) {\n headers['Authorization'] = `token ${githubToken}`;\n }\n\n const response = await fetch(`https://api.github.com${endpoint}`, {\n headers\n });\n\n if (!response.ok) {\n if (response.status === 404) {\n throw new Error('User not found');\n }\n if (response.status === 403) {\n const rateLimitRemaining = response.headers.get('X-RateLimit-Remaining');\n const rateLimitReset = response.headers.get('X-RateLimit-Reset');\n if (rateLimitRemaining === '0') {\n const resetTime = rateLimitReset ? new Date(parseInt(rateLimitReset) * 1000).toLocaleTimeString() : 'unknown';\n throw new Error(`GitHub API rate limit exceeded. Resets at ${resetTime}. Consider adding a GITHUB_TOKEN environment variable for higher limits.`);\n }\n throw new Error('GitHub API access forbidden. This might be due to rate limiting.');\n }\n throw new Error(`GitHub API error: ${response.status} ${response.statusText}`);\n }\n\n return await response.json();\n}\n\n// API endpoint to fetch GitHub user profile data\napp.get(\"/api/user/:username\", async c => {\n try {\n const username = c.req.param(\"username\");\n \n if (!username || username.trim() === \"\") {\n return c.json({ error: \"Username is required\" }, 400);\n }\n\n // Fetch user data\n const userResponse = await fetchGitHubAPI(`/users/${username}`);\n \n // Fetch user's repositories (latest 10, sorted by updated)\n const reposResponse = await fetchGitHubAPI(`/users/${username}/repos?sort=updated&per_page=10`);\n \n // Fetch user's recent public events (latest 10)\n const eventsResponse = await fetchGitHubAPI(`/users/${username}/events/public?per_page=10`);\n\n const profileData: GitHubProfileData = {\n user: userResponse,\n repos: reposResponse,\n events: eventsResponse,\n rawResponses: {\n user: userResponse,\n repos: reposResponse,\n events: eventsResponse\n }\n };\n\n return c.json(profileData);\n } catch (error) {\n console.error(\"Error fetching GitHub data:\", error);\n \n // If it's a rate limit error and the user is 'octocat', return demo data\n if (error instanceof Error && error.message.includes('rate limit') && c.req.param(\"username\") === 'octocat') {\n return c.json(getDemoData());\n }\n \n return c.json({ \n error: error instanceof Error ? error.message : \"Failed to fetch GitHub data\" \n }, 500);\n }\n});\n\n// Demo data for when API is rate limited\nfunction getDemoData(): GitHubProfileData {\n const demoUser = {\n login: \"octocat\",\n id: 1,\n avatar_url: \"https://github.com/images/error/octocat_happy.gif\",\n name: \"The Octocat\",\n company: \"@github\",\n blog: \"https://github.blog\",\n location: \"San Francisco\",\n email: null,\n bio: \"A great octopus masquerading as a cat\",\n twitter_username: null,\n public_repos: 8,\n public_gists: 8,\n followers: 9000,\n following: 9,\n created_at: \"2011-01-25T18:44:36Z\",\n updated_at: \"2023-12-07T21:00:00Z\",\n html_url: \"https://github.com/octocat\"\n };\n\n const demoRepos = [\n {\n id: 1296269,\n name: \"Hello-World\",\n full_name: \"octocat/Hello-World\",\n description: \"This your first repo!\",\n html_url: \"https://github.com/octocat/Hello-World\",\n language: \"C\",\n stargazers_count: 80,\n forks_count: 9,\n updated_at: \"2023-12-07T21:00:00Z\",\n created_at: \"2011-01-26T19:01:12Z\",\n topics: [\"octocat\", \"atom\", \"electron\", \"api\"]\n },\n {\n id: 1296270,\n name: \"Spoon-Knife\",\n full_name: \"octocat/Spoon-Knife\",\n description: \"This repo is for demonstration purposes only.\",\n html_url: \"https://github.com/octocat/Spoon-Knife\",\n language: \"HTML\",\n stargazers_count: 12000,\n forks_count: 144000,\n updated_at: \"2023-12-06T15:30:00Z\",\n created_at: \"2011-01-27T19:06:43Z\",\n topics: [\"forking\", \"git\"]\n }\n ];\n\n const demoEvents = [\n {\n id: \"1234567890\",\n type: \"PushEvent\",\n created_at: \"2023-12-07T21:00:00Z\",\n repo: {\n name: \"octocat/Hello-World\",\n url: \"https://api.github.com/repos/octocat/Hello-World\"\n },\n payload: {\n commits: [\n {\n message: \"Update README.md\"\n }\n ]\n }\n },\n {\n id: \"1234567891\",\n type: \"WatchEvent\",\n created_at: \"2023-12-06T20:00:00Z\",\n repo: {\n name: \"github/docs\",\n url: \"https://api.github.com/repos/github/docs\"\n },\n payload: {}\n }\n ];\n\n return {\n user: demoUser,\n repos: demoRepos,\n events: demoEvents,\n rawResponses: {\n user: { ...demoUser, _note: \"Demo data - API rate limited\" },\n repos: [...demoRepos],\n events: [...demoEvents]\n }\n };\n}\n\n// Health check endpoint\napp.get(\"/api/health\", c => {\n return c.json({ status: \"ok\", timestamp: new Date().toISOString() });\n});\n\nexport default app.fetch;",[],[107,114],"88085098-4c75-11f0-8417-76b3cceeab13",["D",1750272812559],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","imageUrl","userId","b81d9e00-1967-11f0-9612-95f9818738b5","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount","orgId","23f80170-c47b-4296-bcb7-d51cf397db42","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_11":12,"_174":170},"org",{"_11":12,"_168":-5,"_169":170,"_131":132,"_171":172,"_173":56},"branch",{"_17":62,"_13":16,"_36":44,"_160":122,"_161":-5,"_162":-5,"_163":-5,"_164":-5,"_165":-5,"_166":14,"_167":12},"isOwned","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18ydmpYRUxhamZQa3Z4TVk0aVhnZjNic1d0NXkifQ","tier","free","canRestrictVals","profileImageUrl","adoptOrgId",{"_36":122,"_13":14,"_49":232,"_124":-5,"_125":56,"_126":127,"_128":127,"_129":-5,"_130":-5,"_131":132,"_133":115,"_134":48,"_135":48,"_136":-5,"_137":51,"_138":139,"_140":-5,"_141":-5,"_142":-5,"_143":-5,"_144":145,"_146":145,"_147":148,"_149":148,"_150":148,"_151":145,"_152":145,"_153":233,"_155":234,"_157":235,"_159":56},[211,213,217],"files",[211,212,213,214,215,216,217],"counts",{"_202":51,"_203":85,"_204":51,"_32":205,"_206":207},[196,197,198],{"_36":75,"_13":19,"_39":42,"_41":-5,"_43":44,"_45":71,"_47":48,"_49":194,"_17":51,"_52":76,"_53":-5,"_55":56,"_57":-5,"_18":195},"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},["D",1750273008406],[19],{"_36":68,"_13":69,"_39":70,"_41":42,"_43":44,"_45":71,"_47":48,"_49":72,"_17":51,"_52":24,"_53":73,"_55":56,"_57":-5,"_18":201},{"_36":59,"_13":60,"_39":61,"_41":42,"_43":44,"_45":62,"_47":48,"_49":63,"_17":64,"_52":65,"_53":66,"_55":56,"_57":-5,"_18":200},{"_36":37,"_13":38,"_39":40,"_41":42,"_43":44,"_45":46,"_47":48,"_49":50,"_17":51,"_52":24,"_53":54,"_55":56,"_57":-5,"_18":199},[19,38],[19,60],[19,69],"pulls","branches","forks",{"_208":51,"_210":51},"connections",{"_208":51,"_209":51},"count","unfilledCount","emptyCount",{"_36":106,"_13":107,"_39":108,"_41":-5,"_43":44,"_45":64,"_47":48,"_49":109,"_17":51,"_52":76,"_53":-5,"_55":56,"_57":-5,"_88":230,"_18":231},{"_36":113,"_13":114,"_39":115,"_41":108,"_43":44,"_45":116,"_47":48,"_49":117,"_17":71,"_52":118,"_53":119,"_55":56,"_57":-5,"_88":228,"_18":229},{"_36":75,"_13":19,"_39":42,"_41":-5,"_43":44,"_45":71,"_47":48,"_49":91,"_17":51,"_52":76,"_53":-5,"_55":56,"_57":-5,"_88":226,"_18":227},{"_36":68,"_13":69,"_39":70,"_41":42,"_43":44,"_45":71,"_47":48,"_49":103,"_17":51,"_52":24,"_53":73,"_55":56,"_57":-5,"_88":224,"_18":225},{"_36":59,"_13":60,"_39":61,"_41":42,"_43":44,"_45":62,"_47":48,"_49":100,"_17":64,"_52":65,"_53":66,"_55":56,"_57":-5,"_88":222,"_18":223},{"_36":37,"_13":38,"_39":40,"_41":42,"_43":44,"_45":46,"_47":48,"_49":97,"_17":51,"_52":24,"_53":54,"_55":56,"_57":-5,"_88":220,"_18":221},{"_36":82,"_13":83,"_39":84,"_41":-5,"_43":44,"_45":85,"_47":48,"_49":86,"_17":51,"_52":24,"_53":87,"_55":56,"_57":-5,"_88":218,"_18":219},[],[83],[],[19,38],[],[19,60],[],[19,69],[214,215,216],[19],[],[107,114],[212],[107],["D",1750272812559],{"_11":12,"_174":170},{"_11":12,"_168":-5,"_169":170,"_131":132,"_171":172,"_173":56},{"_17":62,"_13":16,"_36":44,"_160":122,"_161":-5,"_162":-5,"_163":-5,"_164":-5,"_165":-5,"_166":14,"_167":12},"ctx",{"_153":-5,"_191":269,"_270":271,"_272":273,"_274":56,"_275":56,"_276":56,"_277":48,"_278":-5,"_279":-7,"_280":-7,"_281":51,"_282":56,"_283":56,"_284":-5,"_285":56,"_286":56,"_287":56,"_288":-5},"ENV",{"_240":241,"_242":243,"_244":16,"_245":246,"_247":248,"_249":250,"_251":252,"_253":254,"_255":256,"_257":258,"_259":260,"_261":262,"_263":264,"_265":266,"_267":268},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","fdb67791413f4386b4dbf18f354029a617f6160f","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]