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 using the editor right here 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 button near the top-right of this editor pane labeled "Open HTTP endpoint"). 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.
• Editor UI: Notice the File Tree on the left? You can click files like README.md (this file!) or backend/index.ts to open them in the editor.
• 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: Using the File Tree on the left, make sure backend/index.ts is open in the editor.
• 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). Wait for the confirmation checkmark.
• 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. The Live Preview (your Tracker tab) always reflects the last saved version.

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 checked.
• Editor UI: Need to debug? Check the "Logs" pane at the bottom of the editor window. Add console.log("My message") lines in your code, Save, and reload the tracker to see messages appear there.
• 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 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 Val Town account email!).
• 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. You create them via the "+" button (top-right, near your profile picture).
• 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.

Beyond the Basics: Exploring the UI ✨

You've got the fundamentals! As you explore Val Town further, notice these UI elements:

• Environment Variables: Need to store secrets like API keys securely? Click "Environment variables" in the left sidebar. Use Deno.env.get("MY_SECRET_NAME") in your code to access them. Never paste secrets directly into your code!
• Collaboration: See the "Like" (❤️) button? Use it to appreciate others' vals! The "Remix" button (top-right) lets you copy any public val to your own account to experiment. You can also leave comments on vals.
• Settings: The "Settings" section in the left sidebar lets you control val privacy, API permissions, and more.

You're ready to start building! Try modifying this project further, or create a new val using the "+" button.

(More steps can be added later!)