// This approach will create a Tinder-like swiping interface for profiles. // We'll use React for the frontend, and Val Town's SQLite for persistence. // The server will serve the initial HTML and handle API requests for fetching and updating profiles. /** @jsxImportSource https://esm.sh/react */ import React, { useState, useEffect } from "https://esm.sh/react"; import { createRoot } from "https://esm.sh/react-dom/client"; import { motion, AnimatePresence } from "https://esm.sh/framer-motion"; function App() { const [profiles, setProfiles] = useState([]); const [currentIndex, setCurrentIndex] = useState(0); const [newProfile, setNewProfile] = useState({ username: '', image_url: '', link: '', followers: '' }); const [message, setMessage] = useState(''); useEffect(() => { fetchProfiles(); addSampleProfiles(); // Add this line }, []); const fetchProfiles = async () => { const response = await fetch('/profiles'); const data = await response.json(); setProfiles(data); }; const addSampleProfiles = async () => { await fetch('/add-sample-profiles', { method: 'POST', }); fetchProfiles(); // Fetch profiles again after adding samples }; const clearDatabase = async () => { await fetch('/clear-database', { method: 'POST' }); setProfiles([]); setCurrentIndex(0); setMessage('Database cleared'); }; const handleInputChange = (e) => { setNewProfile({ ...newProfile, [e.target.name]: e.target.value }); }; const addNewProfile = async (e) => { e.preventDefault(); const response = await fetch('/add-profile', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(newProfile), }); if (response.ok) { setMessage('New profile added'); setNewProfile({ username: '', image_url: '', link: '', followers: '' }); fetchProfiles(); } else { setMessage('Failed to add new profile'); } }; if (profiles.length === 0) { return

Loading profiles...

; } const handleSwipe = async (direction) => { if (currentIndex >= profiles.length) return; const profile = profiles[currentIndex]; const response = await fetch('/swipe', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ id: profile.id, direction }), }); setCurrentIndex(currentIndex + 1); if (direction === 'left') { setProfiles(profiles.filter(p => p.id !== profile.id)); } }; const currentProfile = profiles[currentIndex]; return (

Profile Swiper

{currentProfile && (

{ e.target.onerror = null; e.target.onerror = null; e.target.src = `https://via.placeholder.com/250?text=${currentProfile.username}`; }} />

{currentProfile.username}

Profile Link

Followers: {currentProfile.followers}

)}

Admin Controls

{message &&

{message}

}

View Source

); } function client() { createRoot(document.getElementById("root")).render(); } if (typeof document !== "undefined") { client(); } export default async function server(request: Request): Promise { const { sqlite } = await import("https://esm.town/v/stevekrouse/sqlite"); const SCHEMA_VERSION = 1; const KEY = new URL(import.meta.url).pathname.split("/").at(-1); await sqlite.execute(` CREATE TABLE IF NOT EXISTS ${KEY}_profiles_${SCHEMA_VERSION} ( id INTEGER PRIMARY KEY AUTOINCREMENT, image_url TEXT NOT NULL, username TEXT NOT NULL, link TEXT NOT NULL, followers INTEGER NOT NULL, status TEXT DEFAULT 'active' ) `); const url = new URL(request.url); if (url.pathname === '/profiles') { const profiles = await sqlite.execute(`SELECT * FROM ${KEY}_profiles_${SCHEMA_VERSION} WHERE status = 'active'`); return new Response(JSON.stringify(profiles.rows), { headers: { 'Content-Type': 'application/json' }, }); } if (url.pathname === '/swipe' && request.method === 'POST') { const { id, direction } = await request.json(); if (direction === 'left') { await sqlite.execute(`DELETE FROM ${KEY}_profiles_${SCHEMA_VERSION} WHERE id = ?`, [id]); } else { // For right swipes, we don't need to do anything as the profile stays in the database // You could add additional logic here if needed, e.g., to mark the profile as "liked" } return new Response('OK'); } if (url.pathname === '/add-sample-profiles' && request.method === 'POST') { const sampleProfiles = [ { image_url: 'http://placehold.co/250', username: 'user1', link: 'https://example.com/user1', followers: 1000 }, { image_url: 'http://placehold.co/250', username: 'user2', link: 'https://example.com/user2', followers: 2000 }, { image_url: 'http://placehold.co/250', username: 'user3', link: 'https://example.com/user3', followers: 3000 }, ]; for (const profile of sampleProfiles) { await sqlite.execute( `INSERT INTO ${KEY}_profiles_${SCHEMA_VERSION} (image_url, username, link, followers) VALUES (?, ?, ?, ?)`, [profile.image_url, profile.username, profile.link, profile.followers] ); } return new Response('Sample profiles added'); } if (url.pathname === '/clear-database' && request.method === 'POST') { await sqlite.execute(`DELETE FROM ${KEY}_profiles_${SCHEMA_VERSION}`); return new Response('Database cleared'); } if (url.pathname === '/add-profile' && request.method === 'POST') { const { username, image_url, link, followers } = await request.json(); if (!username || !image_url || !link || !followers) { return new Response('Missing required fields', { status: 400 }); } try { await sqlite.execute( `INSERT INTO ${KEY}_profiles_${SCHEMA_VERSION} (image_url, username, link, followers) VALUES (?, ?, ?, ?)`, [image_url, username, link, parseInt(followers)] ); return new Response('Profile added successfully'); } catch (error) { console.error('Error adding profile:', error); return new Response('Error adding profile', { status: 500 }); } } if (request.method !== 'GET') { return new Response('Method not allowed', { status: 405, }); } return new Response(` Profile Swiper

`, { headers: { "content-type": "text/html" }, }); } const css = ` body { font-family: system-ui, sans-serif; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; background-color: #f0f0f0; } .app { text-align: center; background-color: white; max-width: 400px; padding: 20px; border-radius: 10px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); } .profile-card { margin-bottom: 20px; } .profile-card-content { padding-top: 20px; } .profile-card img { width: 250px; height: 250px; object-fit: cover; border-radius: 10px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); margin-bottom: 10px; } .buttons { display: flex; justify-content: center; gap: 10px; margin-top: 20px; } button { padding: 10px 20px; font-size: 16px; cursor: pointer; border: none; border-radius: 5px; transition: background-color 0.3s; } button:hover { opacity: 0.8; } .admin-section { margin-top: 20px; border-top: 1px solid #ccc; padding-top: 20px; } .admin-section h2 { margin-bottom: 10px; } .admin-section form { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; } .admin-section input { padding: 5px; font-size: 14px; } .admin-section button { margin-top: 10px; } .admin-section p { margin-top: 10px; } @media (max-height: 800px) { body { align-items: flex-start; } } `;

Loading profiles...

Profile Swiper

{currentProfile.username}

Admin Controls

Add New Profile

SocialMediaDashboardV1