Vibe Coding Experiment: Building Six Projects in JavaScript and Blazor

 

AI Generated


I’ve been curious about what it would feel like to “vibe code” — to spin up small projects quickly with AI assistance and see how different stacks handle it. So I decided to set up a challenge for myself: build six mini projects twice, once in JavaScript/HTML/CSS and once in Blazor/C#. I wasn’t aiming to declare a winner, just to see where each stack shines, where it struggles, and how AI fits into the process. The surprising part? The whole experiment only took hours, not days.


The Six Projects

1. Hangman

  • JavaScript/HTML/CSS: Worked on the first try, with a functional UI and smooth gameplay.

  • Blazor: The first attempt had errors and a poor UI. After converting the JavaScript version with ChatGPT and debugging with Copilot, it compiled and ran, though the UI still needed work.



Screenshot: JavaScript Hangman (clean UI)



Screenshot: Blazor Hangman (after fixes)


2. Blur Landing Page

  • JavaScript/HTML/CSS: Ran perfectly on the first try, with a polished blur effect and Unsplash image.

  • Blazor: Also worked on the first try, looking just as good as the JavaScript version.


Screenshot: JavaScript Blur Landing Page




Screenshot: Blazor Blur Landing Page


3. Slider

  • JavaScript/HTML/CSS: Initial attempt failed, but a second prompt fixed it. Smooth transitions worked as expected.

  • Blazor: Never fully worked — the UI displayed, but transitions didn’t function.



Screenshot: JavaScript Slider (working after fix)



Screenshot: Blazor Slider (UI present but no transitions)


4. Random Choice Picker

  • JavaScript/HTML/CSS: First attempt failed, but a clean retry produced a working version with automatic selection.

  • Blazor: Worked on the first attempt, though instead of auto-selecting it required a button press — a small difference I actually liked.



Screenshot: JavaScript Choice Picker (auto select)


Screenshot: Blazor Choice Picker (with button select)



5. Live User Search

  • JavaScript/HTML/CSS: Worked right away, even mocking the API call.

  • Blazor: Same here — worked on the first try with mocked data and felt responsive.

Screenshot: JavaScript Live Search (with results)



Screenshot: Blazor Live Search (with results)


6. Content Placeholder

  • JavaScript/HTML/CSS: Worked on the first attempt, though styling needed a small adjustment.

  • Blazor: Worked on the first attempt as well, with styling looking clean.



Screenshot: JavaScript Content Placeholder




Screenshot: Blazor Content Placeholder



Observations

  • Error Handling & Fixes: JavaScript projects usually ran on the first or second attempt. Blazor sometimes required extra adjustments when translating logic-heavy JavaScript.

  • UI Quality: JavaScript versions often included better starter styling and documentation. Blazor UIs sometimes needed extra refinement.

  • AI Support: AI was great at bootstrapping both, but translating JavaScript directly into Blazor took more back-and-forth to resolve errors.

  • Consistency: Projects with heavy DOM manipulation favored JavaScript. Projects with structured data or UI binding translated more cleanly to Blazor.


Wrapping It Up

In just a few hours, I had twelve working projects — six in JavaScript/HTML/CSS and six in Blazor/C#. Some came together effortlessly, others needed extra prompting and debugging, but the results were always interesting.

The big takeaway for me? Vibe coding works across stacks — it’s fast, it’s fun, and it shows how far AI has come in bridging different frameworks. I didn’t walk away declaring a favorite, but I did walk away with a better understanding of where each stack fits and how AI can speed up the process.

Next time, I’ll push the limits further with more complex projects and see if the same “hours not days” pace holds up.

Comments

Post a Comment

Popular posts from this blog

Yes, Blazor Server can scale!

Image
From the very beginning of the release of Blazor Server naysayers have incorrectly stated that Blazor Server can not scale.  They usually state that the limit is 5,000 concurrent users. There are several misconceptions and wrong assumptions about their statement.  Let's break it down and get a better understanding of Blazor server-side scaling. What is the "limit" for users When Microsoft talks about the need to scale an application, what they are saying is that when a normal response for any concurrent user is taking longer than 200 ms, the system is not performant and needs to scale. We will accept that definition: If any normal user response is taking longer than 200 ms, the system needs to scale for concurrent users. By a normal response, we are referring to a page get, a post, etc.  Large database access requests would not be included in this measurement. What is scaling There are 2 common ways to scale, scale, out horizontally, and scale-up, up vertically. In our di...
Read more

Offline-First Strategy with Blazor PWAs: A Complete Guide 🚀

Image
One of the most powerful features of Progressive Web Apps (PWAs) is their ability to function seamlessly even when offline. For users, this means uninterrupted access to critical features regardless of network conditions. For developers, adopting an offline-first strategy ensures a robust, user-friendly experience while aligning with modern web development best practices. Blazor, Microsoft’s modern web framework, simplifies building PWAs with offline capabilities by leveraging features like service workers, caching, and IndexedDB. In this guide, we’ll dive into how you can implement an offline-first strategy in your Blazor PWA. Why Offline-First Matters An offline-first strategy doesn’t just improve user experience—it also provides: Reliability : Apps remain functional even with intermittent or no connectivity. Performance : Cached assets load faster, improving responsiveness. Engagement : Users can interact with the app at any time, enhancing retention and trust. Key Components of Of...
Read more

Customizing PWA Manifest and Icons for a Polished User Experience 🚀

Image
  Progressive Web Apps (PWAs) blur the line between web and native applications, offering a seamless and engaging user experience. But to make your PWA truly stand out, it’s essential to customize its manifest file and design professional-grade icons and splash screens . These elements influence how users perceive your app and ensure it looks and feels like a polished, high-quality product. In this guide, we’ll explore how to tailor the manifest.json file and create stunning icons and splash screens to deliver a professional and consistent user experience. What is the PWA Manifest File? The manifest.json file is a JSON file that provides metadata about your PWA. It defines how your app appears to users and controls its behavior when installed on a device. Key properties include: Name and description : How your app is displayed to users. Icons : App icons in various sizes. Theme and background colors : Define the app's look and feel. Display mode : Controls whether the app appear...
Read more