Search

scientificCyanHarrier

@stevekrouse

Simple SQLite dashboard made by townie in this video: https://x.com/stevekrouse/status/1833577807093371325

HTTP

/** @jsxImportSource https://esm.sh/react */

import React, { useEffect, useState } from "https://esm.sh/react";

import { createRoot } from "https://esm.sh/react-dom/client";

function client() {

client();

.sidebar {

.sidebar h2 {

.sidebar ul {

.sidebar li {

bulletinBoard

@roramigator

// This app creates a community bulletin board where users can post messages with titles and view all posts.

HTTP

// Posts are automatically deleted after 24 hours. A basic spam filter is implemented to prevent abuse.

// The app uses SQLite for data storage and includes both server-side and client-side components.

/** @jsxImportSource https://esm.sh/react */

import React, { useEffect, useState } from "https://esm.sh/react";

import { createRoot } from "https://esm.sh/react-dom/client";

function App() {

</div>

function client() {

createRoot(document.getElementById("root")).render(<App />);

if (typeof document !== "undefined") { client(); }

async function server(request: Request): Promise<Response> {

leaderboardApp

@guillermodoghel

@jsxImportSource https://esm.sh/react

HTTP

/** @jsxImportSource https://esm.sh/react */

import React, { useEffect, useRef, useState } from "https://esm.sh/react";

import { createRoot } from "https://esm.sh/react-dom/client";

function App() {

</ul>

<button onClick={handleGoBack}>Reconsider Bid 🔄</button>

</div>

function client() {

createRoot(document.getElementById("root")).render(<App />);

if (typeof document !== "undefined") { client(); }

async function server(request: Request): Promise<Response> {

ForestryFinancialModel

@jbwinters

// Interactive forestry financial model simulator.

HTTP

// Interactive forestry financial model simulator.

// It will use React for the UI, recharts for data visualization, and custom slider components.

// The server will render the initial HTML, and the client-side JavaScript will handle the interactivity.

/** @jsxImportSource https://esm.sh/react */

import React, { useState } from "https://esm.sh/react";

import { createRoot } from "https://esm.sh/react-dom/client";

import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from "https://esm.sh/recharts";

</div>

function client() {

createRoot(document.getElementById("root")).render(<App />);

if (typeof document !== "undefined") {

client();

export default async function server(request: Request): Promise<Response> {

egoBooster

@stevekrouse

* This ego booster app takes a selfie, sends it to GPT-4o-mini for analysis, * and streams funny, specific compliments about the user's appearance. * We use the WebRTC API for camera access, the OpenAI API for image analysis, * and server-sent events for real-time streaming of compliments.

HTTP

* and server-sent events for real-time streaming of compliments.

/** @jsxImportSource https://esm.sh/react */

import React, { useState, useEffect, useRef } from "https://esm.sh/react";

import { createRoot } from "https://esm.sh/react-dom/client";

import { marked } from "https://esm.sh/marked";

</div>

function client() {

console.log("Client-side rendering started");

createRoot(document.getElementById("root")!).render(<App />);

if (typeof document !== "undefined") {

console.log("Document is defined, calling client()");

client();

} else {

console.log("Document is undefined, not calling client()");

async function server(request: Request): Promise<Response> {

zhangxiaoke

@webup

// This approach will create a personal card using React and Lucide React icons.

HTTP

// This approach will create a personal card using React and Lucide React icons.

// We'll use ESM imports for React and Lucide icons.

/** @jsxImportSource https://esm.sh/react */

import React from "https://esm.sh/react";

import { createRoot } from "https://esm.sh/react-dom/client";

import { FileText, Trophy, Briefcase, Palette, Book, MessageCircle } from "https://esm.sh/lucide-react";

// client-side only code

function client() {

if (typeof document !== "undefined") { client(); }

sqliteAdminDashboard

@stevekrouse

Simple SQLite dashboard made by townie in this video: https://x.com/stevekrouse/status/1833577807093371325

HTTP

// This val creates a SQLite dashboard admin panel with a sidebar for table names

// It uses React for the frontend and the Val Town SQLite API for database operations

/** @jsxImportSource https://esm.sh/react */

import React, { useEffect, useState } from "https://esm.sh/react";

import { createRoot } from "https://esm.sh/react-dom/client";

function client() {

client();

.sidebar {

.sidebar h2 {

shorturl

@cocodrilette

🔗 Short URL Generator A simple, serverless short URL generator built on Val Town using React and SQLite. Features 🌐 Generate short URLs for any long URL 💾 Persistent storage using SQLite 🚀 Instant redirection 🎨 Clean, minimal React interface How It Works Enter a long URL in the input field Click "Generate Short URL" Receive a unique, short URL Share and use the short URL, which will redirect to the original link Technical Details Built with React (client-side) Uses Val Town's SQLite for URL mapping storage Generates a random 5-character short code Serverless deployment on Val Town Example Long URL: `https://very-long-url.com/with-many-parameters` Short URL: `https://your-val-domain.web.val.run/ab123` Limitations Short codes are randomly generated (potential for rare collisions) No custom short code option URLs are stored indefinitely Source [View Source](${import.meta.url.replace("esm.town", "val.town")})

HTTP

# 🔗 Short URL Generator

A simple, serverless short URL generator built on Val Town using React and SQLite.

## Features

- 🚀 Instant redirection

- 🎨 Clean, minimal React interface

## How It Works

## Technical Details

- Built with React (client-side)

- Uses Val Town's SQLite for URL mapping storage

/** @jsxImportSource https://esm.sh/react@18.2.0 */

import React, { useState, useRef } from "https://esm.sh/react@18.2.0";

import { createRoot } from "https://esm.sh/react-dom@18.2.0/client";

function generateShortCode(length = 5) {

</div>

function client() {

createRoot(document.getElementById("root")).render(<App />);

if (typeof document !== "undefined") { client(); }

export default async function server(request: Request): Promise<Response> {

techstackinventory

@ejfox

* This val creates a tech stack inventory chooser using React and Tailwind CSS for styling. * It allows users to select technologies for different categories and displays the chosen stack.

HTTP

* This val creates a tech stack inventory chooser using React and Tailwind CSS for styling.

* It allows users to select technologies for different categories and displays the chosen stack.

/** @jsxImportSource https://esm.sh/react */

import React, { useState } from "https://esm.sh/react";

import { createRoot } from "https://esm.sh/react-dom/client";

const techCategories = {

frontend: ["React", "Vue", "Angular", "Svelte"],

backend: ["Node.js", "Python", "Ruby", "Java"],

<h2 className="text-xl font-semibold mb-2 text-gray-800">Your Chosen Stack:</h2>

{Object.entries(selectedTech).map(([category, tech]) => (

</div>

function client() {

createRoot(document.getElementById("root")).render(<App />);

if (typeof document !== "undefined") { client(); }

async function server(request: Request): Promise<Response> {

pythonLearningApp

@mrshorts

@jsxImportSource https://esm.sh/react@18.2.0

HTTP

/** @jsxImportSource https://esm.sh/react@18.2.0 */

import React, { useState } from "https://esm.sh/react@18.2.0";

import { createRoot } from "https://esm.sh/react-dom@18.2.0/client";

function PythonLearningApp() {

textDecoration: 'none'

function client() {

createRoot(document.getElementById("root")).render(<PythonLearningApp />);

if (typeof document !== "undefined") { client(); }

export default async function server(request: Request): Promise<Response> {

} catch (error) {

console.error('Server-side error:', error);

return new Response(JSON.stringify({

randoDisc

@ashryanio

@jsxImportSource https://esm.sh/react@18.2.0

1 2

HTTP

/** @jsxImportSource https://esm.sh/react@18.2.0 */

import { AnimatePresence, motion } from "https://esm.sh/framer-motion?deps=react@18.2.0,react-dom@18.2.0";

import { createRoot } from "https://esm.sh/react-dom@18.2.0/client";

import React, { useCallback, useEffect, useRef, useState } from "https://esm.sh/react@18.2.0";

function ErrorMessage({ message }) {

{/* Navigation buttons outside AnimatePresence */}

{backHistory.length > 0 && (

</div>

class ErrorBoundary extends React.Component {

constructor(props) {

</div>

function client() {

const rootElement = document.getElementById("root");

</ErrorBoundary>,

// Ensure client() runs after the DOM is fully loaded

if (typeof document !== "undefined") {

document.addEventListener("DOMContentLoaded", client);

export default async function server(request: Request): Promise<Response> {

dateme_router_hydrated

@stevekrouse

@jsxImportSource https://esm.sh/react@18.2.0

Script

/** @jsxImportSource https://esm.sh/react@18.2.0 */

import * as ReactDOM from "https://esm.sh/react-dom@18.2.0/client";

} from "https://esm.sh/react-router-dom@6.23.0?deps=react@18.2.0,react-dom@18.2.0";

import * as React from "https://esm.sh/react@18.2.0";

function makeClientSide(routes) {

children: route.children ? makeClientSide(route.children) : undefined,

const router = createBrowserRouter(makeClientSide(routes), {

ReactDOM.hydrateRoot(

<React.StrictMode>

</React.StrictMode>,

react_example

@pomdtr

* @title Running React on the Client * @description Vals can also be used to host client-side code! * @preview https://pomdtr-react_example_server.web.val.run * @include pomdtr/react_example_client * @resource [React - Quick Start](https://react.dev/learn)

HTTP

* @title Running React on the Client

* @description Vals can also be used to host client-side code!

* @preview https://pomdtr-react_example_server.web.val.run

* @include pomdtr/react_example_client

* @resource [React - Quick Start](https://react.dev/learn)

// The server response includes a script referencing the client val

export const server = (req) =>

<head>

<title>React Example</title>

</body>

homepage

@csl_

Got a domain for vals; needs a homepage; minimal effort

HTTP

* The front of the card displays Carl's name and an animated subheading, while the back shows a humorous message and links.

/** @jsxImportSource https://esm.sh/react */

import React, { useEffect, useState } from "https://esm.sh/react";

import { createRoot } from "https://esm.sh/react-dom/client";

function App() {

"hey, this isn't a bouldering gym!",

"should be outside",

"an AI wrote these",

</div>

function client() {

createRoot(document.getElementById("root")).render(<App />);

if (typeof document !== "undefined") { client(); }

async function server(request: Request): Promise<Response> {

domainSanta

@karkowg

domainSanta Send your domain wishes to Domain Santa! 🌐🎅 https://domainsanta.christmas/

HTTP

/** @jsxImportSource https://esm.sh/react */

import React, { useEffect, useState } from "https://esm.sh/react";

import { createRoot } from "https://esm.sh/react-dom/client";

import { letterVariations } from "https://esm.town/v/karkowg/domainSantaLetterVariations";

href="https://sideprojectpodcast.com/episodes/linear-poker-with-chris-morrell/transcript#t=54m56s"

className="text-blue-600 hover:underline"

</div>

function client() {

createRoot(document.getElementById("root")).render(<App />);

if (typeof document !== "undefined") {

client();

export default async function server(request: Request): Promise<Response> {

1 2

4 5

…

249