Posts

Yes, Virginia, You Are Able to Vibe Code in Blazor

Image
  Image Generated by ChatGPT For years, developers working with JavaScript frameworks like React and Next.js have been able to lean on AI tools like Copilot, Claude, or Cursor to rapidly spin up applications. In those ecosystems, “vibe coding” – letting the AI take a prompt and generate a surprisingly functional application – is a real and tangible experience. But what about Blazor? Could you vibe code in a .NET environment where structure, conventions, and configuration matter far more than in lightweight JavaScript apps? The short answer: yes, you can. It’s not the same as working in Cursor with React, where you can drop in a one-liner prompt and have a complete working skeleton in minutes. With Blazor, you can absolutely use AI to accelerate your workflow – but you need to do some of the setup yourself. Once you’ve got that foundation, Copilot becomes a surprisingly capable “junior developer” that saves hours of coding and testing time. Let’s walk through exactly what I ...

Vibe Coding Experiment: Building Six Projects in JavaScript and Blazor

Image
  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 polishe...

Why Is It So Hard to Find "Just One" Blazor Component?

Image
  Why Is It So Hard to Find "Just One" Blazor Component? Blazor is a fantastic framework. It lets C# developers build interactive web UIs without touching a single line of JavaScript. But as the framework matures, a common frustration is bubbling to the surface: the state of its UI component libraries. While there are many powerful options available, they often present a frustrating, all-or-nothing dilemma. Why can't you just grab a single, well-made component without buying into an entire ecosystem? Your observation is spot on. Unlike the React world, where developers can easily find and install individual components—from a simple tooltip to a complex data grid—the Blazor landscape feels different. It's an issue of walled gardens. The "All-or-Nothing" Problem Most major Blazor UI libraries, both paid and free, are built as comprehensive suites. They provide dozens of components, from buttons and inputs to charts and schedulers. This is great if you're s...

React vs. Blazor: A Modern Showdown Beyond JavaScript vs. C#

Image
  In the ever-evolving landscape of web development, choosing the right framework can be the most critical decision you make. For years, the conversation has been dominated by JavaScript libraries and frameworks. But with the power of WebAssembly, Microsoft's Blazor has emerged as a formidable contender, challenging the status quo and offering a compelling alternative for C# and .NET developers. While the most obvious difference is the language—the ubiquitous JavaScript for React versus the robust C# for Blazor—the real story lies deeper. The fundamental architectural philosophies, rendering strategies, and developer experiences set these two frameworks on divergent paths. Let's move beyond the surface-level language debate and explore the core differences that truly matter in 2025. The Core Architectural Difference: Rendering Philosophies The most significant distinction between React and Blazor is how they approach rendering content and handling interactivity. React: The Java...

Experimenting with AI to Generate a Vertical Slice Folder Structure in a Blazor App

Image
Today, I set out to generate a Vertical Slice Architecture (VSA) folder structure inside a default Blazor template using AI tools. I ran this experiment inside Visual Studio 2022 using Copilot in Agent Mode. My goal was to automate the restructuring of a Blazor app into a cleaner, feature-based format aligned with the VSA pattern. Attempt 1 – Claude 3.7 I began by prompting Claude 3.7. Unfortunately, the results were underwhelming. Despite giving a detailed prompt, it added the MediatR NuGet package—something I never asked for—and failed to restructure the file layout at all. It completely ignored the organizational aspects and made assumptions about architecture that weren’t part of the task. Attempt 2 – Gemini 2.5 Next, I gave Gemini 2.5 a try. This attempt ended abruptly with an error—it didn’t return anything meaningful. At this point, I was beginning to wonder if AI was the right approach for this task. Attempt 3 – ChatGPT 4.0 Then I tried ChatGPT 4.0. It didn’t modify anyt...