A 10-Hour experiment: Building project with AI

I recently completed my Angular course. Like many other developers, to further sharpen my Angular skills, I decided to build a small toy project — a seating layout builder.

Since my knowledge of CSS and HTML is still limited, I turned to AI to get guidance and speed up the development process.

Using AI, I could complete the project in under 10 hours. The experience showed me clearly how AI can transform the way we build software — and the new challenges that come with it.

AI generated the first draft of the project within just 10 minutes, and I could follow every part of the HTML, CSS, and TypeScript it produced. This gave me a huge head start before I began extending the application with new features.

At first, I was bit reluctant to use AI for these extensions. I wanted to rely on my own skills, and I assumed writing prompts for complex cases would be hard.

But once I started prompting AI, I realized how powerful it could be… and how careful I needed to be.

AI is fast, but not always reliable

While AI sped up the development significantly, it also made some mistakes — from incorrect logic to accidentally deleting the entire content of a file!

For example, at one place in the code, it used the below expression to style an HTML element:

[style.width.px]="(element.width || 1) * 54"

This expression has few flaws:

1. The number '54' is a hidden "magic number", not readily understandable. It is actually derived on the basis of the width, margin and border of the element.

2. Hardcoding '54' in an HTML file might create maintenance issues. If you later decide to change those properties of the element, you also need to update this style expression and you might miss doing that.

3. And the formula is incorrect. The correct one is:

   [style.width.px]="element.width === 1 ? 50 : (element.width || 1) * 58 - 6"

AI as peer programmer + mentor

The entire experience felt like working with two roles at once:

• A peer programmer who writes the majority of the code.

• A mentor who exposes you to new features you wouldn’t have explored on your own.

I still had to be the senior developer:

• Reviewing the logic

• Refactoring repetitive code

• Testing everything thoroughly

• Fixing issues created by AI

• Ensuring the design made sense

AI can produce complex structures quickly, but the true learning happens when you review the code, test the app thoroughly, and fix the bugs.

The hidden challenges

Not always clean code

Some parts of the logic were duplicated across multiple areas of the code. To clean this up, I later had to refactor the implementation and make it more generic.

All the code related to managing the layout was bundled into a single service file instead of splitting it into logical, modular files. This wasn’t maintainable in the long run. I later refactored that code into multiple files — service file to manage core layout and service file to manage multi-cell layout.

The design of the model for PlacedElement was created as below:

export interface PlacedElement {
  id: string;
  type: 'chair' | 'room' | 'clear_space';
  row: number;
  col: number;
  width?: number;
  height?: number;
  name?: string;
}

It was using the type field to decide whether the element occupies the single cell or multiple cells in the layout. In this case, the types room or clear_space are multi-cell elements.

The better design could be having a separate field isMultiCell as below:

export interface PlacedElement {
  id: string;
  type: 'chair' | 'room' | 'clear_space';
  row: number;
  col: number;
  isMultiCell: boolean;
  width?: number;
  height?: number;
  name?: string;
}

Temptation to not understand

When AI-generated features “just worked”, it was incredibly tempting to accept it without digging into the underlying logic. I initially didn’t feel the natural urge to deeply understand the AI-written code. But I knew that this comfort would create issues later.

If I didn’t take the time to understand the AI-written code, it could easily turn into hidden risks as the project grew more complex, it could be harder to fix the bugs.

So, before building anything on top of it, I made a conscious effort to slow down, read through the code, and ensure I genuinely understood what was happening.

Preference and style gap

Every developer has their own preferences and style of structuring code, while AI follows its own patterns. It’s like arranging the clothes in a wardrobe. If someone else organizes your wardrobe, you might struggle to find things later — even if they’re right in front of you. But if you arrange it yourself, you instantly know where everything is, simply because it matches your mental model. The same applies to code: when you structure it yourself, navigating and extending it becomes far easier.

You either have to grasp the AI-generated code or reshape it to match your own. If you don’t, the project will become harder to navigate as it grows, making it difficult to mentally connect the different pieces.

Key takeaways

• AI can dramatically speed up the development. Don’t hold back — use AI wherever it helps you move faster and smarter.

• AI writes the code, but you remain responsible for reviewing, validating, and correcting it. You should still write code manually. You'll often refine, simplify, or improve what AI produces.

• AI will make developers more multi-skilled. Developers will be able to work across more layers of the stack — even those they are not experts in, like HTML/CSS in my case. But this doesn’t eliminate the need for specialists.

• AI amplifies your capability — but it doesn’t replace craftsmanship.