YouTube Search & Save

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_167":168,"_169":170},"routes/_app.x.$handle.$name",{"_11":12,"_13":14,"_15":16,"_18":19,"_17":-7,"_126":-5,"_20":127,"_22":128,"_129":130,"_131":132,"_25":133,"_24":-5,"_134":-5,"_135":-5,"_136":54,"_137":138,"_139":45,"_140":-5,"_141":-5,"_142":143},"routes/_app.x.$handle.$name.branch.$branch.code.$",{"_11":12,"_13":14,"_15":16,"_17":-7,"_18":19,"_20":21,"_22":23,"_24":-7,"_25":26,"_27":-5,"_28":-5,"_29":-5,"_30":-5,"_31":-5},"handle","AshishChaudhary10","name","YouTubeSearchApp","branchName","main","version","path","","project",{"_34":73,"_13":14,"_46":74,"_75":-5,"_76":54,"_77":78,"_79":78,"_80":-5,"_81":-5,"_82":83,"_84":38,"_85":45,"_86":-5,"_87":-5,"_88":61,"_89":90,"_91":-5,"_92":-5,"_93":-5,"_94":-5,"_95":96,"_97":96,"_98":99,"_100":99,"_101":99,"_102":96,"_103":96,"_104":105,"_106":107,"_108":109,"_110":54},"tree",[64,65],"file","contents",[32,33],"upstream","pull","ahead","behind","envVars",{"_34":57,"_13":58,"_37":59,"_39":-5,"_40":41,"_42":48,"_44":45,"_46":60,"_17":61,"_49":24,"_51":62,"_53":54,"_55":-5,"_18":63},{"_34":35,"_13":36,"_37":38,"_39":-5,"_40":41,"_42":43,"_44":45,"_46":47,"_17":48,"_49":50,"_51":52,"_53":54,"_55":-5,"_18":56},"id","1dd9bcd6-2775-11f0-b46e-569c3dd06744","main.tsx","fileId","1dd36034-2775-11f0-b46e-569c3dd06744","parentId","branchId","1dd0e318-2775-11f0-b46e-569c3dd06744","branchVersion",2,"latest",true,"createdAt",["D",1737707883638],1,"fileType","http","content","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useEffect } from \"https://esm.sh/react@18.2.0\";\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\n\n// Utility function for password hashing\nasync function hashPassword(password: string) {\n const encoder = new TextEncoder();\n const data = encoder.encode(password);\n const hash = await crypto.subtle.digest('SHA-256', data);\n return Array.from(new Uint8Array(hash))\n .map(b => b.toString(16).padStart(2, '0'))\n .join('');\n}\n\nfunction App() {\n const [user, setUser] = useState(null);\n const [query, setQuery] = useState(\"\");\n const [videos, setVideos] = useState([]);\n const [error, setError] = useState(null);\n const [view, setView] = useState('search'); // 'search', 'login', 'register', 'profile'\n const [email, setEmail] = useState(\"\");\n const [password, setPassword] = useState(\"\");\n const [savedVideos, setSavedVideos] = useState([]);\n\n // Check login status on initial load\n useEffect(() => {\n checkLoginStatus();\n }, []);\n\n const checkLoginStatus = async () => {\n try {\n const response = await fetch('/check-login');\n const data = await response.json();\n if (data.loggedIn) {\n setUser(data.user);\n fetchSavedVideos();\n }\n } catch (err) {\n console.error(\"Login check failed\");\n }\n };\n\n const searchVideos = async () => {\n try {\n const response = await fetch(`/search?q=${encodeURIComponent(query)}`);\n const data = await response.json();\n setVideos(data.items || []);\n setError(null);\n } catch (err) {\n setError(\"Failed to fetch videos\");\n setVideos([]);\n }\n };\n\n const login = async (e) => {\n e.preventDefault();\n try {\n const response = await fetch('/login', {\n method: 'POST',\n headers: { 'Content-Type': 'application/json' },\n body: JSON.stringify({ email, password })\n });\n const data = await response.json();\n if (data.success) {\n setUser(data.user);\n setView('search');\n fetchSavedVideos();\n } else {\n setError(data.message);\n }\n } catch (err) {\n setError(\"Login failed\");\n }\n };\n\n const register = async (e) => {\n e.preventDefault();\n try {\n const response = await fetch('/register', {\n method: 'POST',\n headers: { 'Content-Type': 'application/json' },\n body: JSON.stringify({ email, password })\n });\n const data = await response.json();\n if (data.success) {\n setUser(data.user);\n setView('search');\n } else {\n setError(data.message);\n }\n } catch (err) {\n setError(\"Registration failed\");\n }\n };\n\n const logout = async () => {\n try {\n await fetch('/logout', { method: 'POST' });\n setUser(null);\n setView('login');\n } catch (err) {\n setError(\"Logout failed\");\n }\n };\n\n const saveVideo = async (video) => {\n try {\n const response = await fetch('/save-video', {\n method: 'POST',\n headers: { 'Content-Type': 'application/json' },\n body: JSON.stringify(video)\n });\n const data = await response.json();\n if (data.success) {\n fetchSavedVideos();\n }\n } catch (err) {\n setError(\"Failed to save video\");\n }\n };\n\n const fetchSavedVideos = async () => {\n try {\n const response = await fetch('/saved-videos');\n const data = await response.json();\n setSavedVideos(data.videos || []);\n } catch (err) {\n setError(\"Failed to fetch saved videos\");\n }\n };\n\n const renderContent = () => {\n if (!user) {\n return view === 'login' ? (\n

