Homework — build, deploy, inspect the key.

1. Environment. Create vite.config.ts, .env.example and .env (with your NASA key). Type the var in src/vite-env.d.ts. The app should load the menu via import.meta.env.VITE_NASA_API_KEY.
2. Build. npm run build. Make sure tsc runs first (a type error must stop the build). Get a dist/.
3. Find the key in the bundle. grep -r "DEMO_KEY" dist/assets/. Find it in plaintext. This is the crucial moment: see with your own eyes that a front-end key is public.
4. Deploy. Upload dist/ to a static host (GitHub Pages / Netlify / Railway). Set VITE_NASA_API_KEY in the host's dashboard and rebuild.
5. Understand the line. Write 3–4 sentences: why NASA's key can live in the front-end but a payment secret can't, and where the latter should live.

Required tests:

• Build test: a type error stops npm run build.
• Key test: grep finds the key in the dist/ bundle.

To submit: screenshots: (1) a successful build → dist/, (2) the grep result with the key in the bundle, (3) the deployed app working (a URL).

Next. The app is live on the internet. In lesson 20 — the capstone: extension challenges and closing the arc. You built the same app twice and watched the compiler find real bugs in working code. That IS the course.