MODULE 12 – Here we go! Your first guided project

In 30 seconds

This is the moment of truth! We’ll build together a “Pet Care Tracker”: an app to manage your pets’ profiles, track their mood, and remember vet visits. It won’t be the usual todo list or expense tracker, but something you’ll actually want to show off! You’ll use EVERYTHING you’ve learned: variables, arrays, IndexedDB, photo uploads, APIs, PWA… but most importantly, you’ll learn to direct AI like a true director. From brainstorming to deploying on Netlify, step by step. And yes, in the end you’ll have a real app you can install on your phone!

The jargon of this module (in brief)

• MVP = Minimum Viable Product (the minimum version that works)
• CRUD = Create, Read, Update, Delete (the 4 basic operations with data)
• Base64 = A way to transform images into a long text string
• Thread = A conversation with AI (when it’s too long, better to open a new one)
• Cache = Temporary memory (to avoid requesting data every time)
• Vanilla = When you use a “pure” language, without external libraries or frameworks (just the base language).
• Pattern = A recurring model, an already tested solution, to a common problem in software development.

🧠 We’ll see other terms along the way (and there’s always the Glossary available).

The director metaphor

Until now you’ve learned individual “movie tricks”: lights (HTML), set design (CSS), special effects (JavaScript). Now it’s time to shoot your first complete film!

But here’s the twist: you are the director, AI is the crew.

• You: “I want a scene with the sunset”
• AI crew: Positions lights, camera, actors
• You: “OK, but make the sunset more orange”
• AI crew: Adjusts everything
• You: “Perfect! Next scene…”

Remember: You don’t need to know how to use every piece of equipment. You need to have the vision and know how to communicate it!

The project: Pet Care Tracker 🐾

What exactly will we build?

An app that:

1. Manages pet profiles (with photos!)
2. Tracks daily mood with emoji
3. Shows weather when you record mood
4. Reminds deadlines (vaccines, visits, expirations)
5. Installs on your phone
6. Works offline as a PWA

Why this app specifically?

• Real problems: Photo uploads, data saving, date calculations
• Showable: “Look at the app I made!”
• Really useful: Reminders through push notifications
• Covers everything: You’ll use every concept from previous modules
• Integrated APIs: Even weather to correlate with mood!

Ready to start? Phase 0: Environment preparation

Before starting, set up your workspace:

1. Create a folder pet-tracker on your desktop
2. Open the folder in your code editor (VS Code, Cursor, Notepad++, SublimeText, …)
3. Prepare your favorite AI assistant (Claude, ChatGPT, Gemini, Mistral, …)
4. Breathe: You can do this! 💪

⚠️ ATTENTION, IMPORTANT ⚠️

Data will be saved ONLY on the device you use. If you change computer or delete browser data, you’ll lose everything. This is normal for an educational project! (In the real world you’d add a backend with database, but one step at a time).