Val Town Code SearchReturn to Val Town

2import { cors } from "https://esm.sh/hono@3.12.6/cors";
3import { serveFile, readFile } from "https://esm.town/v/std/utils@71-main/index.ts";
4import { createTable, saveUrl, getOriginalUrl, getUrlStats, listUrls } from "./database/queries.ts";
5import { generateShortCode } from "../shared/utils.ts";
6
11app.use("/*", cors());
12
13// Initialize database on startup
14createTable().catch(console.error);
15
42    const shortCode = generateShortCode();
43    
44    // Save to database
45    await saveUrl(shortCode, url);
46    
91    const code = c.req.param("code");
92    
93    // Get the original URL from the database
94    const originalUrl = await getOriginalUrl(code);
95    

9- Responsive design with Tailwind CSS
10- Client-side routing with React Router 7
11- SQLite database for persistent storage
12
13## Project Structure
15```
16├── backend/
17│   ├── database/
18│   │   ├── migrations.ts    # Database schema setup
19│   │   └── queries.ts       # Database operations
20│   └── index.ts             # Hono API server
21├── frontend/
51
521. Users enter a URL to shorten (with optional custom short ID)
532. The backend creates a new entry in the SQLite database
543. When someone visits the shortened URL, the backend:
55   - Looks up the original URL in the database
56   - Increments the click counter
57   - Redirects to the original URL

20        <h1>notUber -- Its kinda like Lyft</h1>
21        <p>I built this as part of a larger project, as well a demo.</p>
22        <p>The stack consists of <a href="https://www.clerk.com">Clerk</a> for Auth, <a href="https://www.instantdb.com">InstantDB</a> for my database, and the <a href="https://developers.google.com/maps">Google maps api</a> for maps and routing etc.</p>
23        <p>All the vals are located <a href="https://vawogbemi-notuberfolder.web.val.run">here</a>.</p>
24        <h3>Getting Started</h3>

2import { cors } from "https://esm.sh/hono@3.12.0/cors";
3import { serveFile, readFile } from "https://esm.town/v/std/utils@85-main/index.ts";
4import { setupDatabase } from "./database/migrations.ts";
5import { 
6  createLink, 
8  incrementClickCount, 
9  getAllLinks 
10} from "./database/queries.ts";
11import { CreateLinkRequest } from "../shared/types.ts";
12
23app.use("/*", cors());
24
25// Setup the database on startup
26app.use("*", async (c, next) => {
27  try {
28    await setupDatabase();
29  } catch (error) {
30    console.error("Database setup error:", error);
31  }
32  return next();

4export const LINKS_TABLE = 'link_shortener_links_v1';
5
6export async function setupDatabase() {
7  // Create the links table if it doesn't exist
8  await sqlite.execute(`

13export const thinkTool = tool({
14  description:
15    "Use the tool to think about something. It will not obtain new information or change the database, but just append the thought to the log. Use it when complex reasoning or some cache memory is needed.",
16  parameters: z.object({
17    thought: z.string().describe("A thought to think about."),

16- [ ] Rebuild as React Router?
17- [ ] opentownie as a pr bot
18- [ ] give it the ability to see its own client-side and server-side logs by building a middleware that shoves them into a SQL light database date and then give it a tool to access them
19- [ ] do a browser use or screenshot thing to give it access to its own visual output
20- [ ] Have it default to creating a new branch off main and then embedding and iframe to the resulting http val and give you a link to a pr opening url

46    "slug": "codegen",
47    "link": "/blog/codegen",
48    "description": "Like Claude Artifacts, but with a backend and database",
49    "pubDate": "Thu, 22 Aug 2024 00:00:00 GMT",
50    "author": "JP Posma",

1---
2title: "Post-mortem: A Backward Incompatible Database Migration"
3description: Val runs failed due to a database migration that was not backward compatible
4pubDate: 2025-04-02T00:00:00.000Z
5author: Sophie Houser
6---
7
8Today at 10:11am we experienced a 12-minute outage, which caused HTTP vals to return 503 errors and other types of vals to fail. In the end, the root cause was a deployment timing issue where database migrations were deployed successfully, but our application code deployment hung for several minutes. The new database migrations were incompatible with the old application code and crashed the process. 
9
10We aim to make all database migrations maintain backward compatibility, but in this case, we only discovered through the delayed deployment feedback that the new migrations were not compatible with previous versions.
11
12## Timeline
27## Next Steps
28
29Reliability is important to us and we’ve taken steps to make sure this doesn’t happen again. We’ve added a test to ensure database migrations are backward compatible, which we’ll run before we deploy any new code that includes database migrations.

9- The **client-side entrypoint** is `/frontend/index.html`, which in turn imports `/frontend/index.tsx`, which in turn imports the React app from `/frontend/components/App.tsx`.
10
11[React Hono Example](https://www.val.town/x/stevekrouse/reactHonoExample) is a fuller featured example project, with a SQLite database table, queries, client-side CSS and a favicon, and some shared code that runs on both client and server.