From the Concept to Reality: Building "Ez Garden Visualizer" in Stages

So Many Possibilities... So Little Time

When I first thought about building an AI garden visualizer app, the full idea sounded much bigger than a weekend project: upload a garden photo, generate a transformed version, suggest plants, estimate cost, maybe save projects, maybe support users, maybe turn it into a mobile app. That is exciting, but also dangerous, because it is very easy to start building the “final architecture” before proving the core workflow. So I decided to build it in layers: first a tiny command-line prototype, then a simple Next.js app, then cloud functions and storage later.

One Goal for Each Week

For week one, the goal is only to prove the basic AI workflow with a plain JavaScript file. No frontend, login, database, nor a cloud storage. Just one image in, one AI garden concept out. The command line version might look something like this:

node garden-transform.js ./input/backyard.jpg

The pseudocode is intentionally simple:

// garden-transform.js
const imagePath = process.argv[2];
const prompt = `
Transform this garden into a tidy, low-maintenance,
affordable makeover concept.
Keep the original layout and proportions.
Suggest easy-care plants, mulch, edging, and simple seating.
`;
const imageDescription = await describeImage(imagePath);
const gardenPlan = await generateTextPlan({
  imageDescription,
  budget: "$500-$600",
  style: "tidy, homely, achievable"
});
const afterImage = await generateGardenImage({
  originalImage: imagePath,
  gardenPlan
});
saveFile("./output/garden-plan.txt", gardenPlan);
saveImage("./output/garden-after.png", afterImage);

For week two, I would wrap the prototype inside a very small Next.js app. The goal is not to build the whole product yet. It is just to make the prototype usable through a browser: upload a photo, click a button, see a result. The folder structure could stay very minimal:

garden-ai-app/
  app/
    page.tsx
    api/
      transform/
        route.ts
  components/
    ImageUploader.tsx
    ResultPreview.tsx
  lib/
    openai.ts
    prompts.ts
  public/
  package.json

The frontend flow could be as simple as:

// app/page.tsx
export default function HomePage() {
  return (
    <main>
      <h1>AI Garden Makeover</h1>
      <p>Upload a garden photo and get a simple makeover concept.</p>
      <ImageUploader />
      <ResultPreview />
    </main>
  );
}

And the API route could reuse the logic from week one:

// app/api/transform/route.ts
export async function POST(request: Request) {
  const formData = await request.formData();
  const image = formData.get("image");
  const gardenPlan = await generateGardenPlan(image);
  const afterImage = await generateGardenImage(image, gardenPlan);
  return Response.json({
    plan: gardenPlan,
    imageUrl: afterImage
  });
}

What I like about this staged approach is that each week has a clear outcome.

Quick Goals

• Week one proves the AI workflow.
• Week two proves the user experience.
• Week three can then move the image storage and processing into proper cloud services.

The important part is also knowing what not to build yet: no authentication, no payment system, no project dashboard, no plant database, and no perfect architecture. At this stage, the goal is momentum. Build the smallest useful layer, learn from it, then add the next layer only when the previous one works.

Reference

See the app's background story.

Dream Outcome

Here's another inspiring ChatGPT transformation :)