What I Built
I set out to build a fun, interactive web application called the "On-demand Coloring Page Creator." The app allows a user to type in any theme (like "dinosaurs" or "space adventure"), and using AI, it generates a unique, black-and-white, line-art coloring page ready to be printed or saved.
I used a two-step conversational process in Google AI Studio to create the app:
- The Initial Prompt:
"Create a web application called 'Coloring Page Creator'. The design must be clean and user-friendly. The app needs a main title, a text input field for a theme with the placeholder text 'What do you want to color today?', and a primary button that says 'Generate Page'. When the button is clicked, it must call an image generation API to create a 'black and white, minimalist, clean line-art, coloring book page' based on the user's theme. While generating, show a 'Loading...' message. Then, display the generated image."
- The Refinement Prompt: I then used the iterative chat feature to improve the user experience with this follow-up prompt:
"Great. Now add three example buttons under the text input with the themes 'Fantasy Forest', 'Ocean Life', and 'Space Adventure'. Clicking a button should fill the text input with that theme."
Demo
Here is the link to the fully deployed and working application on Google Cloud:
Try the Live Coloring Page Creator Here!
My Experience
This track was an incredible, hands-on journey into the realities of web development with AI. My key takeaways weren't just about using the tool, but about solving real-world developer problems.
API Keys are Serious Business: My biggest lesson was in API Key management. I learned not only how to generate a key but the critical importance of keeping it secret. I now understand that posting a key publicly is a major security risk, and it's a lesson I will carry through my entire development career.
Local vs. Live is a Huge Hurdle: I spent a lot of time debugging why my app wouldn't work when run from a local file. This taught me a fundamental web concept: browser security policies (CORS) prevent local files from making API calls. The solution—using a local server or deploying the app to the cloud—was a major "aha!" moment. It's the difference between a file on a hard drive and a real application on the internet.
AI as a Debugging Partner: What was most surprising was how the process of the AI failing actually helped me learn. By seeing the errors and working through them step-by-step, I gained a much deeper understanding of the underlying technology than if it had just worked perfectly on the first try.
Top comments (2)
Good!!! I will give a try
Good