✕

🛠️ How This App Was Built

This app was built by Elsa Shrader (4th grade) using Claude Code, an AI coding assistant by Anthropic.

💡 The Idea

We started by whiteboarding ideas for apps that would be fun to build. We made a list and then picked the ideas that were a combination of simple enough to build in one session and something we really wanted to use. "Today in History" won!

💬 How We Built It (Step by Step)

• Prompt 1: We described our app idea to Claude — a fun history app with kid-friendly facts, a date picker, and a cool design. We used the /frontend-design skill to make the UI look great.
• Prompt 2: We tested and noticed facts weren’t filtered well for kids — some were too grown-up or not interesting for 4th graders. We asked Claude to add better filters.
• Prompt 3: We changed the design from an old-timey explorer theme to a bright, colorful, science-and-fun theme that felt more like us!
• Prompt 4: We fixed the sort order (newest facts first).
• Prompt 5: We caught a fact that should have been filtered and asked Claude to strengthen the safety filter even more.
• Prompt 6: We added this info page, plus photos and “Learn More” links for each fact!
• Prompt 7: We added category filter buttons so you can see only Space facts, only Science facts, etc.
• Prompt 8: We fixed the date to use Eastern time.
• Prompt 9: We deployed to Google Cloud Run and connected our custom domain!
• Prompt 10: We added this deployment info section and a feedback form so people can tell us what they think!
• Prompt 11: We connected the feedback form to Google Sheets so every response is saved in a spreadsheet we can review together in future engineering sessions!
• Prompt 12: We reviewed the page source code to make sure no secret keys or private data were showing, added a cute 🐨 koala favicon, and deployed the final version!

⚙️ What’s Under the Hood

• Python + Flask — the backend server that runs the app
• Wikipedia API — where the facts, photos, and links come from
• HTML, CSS & JavaScript — the code that makes the page look and feel fun
• Kid-safety filter — a big list of words that tells the app to skip facts about things like war or violence
• Kid-interest filter — a second list that only keeps facts about cool topics like space, science, animals, sports, art, and inventions
• Google Sheets API — saves feedback from visitors into a spreadsheet so we can read it later
• Google Cloud authentication — lets the app talk securely to Google Sheets without exposing any passwords

🚀 How We Deployed It

Getting our app from our computer onto the internet took a few steps:

• Dockerfile — a recipe that tells a computer how to set up and run our app (install Python, install libraries, start the server)
• Google Cloud Run — a service that takes our Dockerfile, builds it into a container (like a box with everything the app needs), and runs it on Google’s servers
• Custom domain — we bought funkidfacts.com through Google Cloud Domains, then connected it using DNS records. DNS is like a phone book for the internet — it tells browsers which server to talk to when someone types in our website name.
• SSL certificate — Google automatically gave us a security certificate so the site uses HTTPS (the little lock icon in your browser). This keeps visitors safe!

The deploy command was just one line:

gcloud run deploy history-app --source . --region us-east1

🎓 What We Learned

• How to break a big idea into small steps
• How to test your app and find problems
• How to work with an AI assistant to write real code
• How APIs work — asking another website for data
• How filters keep content safe and interesting
• How containers and Dockerfiles package an app
• How DNS connects a domain name to a server
• How to deploy an app to the cloud so anyone can use it!
• How to connect a web app to Google Sheets to store data
• How to check your source code for security before going live

Built with Claude Code (claude.ai) 🤖