I’m a bit bored nursing an injury, so might as well do something productive for a few days. Why 6-Part? Well, it’s good for traffic, clicks, and sessions, but really, why not? I reckon it’d be easier to read.
I kinda miss being a technical writer, PRD writer, and requirements analyst as well, so this would be a fun project for a week.
Part 1: Solving a Real-World Problem with a Plan (This Post!)
Welcome to the first post in a six-part series where I’ll document my journey building a complete web application from the ground up. This isn’t just about the final product; it’s about the process, the roadblocks, and the incredible learning experience of using AI as a development partner to create a practical tool.
The objective is to be a generalist focusing on the outcome and requirements rather than being an expert in coding or specific tools. Oh, I’m using Gemini as my primary AI partner simply because that’s the one I have a paid account for.
The Problem: The Aspect Ratio Dilemma
As a business owner, I heavily rely on Generative AI to create a steady stream of engaging visual content for our social media channels. The results are often stunning, but they come with a persistent workflow bottleneck: most GenAI tools default to a 16:9 widescreen format. While perfect for some platforms, it’s a headache for Instagram posts (1:1), stories (9:16), or portraits (4:5). Manually resizing, cropping, and enhancing every single image is a tedious, time-consuming task that pulls me away from more important work.
This project was born from that simple, real-world need: I needed a tool that could take a batch of images and quickly transform them into the exact dimensions and styles I require.
The Learning Objectives
Beyond building a useful tool, I set three core learning objectives for this project:
- Gain Practical Experience with AI-Assisted Coding: I wanted to move beyond simple “code-this-for-me” prompts and learn how to use an AI as a true pair programmer—for brainstorming, writing, refactoring, and, most importantly, debugging.
- Achieve Hands-On Setup of a Serverless Application on GCP: Theory is one thing, but I wanted the practical experience of deploying a scalable, real-world application on Google Cloud Platform. This meant getting my hands dirty with serverless technologies like Cloud Run and Cloud Storage.
- Improve My Prompt Engineering Skills: My hypothesis was that a well-structured, detailed “master prompt” would yield better, faster results from an AI assistant. I decided to use a formal Product Requirements Document (PRD) as this master prompt to guide the entire development process.
What to Expect in This Series
Over the next five posts, I’ll take you through every step of this journey—from initial planning to the final, enhanced application.
- Part 2: The Blueprint – We’ll dive into the PRD and see how it became the most important document in the entire project.
- Part 3: The Foundation – A step-by-step guide to setting up the necessary infrastructure on Google Cloud.
- Part 4: The Build – The exciting phase of using our PRD to generate the initial code and deploy our first version.
- Part 5: The Reality – A raw, honest look at the bugs, the roadblocks, and the debugging process that defines real-world development.
- Part 6: The Payoff – We’ll showcase the final application, add new features, and reflect on the key lessons learned.
This project is a testament to how modern tools can empower anyone to build powerful solutions. Let’s get started.
0 Comments