This app is a starter template for client-side React and server-side Hono.

• Remix this starter template on the top right to get started.

• The entrypoint is /backend/index.ts. That's the backend HTTP server, which also serves the all the frontend assets.

• 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.

React Hono Example 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.

Let's learn the Val Town basics by doing. You'll edit code directly and use the Live Progress Tracker to see results and guide your next steps.

➡️ First: Open your Live Progress Tracker in a new browser tab. (Replace YOUR_ENDPOINT_URL with your actual endpoint link from the top-right). Keep this tab open!

Step 1: Launch Your Live App 🚀 (Already Done!)

• How: You just opened the Progress Tracker! That page is served live by the backend/index.ts file in this project.
• Concept: Val Town instantly deploys your code as a web server.
• See: The tracker shows "Step 1" checked.

Step 2: Make Your First Edit ✏️

• Where: In the Val Town editor, open the file backend/index.ts.
• Find: Locate the line near the top starting with const GREETING =.
• ACTION: Change the text within the quotes (e.g., "Hello, [Your Name]!").
• ACTION: Click the green "Save" button (top-right of the editor).
• ACTION: Go to your Progress Tracker browser tab and Refresh it.
• See: The greeting displayed on the tracker page should update, and "Step 2" will be checked!
• Concept: Edits you save are instantly live on the web.

Step 3: Save Data with Blob Storage 💾

Let's add a persistent visit counter.

• Where: Still in backend/index.ts.
• Find: Locate the line const enableBlobCounter = false;.
• ACTION: Change false to true.
• ACTION: Click "Save".
• ACTION: Refresh your Progress Tracker tab twice.
• See: A "Visits" counter should appear and increment. "Step 3" is now checked.
• Concept: std/blob provides easy, free key-value storage for persisting data.

Step 4: Send a Notification Email ✉️

Val Town makes sending emails simple.

• Where: Still in backend/index.ts.
• Find: Locate the line const enableTestEmail = false;.
• ACTION: Change false to true.
• ACTION: Click "Save".
• ACTION: Refresh your Progress Tracker tab.
• See: "Step 4" is checked, and a message confirms an email was sent (check your inbox!).
• Concept: std/email lets you easily send emails from your vals.

Step 5: Learn About Scheduled Tasks (Cron Vals) ⏰

Want to run code automatically, like sending that email every morning?

• How: Val Town uses Cron Vals for scheduled tasks. They are separate from the HTTP vals like this one.
• ACTION: Go to your Progress Tracker tab. Find "Step 5" and click the "Mark as Learned & Read Guide" button.
• See: This will check off "Step 5" in the tracker and open the official "Your First Cron Val" guide in a new tab for you to explore later.
• Concept: Cron Vals enable powerful automation on Val Town.

(More steps can be added later!)