This content originally appeared on DEV Community and was authored by Najea Reghabi
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.
This content originally appeared on DEV Community and was authored by Najea Reghabi