Pulse 360°

Hey there,

For years, I've had ideas for apps and websites—some brilliant, some questionable, all of them just out of reach. Why? Because I never had the attention span (or, let's be honest, the patience) to sit down and actually learn to code. I'd dabble in PowerShell, tinker with batch files, and then get distracted by something shiny (or a snack).

Then along came Vibe Coding. Suddenly, building something real didn't mean memorizing syntax or debugging for hours. It meant describing what I wanted, letting an AI do the heavy lifting, and poking it until it worked. The rest, as they say, is history—and this site is the proof. What's next for Vibe Coding? Bing Context Engineering.

How This Site Was Made (No Magic, Just Prompts)

Stack: Next.js 15 App Router, React, TypeScript, Tailwind, Shadcn UI, Radix UI, Viem, Wagmi, and a parade of SVGs. Do I know what all actually means? Yes to SVGs!
Design: Modern, mobile-first, and accessibility-friendly. If it looks weird on your phone, blame the AI (or me).
Development: 100% prompt-driven. I described what I wanted, the AI wrote the code, and I poked it until it worked. No Stack Overflow rabbit holes required.

If You Want to Build Something Like This…

Here are the kinds of prompts that worked best for each part of the site:

Landing Page & Navbar: "Create a modern Next.js landing page with a sticky navbar, logo, and responsive design. Support dark and light mode."
Product Filters & Cards: "Show a grid of product cards with SVG icons, filterable by product. Make it mobile-friendly and accessible."
Azure Updates & News: "Fetch and display Azure updates from an API. Use infinite scroll, search, and filter by product. Make it look modern."
Detail Views: "Add a detail page for each update with a back arrow, date, and all the tags. Keep the layout clean."
SVG Icon Consistency: "Map product names to SVG icons. Use the right icon everywhere, even in filters and cards."
Accessibility & Polish: "Make sure all buttons are accessible, keyboard-friendly, and have focus states. Make it look modern."
About Page (this one!): "Write a fun, modern about page styled like a welcome email. Explain the project, the stack, and how prompts drove the build. Make it entertaining but concise."

Lessons Learned

AI is a great coding partner, but it's not psychic. Be specific, be patient, and don't be afraid to say, "No, do it again."
Modern frameworks are powerful, but you don't need to know everything to get started. Just start.
Debugging is 80% of the job. The other 20% is asking, "Why is there a horizontal scrollbar?"
Every bug is a learning opportunity. Or a reason to take a coffee break.

Vibe Coding Tips & Tricks

Be the AI's eyes: Instead of telling the AI exactly how to fix something, describe what you see and what you don't like. For example, say "The button looks off-center on mobile" or "The card titles are getting cut off"—not "Change the margin to 8px." The AI often has a better (or weirder) way to fix it than you'd think.
Iterate fast: Don't stress about getting the perfect prompt. Try something, see what happens, and adjust. The more you describe, the better the results.
Be curious: Ask the AI why it made a change, or what it thinks is best. Sometimes it has a clever (or wild) idea.
Give feedback: If the AI does something weird, just say so. It learns from your reactions.

Recommendations for Successful Vibe Coding

Use the right rules for the job: If you have specific requirements or want to guide the AI, set up rules that match your needs. The right rules make the AI way more effective.
Leverage MCPs (Model Capability Plugins): Extend what the AI can do by using MCPs—these let you add new tools, APIs, or data sources to the model. If you need something special, ask about adding an MCP!
Mix and match: Combine rules and MCPs to create a custom workflow that fits your project. The more you tailor the setup, the better the results.

Want to Build Something Like This?

If you're curious how this site was made, or want to build your own, I'm happy to share everything I learned (and all the mistakes I made). Just reach out to your Microsoft CSAM and ask to schedule a call with me. Let's vibe code together!