Harsh

Posted on Feb 17 • Edited on Feb 27

I used AI to build an app in 10 minutes — here's what happened 🤖⚡

#ai #webdev #javascript #discuss

Spoiler: I’m both impressed and slightly worried about my job security.

☕ How It Started

Yesterday morning, I made my tea and thought — “Let’s try something new today.”

I usually use AI tools for debugging or getting code suggestions. But building a full app? Never really tried. I had that typical mindset — “Yeah yeah, AI isn’t THAT amazing.”

Well… I was wrong.

🎯 The Goal: A Simple Habit Tracker App

I intentionally wanted to build something simple but useful. A habit tracker where users can:

Mark daily habits
See their streak count
Get motivational quotes

Time limit: 10 minutes.

Timer on. Let’s go.

⏱️ Minutes 1–2: Idea & Setup

I opened :contentReference[oaicite:0]{index=0} and gave this prompt:

“I need a simple habit tracker web app in HTML, CSS, and vanilla JavaScript.

Users should be able to mark daily habits, see streak counts, and get motivational quotes.

Keep the UI clean.”

The response came back in 2 seconds — complete structure + code snippet.

My reaction: “That fast? Let’s test this.”

⏱️ Minutes 3–4: Copy-Paste & First Run

ChatGPT gave me this:

<!DOCTYPE html>
<html>
<head>
    <title>Habit Hero</title>
    <style>
        body { font-family: Arial; max-width: 500px; margin: auto; padding: 20px; }
        .habit { display: flex; justify-content: space-between; margin: 10px 0; }
        .completed { text-decoration: line-through; color: gray; }
        button { background: green; color: white; border: none; padding: 5px 10px; }
    </style>
</head>
<body>
    <h1>Habit Hero</h1>
    <div id="quote">"Small steps every day"</div>
    <div id="habits"></div>
    <script src="app.js"></script>
</body>
</html>

Plus an app.js file with logic for:

Habits array (Exercise, Read, Meditate)
Complete button clicks
Streak counter
Random quotes

First Run Results

❌ Habits weren’t showing
❌ Streak wasn’t updating
✅ Quote display worked fine

⏱️ Minutes 5–6: Debugging with AI

I copied the error and asked:

“Habits aren’t showing. Console error:

‘Cannot read property appendChild of null’”

ChatGPT immediately replied:

“Your script is running before the DOM loads.

Move the script to the end of the body or use DOMContentLoaded.”

I moved the script to the bottom of the body.

✅ Worked perfectly.

⏱️ Minutes 7–8: UI Improvements

The app worked, but it looked boring. I asked:

“Make the UI cleaner and more modern.

Add gradient background, card design, and better fonts.”

AI instantly delivered updated CSS with:

Linear gradient backgrounds
Habit cards with box-shadows
Smooth hover effects
Better typography

Now it actually looked professional.

⏱️ Minutes 9–10: Local Storage & Polish

Then I realized:

“On refresh, the streak resets. That’s not right.”

I told AI:

“Implement localStorage so habits and streak persist.”

AI gave me this:

// Save to localStorage
localStorage.setItem('habits', JSON.stringify(habits));

// Load from localStorage
const saved = JSON.parse(localStorage.getItem('habits'));
if (saved) habits = saved;

🏁 10 Minutes Later — Final Result

In 10 minutes, I had:

✅ A working habit tracker
✅ Streak counter with localStorage
✅ Daily motivational quotes
✅ Clean, modern UI
✅ Mobile responsiveness

I sent it to a friend.

He said: “You built this in 10 minutes? This would take me 2 days.”

🤔 Key Lessons Learned

1. AI is NOT replacing developers — yet

Yes, AI wrote the code. But:

I debugged the errors
I defined the requirements
I tested and validated everything

AI did 80% of the work.

The critical 20% was still human thinking.

2. Prompt engineering is a real skill

Bad prompt:

Build me an app

Good prompt:

Build a habit tracker with localStorage, clean UI, and motivational quotes

Specific input = better output.

3. AI hallucinations are real

At one point, AI wrote a function that doesn’t even exist in JavaScript.

I had to catch that myself.

If you don’t know the basics, AI can confidently mislead you.

4. The speed boost is REAL

What normally takes 2–3 hours, I finished in 10 minutes.

But quality control?

Still a human’s job.

💡 My Final Take

AI made me 10× faster.

It did not take my job.

If I weren’t a developer, I wouldn’t have:

Known why the error happened
Understood localStorage
Made good UI decisions
Optimized the code

AI is a superpower for skilled developers.

For beginners, it’s a double-edged sword — helpful, but dependency-forming.

🎁 Bonus: My Prompt Template

If you want to try this yourself, use something like:

I need a [app type] with [features].
Tech stack: [HTML/CSS/JS or others].
UI should be [clean / modern / fun].
Extra requirements: [localStorage, API, etc.].

❓ What Do You Think?

Have you built anything using AI?

Which tool did you use?
How was your experience?

Drop a comment — I read and reply to everyone 👇

Liked this? Follow for more real dev stories —

Disclosure: AI helped me write this — but the bugs, fixes, and facepalms? All mine. 😅

Every line reviewed and tested personally.

DEV Community