How I Built a React App with AI, VS Code, and Pure Vibes!

Spoiler alert: There’s a cat. And it’s zesty.

Idea Spark: Talking to AI While Half-Asleep

One fine day (or night, who knows anymore), I had a thought:

"What if I had a sleepy cat in my React app that would sass me every time I clicked it?"

Normal people would sleep.
I opened VS Code and said:

"Yo ChatGPT, help me make a zesty cat app."

And just like that, I began coding a full React project — powered by a bash script, AI code generation, and zero patience for googling things manually.

The Setup: VS Code, Git Bash & Me

Tools I Used:

• Visual Studio Code (because real devs use dark mode with pride)
• Git Bash (for terminal drama)
• ChatGPT (my unpaid AI intern)
• OneDrive Desktop (accidentally. Don't judge.)

My Working Directory?

Yep. I know. Even the folder names scream “this user is chaotic neutral.”

Phase 1: Writing the Bash Script Like a Boss

I told ChatGPT:

“Write me a bash script that sets up a full React project with a ZestyCat component.”

It spat out gold. A script that:

1. Runs npx create-react-app
2. Creates a ZestyCat.js component and CSS file
3. Injects personality (and sass) into the cat
4. Updates App.js to feature the cat as the main character

And I saved it as:
create-zesty-cat.sh

Phase 2: "Why Won’t You Run?!"

Of course, no dev journey is complete without errors that question your sanity.

Problem:

Running the bash script in Git Bash gave me:

Me:

“I literally just told you to create it!”

Realization:

The create-react-app command was after the cd in the script.
I was trying to walk into a house before it was built.

Fix: I moved the npx create-react-app line to the top of the script.

Phase 3: React App is Born... and Broken

I ran:

Boom shakalakaaa! The app was created. Files in place. Components looking good.
I ran:

And React said:

My Reaction:

“AJ-who? I don’t even know that guy!”

Fix:

I did what any experienced dev would do:

rm -rf node_modules package-lock.json
npm cache clean --force
npm install

A cup of coffee later, it finally worked.

Meet ZestyCat: Your Judgmental Dev Buddy

ZestyCat is a React component with one job — to sass you when you click it.

Features:

• Sleeps peacefully until disturbed
• Gets angry when clicked
• Judges you with a "😾" face
• Tells you to stop bothering it because “it can vibe-code later”

Just like a real dev cat.

The Look: Pure Comic Sans Chaos

The cat is styled with:

Yes. Comic Sans. Because nothing says “I take front-end seriously” like Comic Sans in a dashed border.

The Final Test: npm start

With everything in place, the moment of truth:

Boom.
My local server came alive. ZestyCat was breathing but sleeping.

I clicked it because it is annoying to let him sleep while I cant.

It got angry — as it should. My mission was complete.

TL;DR: How I Did It (So You Can Too)

1. Talk to ChatGPT — Tell it what you want. Be as chaotic as you like.
2. Write a bash script — Let the AI generate it.
3. Run it in Git Bash — Fix paths if needed.
4. Fix broken node_modules — It's a React tradition.
5. Launch your app — Watch your digital cat get annoyed.

Final Thoughts

I didn’t just build a React app.
I built a sassy, sleepy cat with attitude — entirely from talking to AI and using VS Code.

No Stack Overflow. No Googling. Just me, my terminal, and my virtual cat overlord.

Want the full source code or help customizing it?
Drop a 🐱 below, or just poke ChatGPT again — it never sleeps.

Happy Hacking!