Part 6: Final Features and Key Takeaways

After a challenging but rewarding debugging journey, we finally had a stable, working application. The core features were in place, and the connection between the frontend and our serverless backend was solid. Now, it was time for the payoff: enhancing the application with the final features from our Product Requirements Document (PRD).

Feature Enhancement: Watermarks and Filters

With the stable foundation, adding new features was surprisingly fast. The goal was to add two key enhancements:

  1. Watermarking: Allow a user to upload a transparent logo to be automatically superimposed on all processed images.
  2. Image Adjustments: Add controls for basic filters (like Grayscale) and brightness.

Backend Implementation: We prompted the AI to update the main.py file. It added logic to accept an optional overlay file and new parameters for filter and brightness. Using the Pillow library, it was simple to add the code to paste the watermark in the bottom-right corner and apply the requested image enhancements.

Frontend Implementation: We then updated the index.html file to include the new UI controls: a file input for the watermark and dropdowns/sliders for the new adjustments. The JavaScript fetch call was updated to include this new data in the request.

After a quick redeployment, the new features worked perfectly. The tool was now complete, transforming a multi-step, manual process into a single, automated action. (Coloured pic of Hobbes at 2:3 ratio converted to 1:1 aspect ratio, monochrome convert, and watermark)

Conclusion and Lessons Learned

This project was a success on all fronts. We built a practical tool that solves a real business need, and more importantly, I achieved my core learning objectives.

  • On AI-Assisted Coding: This project proved that AI is an incredible accelerator and debugger. It’s not about replacing the developer but augmenting their skills. The ability to quickly get boilerplate code, diagnose cryptic error messages, and explain complex concepts like CORS fundamentally changed the development workflow.
  • On GCP Infrastructure: I moved from theoretical knowledge to practical, hands-on experience. I’m now comfortable deploying and managing a scalable, serverless application and understand the critical interplay between IAM, Cloud Run, and Cloud Storage. The debugging process was a masterclass in reading and understanding server logs.

    My recently concluded Data Science course, where we used Azure, came in really handy for this exercise.
  • On Prompting Skills: The single biggest takeaway is that the quality of the output is directly proportional to the quality of the input. Starting with a detailed PRD was the most important decision of the entire project. It served as our north star, allowing us to generate highly relevant code and saving countless hours of iterative, vague prompting.

    Learning to ask precise, context-rich questions is the most crucial skill in this new era of development.

Thank you for following along on this journey. I hope this detailed log of the process, including all the mistakes, is helpful for your own projects.


0 Comments

Leave a Reply

Avatar placeholder

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.