/** * This dating app allows users to upload photos of their bedside table and phone case. * It uses Val Town's SQLite for data persistence and blob storage for image uploads. * The app includes a simple matching algorithm based on common items in bedside tables. */ /** @jsxImportSource https://esm.sh/react */ import React, { useState, useEffect } from "https://esm.sh/react"; import { createRoot } from "https://esm.sh/react-dom/client"; function App() { const [user, setUser] = useState(null); const [matches, setMatches] = useState([]); const [bedsideImage, setBedsideImage] = useState(null); const [phoneCaseImage, setPhoneCaseImage] = useState(null); useEffect(() => { fetchUser(); fetchMatches(); }, []); const fetchUser = async () => { const response = await fetch('/user'); if (response.ok) { const userData = await response.json(); setUser(userData); setBedsideImage(userData.bedsideImage); setPhoneCaseImage(userData.phoneCaseImage); } }; const fetchMatches = async () => { const response = await fetch('/matches'); if (response.ok) { const matchesData = await response.json(); setMatches(matchesData); } }; const handleImageUpload = async (event, type) => { const file = event.target.files[0]; const formData = new FormData(); formData.append('image', file); formData.append('type', type); const response = await fetch('/upload', { method: 'POST', body: formData, }); if (response.ok) { const result = await response.json(); if (type === 'bedside') { setBedsideImage(result.imageUrl); } else { setPhoneCaseImage(result.imageUrl); } } }; return (

Bedside & Case Dating App

{user ? (

Welcome, {user.name}!

Your Bedside Table

{bedsideImage ? ( Bedside Table

) : ( handleImageUpload(e, 'bedside')} /> )}

Your Phone Case

{phoneCaseImage ? ( Phone Case

) : ( handleImageUpload(e, 'phonecase')} /> )}

Your Matches

{matches.map((match) => (

{match.name}

))}

) : (

)}

); } function client() { createRoot(document.getElementById("root")).render(); } if (typeof document !== "undefined") { client(); } async function server(request: Request): Promise { const { blob } = await import("https://esm.town/v/std/blob"); const { sqlite } = await import("https://esm.town/v/stevekrouse/sqlite"); const KEY = new URL(import.meta.url).pathname.split("/").at(-1); // Create tables if they don't exist await sqlite.execute(` CREATE TABLE IF NOT EXISTS ${KEY}_users ( id INTEGER PRIMARY KEY AUTOINCREMENT, name TEXT NOT NULL, bedsideImage TEXT, phoneCaseImage TEXT ) `); const url = new URL(request.url); const path = url.pathname; if (path === '/user') { // For simplicity, we're using a hardcoded user. In a real app, you'd implement proper authentication. const user = { id: 1, name: "John Doe", bedsideImage: "https://maxm-imggenurl.web.val.run/a-simple-bedside-table-with-a-lamp-and-book", phoneCaseImage: "https://maxm-imggenurl.web.val.run/a-plain-black-phone-case" }; return new Response(JSON.stringify(user), { headers: { 'Content-Type': 'application/json' } }); } if (path === '/matches') { // In a real app, you'd implement a matching algorithm. Here we're returning dummy data. const matches = [ { id: 2, name: "Jane Smith", bedsideImage: "https://maxm-imggenurl.web.val.run/a-bedside-table-with-plants-and-a-clock", phoneCaseImage: "https://maxm-imggenurl.web.val.run/a-colorful-floral-phone-case" }, { id: 3, name: "Bob Johnson", bedsideImage: "https://maxm-imggenurl.web.val.run/a-messy-bedside-table-with-many-gadgets", phoneCaseImage: "https://maxm-imggenurl.web.val.run/a-rugged-outdoor-phone-case" } ]; return new Response(JSON.stringify(matches), { headers: { 'Content-Type': 'application/json' } }); } if (path === '/upload' && request.method === 'POST') { const formData = await request.formData(); const image = formData.get('image') as File; const type = formData.get('type') as string; if (image && type) { const imageBuffer = await image.arrayBuffer(); const imageKey = `${KEY}_${type}_${Date.now()}`; await blob.set(imageKey, imageBuffer); const imageUrl = `https://val.town/v/${KEY}/blobs/${imageKey}`; // Update user's image in the database await sqlite.execute(` UPDATE ${KEY}_users SET ${type === 'bedside' ? 'bedsideImage' : 'phoneCaseImage'} = ? WHERE id = 1 `, [imageUrl]); return new Response(JSON.stringify({ imageUrl }), { headers: { 'Content-Type': 'application/json' } }); } return new Response('Invalid upload', { status: 400 }); } return new Response(` Bedside & Case Dating App

`, { headers: { "content-type": "text/html" }, }); } const css = ` body { font-family: Arial, sans-serif; max-width: 800px; margin: 0 auto; padding: 20px; background-color: #f0f0f0; } .app { background-color: white; padding: 20px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); } h1, h2, h3 { color: #333; } .image-upload { margin-bottom: 20px; } .uploaded-image, .match-image { max-width: 200px; max-height: 200px; object-fit: cover; border-radius: 4px; margin-top: 10px; } .matches { display: flex; flex-wrap: wrap; gap: 20px; } .match { border: 1px solid #ddd; padding: 10px; border-radius: 4px; } footer { margin-top: 20px; text-align: center; } footer a { color: #666; text-decoration: none; } footer a:hover { text-decoration: underline; } `; export default server;

eldestBronzePtarmigan

Versions

v0