← Back to thoughts list

The Surprising Lessons I Learned From Building a Silly AI Quiz App for My Daughter

My daughter really got into answering multiple choice questions for fun. We asked ChatGPT for questions and then read them out loud for her. By chance, I read about LangChain because Peter Ullrich had some fun with it and wrote about it on Bluesky.

I figured I could use that to build a simple app that renders a quiz for my daughter. My setup of choice was Phoenix since I wanted to spin up an app for it. This was the perfect low risk environment to play around with the framework and get used to its ways of working.

What started as a silly fun project for my daughter quickly turned into a crash course in modern web development, deployment, and AI integration. Let me share the unexpected skills I picked up along the way and why even the silliest side projects can be valuable learning experiences.

Some CSS Magic: Background Animations with Tailwind

I had seen a simple TailwindCSS trick by Simon for a nice background animation recently and thought, "Why not try this out?" to give the UI some playful touch. I know lots of CSS stuff by heart, but it was still fun to implement this one, following along the video and adjusting shades and placement as I see fit.

Phoenix/Elixir: More Than Just a Backend Language

I already had some shallow experience with Phoenix through Learn Phoenix LiveView and a quick spike I had spun up some weeks prior. This project helped me widen my knowledge in areas I had not tackled before:

  • Deployment on fly.io: Understanding how to set up and deploy my app smoothly on fly.io.
  • Langchain Integration: Connecting to OpenAI using the langchain package, which proved invaluable for building the AI-powered logic.
  • App Secrets: Learning where and how to securely manage and retrieve secrets within a Phoenix application was one bit where I stumbled a bit – but now I know the differences between putting stuff into a config.exs file and the runtime.exs file. Coming from the frontend world, this stuff is still something I can get better at. And I love that I could learn this within such a simple environment.

Deployment Demystified: fly.io’s Power Tools

Deploying on fly.io was more insightful than expected:

-Discovering I could SSH into a running deployment and open up an IEx session was a game-changer for debugging. Thanks Peter for the hint.

  • Understanding how to monitor app performance and view logs directly within fly.io’s dashboard made troubleshooting smoother.

Prompting for Smarter AI Responses

I learned that crafting better AI prompts involves more than simple user input. Combining system and user messages helped structure interactions with OpenAI to yield more consistent, helpful answers.

Web Speech API: A Love-Hate Relationship

Integrating voice features was both fascinating and frustrating. I explored how the Web Speech API works, its capabilities, and its limitations. This knowledge was critical to providing a more interactive, kid-friendly quiz experience, even if it meant facing quirks in browser support and API behavior.

The voice output still does not work properly on iOS, so I guess one next step will be getting audio from OpenAI and play that. Well, more learning opportunities ahead!

Why Side Projects Are Worth It

What began as a small, silly project turned out to be a sandbox for learning a blend of technologies and concepts. This journey reaffirmed that experimenting with side projects isn't just play; it's a gateway to broadening your technical toolkit.

If you want to check out the halfway working, absolutely not finished app: Here you go!