Login

\n \n

\n ) : (\n

Register

\n \n

\n );\n }\n\n if (view === 'profile') {\n return (\n

Profile

Email: {user.email}

Saved Videos

\n {savedVideos.map((video) => (\n

{video.title}

\n \n Watch Video\n \n

\n ))}\n

\n );\n }\n\n return (\n

\n setQuery(e.target.value)}\n placeholder=\"Search YouTube videos...\"\n />\n \n

\n {error &&

{error}

}\n

\n {videos.map((video) => (\n

{video.snippet.title}

\n \n Watch Video\n \n \n

\n ))}\n

\n );\n };\n\n return (\n

\n {user && (\n \n )}\n {renderContent()}\n \n View Source\n \n

\n );\n}\n\nfunction client() {\n createRoot(document.getElementById(\"root\")).render();\n}\nif (typeof document !== \"undefined\") { client(); }\n\nexport default async function server(request: Request): Promise {\n const { sqlite } = await import(\"https://esm.town/v/stevekrouse/sqlite\");\n const KEY = \"YouTubeSearchApp\";\n\n // Create tables if they don't exist\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS ${KEY}_users (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n email TEXT UNIQUE NOT NULL,\n password TEXT NOT NULL\n )\n `);\n\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS ${KEY}_saved_videos (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n user_id INTEGER NOT NULL,\n video_id TEXT NOT NULL,\n title TEXT NOT NULL,\n thumbnail TEXT NOT NULL,\n FOREIGN KEY(user_id) REFERENCES ${KEY}_users(id)\n )\n `);\n\n const url = new URL(request.url);\n\n // User Registration\n if (url.pathname === '/register' && request.method === 'POST') {\n const { email, password } = await request.json();\n const hashedPassword = await hashPassword(password);\n\n try {\n await sqlite.execute(\n `INSERT INTO ${KEY}_users (email, password) VALUES (?, ?)`, \n [email, hashedPassword]\n );\n return new Response(JSON.stringify({ \n success: true, \n user: { email } \n }), { \n headers: { 'Content-Type': 'application/json' } \n });\n } catch (error) {\n return new Response(JSON.stringify({ \n success: false, \n message: \"Email already exists\" \n }), { \n status: 400,\n headers: { 'Content-Type': 'application/json' } \n });\n }\n }\n\n // User Login\n if (url.pathname === '/login' && request.method === 'POST') {\n const { email, password } = await request.json();\n const hashedPassword = await hashPassword(password);\n\n const result = await sqlite.execute(\n `SELECT * FROM ${KEY}_users WHERE email = ? AND password = ?`, \n [email, hashedPassword]\n );\n\n if (result.rows.length > 0) {\n return new Response(JSON.stringify({ \n success: true, \n user: { email } \n }), { \n headers: { 'Content-Type': 'application/json' } \n });\n } else {\n return new Response(JSON.stringify({ \n success: false, \n message: \"Invalid credentials\" \n }), { \n status: 401,\n headers: { 'Content-Type': 'application/json' } \n });\n }\n }\n\n // Check Login Status\n if (url.pathname === '/check-login') {\n // In a real app, you'd use sessions or tokens\n return new Response(JSON.stringify({ \n loggedIn: false \n }), { \n headers: { 'Content-Type': 'application/json' } \n });\n }\n\n // Logout\n if (url.pathname === '/logout' && request.method === 'POST') {\n // In a real app, you'd invalidate the session\n return new Response(JSON.stringify({ success: true }), { \n headers: { 'Content-Type': 'application/json' } \n });\n }\n\n // Save Video\n if (url.pathname === '/save-video' && request.method === 'POST') {\n const video = await request.json();\n // Note: This is a mock implementation. In a real app, you'd get the user ID from a session\n const userId = 1;\n\n try {\n await sqlite.execute(\n `INSERT INTO ${KEY}_saved_videos (user_id, video_id, title, thumbnail) VALUES (?, ?, ?, ?)`, \n [userId, video.id, video.title, video.thumbnail]\n );\n return new Response(JSON.stringify({ success: true }), { \n headers: { 'Content-Type': 'application/json' } \n });\n } catch (error) {\n return new Response(JSON.stringify({ \n success: false, \n message: \"Failed to save video\" \n }), { \n status: 500,\n headers: { 'Content-Type': 'application/json' } \n });\n }\n }\n\n // Fetch Saved Videos\n if (url.pathname === '/saved-videos') {\n // Note: This is a mock implementation. In a real app, you'd get the user ID from a session\n const userId = 1;\n\n const result = await sqlite.execute(\n `SELECT * FROM ${KEY}_saved_videos WHERE user_id = ?`, \n [userId]\n );\n\n return new Response(JSON.stringify({ \n videos: result.rows \n }), { \n headers: { 'Content-Type': 'application/json' } \n });\n }\n\n // YouTube Search (unchanged from previous implementation)\n if (url.pathname === \"/search\") {\n const query = url.searchParams.get(\"q\") || \"\";\n \n if (!query) {\n return new Response(JSON.stringify({ items: [] }), {\n headers: { \"Content-Type\": \"application/json\" }\n });\n }\n\n try {\n const apiResponse = await fetch(\n `https://youtube.googleapis.com/youtube/v3/search?part=snippet&maxResults=12&q=${encodeURIComponent(query)}&type=video&key=AIzaSyClRzDqDh5MsXwnCWi0kOiiBivP6JsSyBw`\n );\n const data = await apiResponse.json();\n return new Response(JSON.stringify(data), {\n headers: { \"Content-Type\": \"application/json\" }\n });\n } catch (error) {\n return new Response(JSON.stringify({ error: \"Search failed\" }), {\n status: 500,\n headers: { \"Content-Type\": \"application/json\" }\n });\n }\n }\n\n // Main HTML response\n return new Response(`\n \n \n YouTube Search & Save\n \n \n \n

\n \n \n \n \n `, {\n headers: { \"Content-Type\": \"text/html\" }\n });\n}\n\nconst css = `\nbody {\n font-family: Arial, sans-serif;\n margin: 0;\n padding: 0;\n background-color: #f4f4f4;\n}\n.app {\n max-width: 1200px;\n margin: 0 auto;\n}\nnav {\n display: flex;\n justify-content: space-between;\n align-items: center;\n background-color: #ff0000;\n color: white;\n padding: 10px 20px;\n}\nnav button {\n background: none;\n border: none;\n color: white;\n cursor: pointer;\n margin-right: 10px;\n}\nnav button.active {\n text-decoration: underline;\n}\n.nav-right {\n display: flex;\n align-items: center;\n}\n.nav-right span {\n margin-right: 15px;\n}\n.container {\n padding: 20px;\n}\n.search-container {\n display: flex;\n margin-bottom: 20px;\n}\ninput {\n flex-grow: 1;\n padding: 10px;\n font-size: 16px;\n border: 1px solid #ddd;\n}\nbutton {\n padding: 10px 20px;\n background-color: #ff0000;\n color: white;\n border: none;\n cursor: pointer;\n}\n.video-grid {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));\n gap: 20px;\n}\n.video-card {\n background: white;\n border-radius: 8px;\n box-shadow: 0 2px 5px rgba(0,0,0,0.1);\n overflow: hidden;\n}\n.video-card img {\n width: 100%;\n height: 200px;\n object-fit: cover;\n}\n.video-card h3 {\n padding: 10px;\n margin: 0;\n font-size: 14px;\n}\n.video-actions {\n display: flex;\n}\n.video-actions a, .video-actions button {\n flex: 1;\n display: block;\n text-align: center;\n text-decoration: none;\n padding: 10px;\n}\n.auth-form {\n max-width: 400px;\n margin: 50px auto;\n padding: 20px;\n background: white;\n border-radius: 8px;\n box-shadow: 0 2px 5px rgba(0,0,0,0.1);\n}\n.auth-form input {\n width: 100%;\n margin-bottom: 10px;\n padding: 10px;\n}\n.auth-form p {\n text-align: center;\n color: blue;\n cursor: pointer;\n}\n.error {\n color: red;\n text-align: center;\n margin-bottom: 20px;\n}\n.source-link {\n display: block;\n text-align: center;\n margin-top: 20px;\n color: #666;\n}\n.profile {\n padding: 20px;\n}\n`;","deleted",false,"label",[36],"1dd369c6-2775-11f0-b46e-569c3dd06744","README.md","1dd36a48-2775-11f0-b46e-569c3dd06744",["D",1737707679271],0,"YouTube all features \n",[58],{"_34":57,"_13":58,"_37":59,"_39":-5,"_40":41,"_42":48,"_44":45,"_46":70,"_17":61,"_49":24,"_51":62,"_53":54,"_55":-5,"_67":71,"_18":72},{"_34":35,"_13":36,"_37":38,"_39":-5,"_40":41,"_42":43,"_44":45,"_46":66,"_17":48,"_49":50,"_51":52,"_53":54,"_55":-5,"_67":68,"_18":69},["D",1737707883638],"children",[],[36],["D",1737707679271],[],[58],"1dd09796-2775-11f0-b46e-569c3dd06744",["D",1746204441333],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","imageUrl","userId","6f6f8450-da21-11ef-8f44-4f4de3a875c2","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount","orgId","2991e310-346e-4b02-a025-14bb47c96ab4","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_11":12,"_125":121},"org",{"_11":12,"_119":-5,"_120":121,"_82":83,"_122":123,"_124":54},"branch",{"_17":43,"_13":16,"_34":41,"_111":73,"_112":-5,"_113":-5,"_114":-5,"_115":-5,"_116":-5,"_117":14,"_118":12},"isOwned","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoiZGVmYXVsdCIsImlpZCI6Imluc18yTm10cGhQUklwU0tqZHNiOHNnNGd2ZjJURFUiLCJyaWQiOiJ1c2VyXzJzNDVxTUJaaGJlZzNTUGtoVEFlSTZGQXZLMSJ9","tier","free","canRestrictVals","profileImageUrl","adoptOrgId",{"_34":73,"_13":14,"_46":163,"_75":-5,"_76":54,"_77":78,"_79":78,"_80":-5,"_81":-5,"_82":83,"_84":38,"_85":45,"_86":-5,"_87":-5,"_88":61,"_89":90,"_91":-5,"_92":-5,"_93":-5,"_94":-5,"_95":96,"_97":96,"_98":99,"_100":99,"_101":99,"_102":96,"_103":96,"_104":164,"_106":165,"_108":166,"_110":54},[157,158],"files",[157,158],"counts",{"_148":61,"_149":48,"_150":61,"_31":151,"_152":153},[144,145],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_34":57,"_13":58,"_37":59,"_39":-5,"_40":41,"_42":48,"_44":45,"_46":60,"_17":61,"_49":24,"_51":62,"_53":54,"_55":-5,"_18":147},{"_34":35,"_13":36,"_37":38,"_39":-5,"_40":41,"_42":43,"_44":45,"_46":47,"_17":48,"_49":50,"_51":52,"_53":54,"_55":-5,"_18":146},[36],[58],"pulls","branches","forks",{"_154":61,"_156":61},"connections",{"_154":61,"_155":61},"count","unfilledCount","emptyCount",{"_34":57,"_13":58,"_37":59,"_39":-5,"_40":41,"_42":48,"_44":45,"_46":70,"_17":61,"_49":24,"_51":62,"_53":54,"_55":-5,"_67":161,"_18":162},{"_34":35,"_13":36,"_37":38,"_39":-5,"_40":41,"_42":43,"_44":45,"_46":66,"_17":48,"_49":50,"_51":52,"_53":54,"_55":-5,"_67":159,"_18":160},[],[36],[],[58],["D",1746204441333],{"_11":12,"_125":121},{"_11":12,"_119":-5,"_120":121,"_82":83,"_122":123,"_124":54},{"_17":43,"_13":16,"_34":41,"_111":73,"_112":-5,"_113":-5,"_114":-5,"_115":-5,"_116":-5,"_117":14,"_118":12},"ctx",{"_104":-5,"_141":200,"_201":202,"_203":204,"_205":54,"_206":54,"_207":54,"_208":45,"_209":-5,"_210":-7,"_211":-7,"_212":61,"_213":54,"_214":54,"_215":-5,"_216":54,"_217":54,"_218":54,"_219":-5},"ENV",{"_171":172,"_173":174,"_175":16,"_176":177,"_178":179,"_180":181,"_182":183,"_184":185,"_186":187,"_188":189,"_190":191,"_192":193,"_194":195,"_196":197,"_198":199},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","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"]

Code