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 Val Town by doing, right here in the editor.

➡️ Get Started:

1. Make sure you can see the Editor Pane (where this text is).
2. Make sure you can see the Preview Pane on the right.
   • (If you don't see it, click the "HTTP" tab above the editor).
   • The Preview Pane shows your Live App and Progress Tracker. You'll interact with it directly!

Keep this README.md open for guidance.

Step 1: Launch Live Preview 🚀 (Already Done!)

• How: You're looking at the Preview Pane! It's live code served by backend/index.ts.
• Concept: Instant deployment, zero config.
• See: "Step 1" is checked in the Preview Pane.

Step 2: Edit & See Live Changes ✏️

1. In the Editor, open backend/index.ts (use the File Tree on the left).
2. Find const GREETING = ... near the top.
3. ACTION: Change the text inside the quotes.
4. ACTION: Click the green Save button (top-right of editor).
5. ACTION: Click the Refresh button (🔄) inside the Preview Pane.
6. See: The "Greeting" in the Preview Pane updates, and "Step 2" gets checked!
7. Concept: Edit → Save → Refresh Preview = Instant Updates.

Step 3: Save Data (Blob Storage) 💾

1. In backend/index.ts, find const enableBlobCounter = false;.
2. ACTION: Change false to true.
3. ACTION: Click Save.
4. ACTION: Refresh the Preview Pane twice.
5. See: A "Visits" counter appears and increments in the Preview Pane. Step 3 is checked.
6. Editor UI Tip: Need to debug? Add console.log("...") in your code, Save, refresh the Preview Pane, then check the Logs pane at the bottom of the editor.
7. Concept: std/blob = Easy data persistence.

Step 4: Send an Email ✉️

1. In backend/index.ts, find enableTestEmail = false;.
2. ACTION: Change false to true.
3. ACTION: Click Save.
4. ACTION: Refresh the Preview Pane.
5. See: "Step 4" checked in the Preview Pane. Check your Val Town account email!
6. Concept: std/email = Easy email notifications.

Step 5: Learn About Automation (Cron) ⏰

1. ACTION: In the Preview Pane, find and click the "Learn Cron" button.
2. See: Step 5 gets checked in the Preview Pane, and the official Cron guide opens in a new tab (perfect for deeper learning later).
3. Concept: Use Cron Vals (created via the "+" button near your profile pic) to run code on a schedule.

Next Steps & UI Tour ✨

You've covered the core magic! Keep exploring:

• Secrets: Use Environment Variables (left sidebar) for API keys. Access with Deno.env.get("...").
• Collaboration: Like (❤️), Remix, and Comment on vals.
• ⚙️ Settings: Control privacy, permissions, etc.

Modify this project, or click "+" (top-right) > Val to create something new!

(More steps can be added later!)