Can Copilot REALLY Build My Blazor Website for Me?

In this video, we're going to look at how Copilot is assisting me from taking my website from looking like this to something like this. Now, this website isn't super impressive, but this is the second video in this series where we're going to be looking at using AI tools to vibe code and do other sorts of things, leveraging the AI tools to keep building for us. So, if you haven't checked out the first video, you can see it right here. And in that video, I walk through how to get this website set up and deploying through GitHub pages. And in this video, I'm going to walk through how I use GitHub Copilot. So, using issues in GitHub as well as pull request to go convert the site from basically the starter template, which has the weather portion, it has the counter page on it as well to go migrate over to the other website that I showed you just moments ago. If that sounds interesting, just a reminder to subscribe to the channel and check out that pin comment for my courses on domain. With that said, let's jump over to GitHub and look at this issue list and walk through the pull request. Okay, so to kick things off, I'm on my repository here. If you watch the previous video, then you'll know that I have a private repository for working with my codebase and then a public repository where I publish the static website files to so that it can be deployed as a GitHub page. What I wanted to do as part of setting this all up was make sure that I could do the whole thing for this portion completely in GitHub using agents and having the issues be resolved by the agents through pull requests. Now we have lots of tools that we can leverage, right? We have chat GPT for talking to. We can have co-pilot to ask questions in our IDE. We have copilot and cursor and other IDE tools to be able to leverage agent mode and carry out the tasks for us directly in the IDE. But for this one, I wanted to walk through different variations of issues we can create in GitHub and leverage co-pilot to go do that for us. Now, if we have a look through this issue list, it's all pretty basic stuff. This is stuff that I probably could go figure out aside from some of the theming cuz I'm pretty terrible at that and the theme itself isn't really anything special. I just wanted something better than well this. This is pretty garbage to start with. So, I felt like anything would be an improvement. The first thing that I created was top bar navigation. So, let's go check out this issue. We can see that I just had changed the website to have top bar navigation instead of sidebar navigation. So, if we go look at the existing website, you'll see that it has a home button. Right now, if I go over to the original one, we can see that the navigation is actually up here in this hamburger menu. But if I make this bigger, we can see that it's actually leftnav driven. So, I didn't want that for my website. I wanted top navigation. So, I made this oneline issue and GitHub Copilot was able to go take care of that for me. So, let's go check out the pull request it made. It's pretty interesting if you haven't seen this before. So, it actually gives you a big description about what it's going to tackle. And it went and solved this. But it's neat because again, if you haven't seen this, if I press view session and we navigate into this, you'll see that you can see what it's thinking through. So, this particular session took almost 7 minutes. It starts by exploring the current website and the layout of things. So, I'll scroll through a little bit more cuz it's not super interesting. Something that's going to come up a little bit later is we're going to see that it has some build issues. So if we look, it ends up complaining the current .NET SDK does not support targeting .NET 9. So either .NET 8 or lower. And what we'll see is that basically in almost all of these pull requests, it keeps trying to downgrade my project to being .NET 8 because it sees this as a problem. So I have to basically tell it stop doing that. But this one overall was pretty easy. If we go look at the file changes, I jump back here. Files changed, right? It ends up just basically modifying things to go have the left nav taken away and adds in a top nav. So overall, pretty simple stuff. This is one that when it was doing it, I didn't even pull this code down. I just blindly trusted it. I said, "Okay, looks good to me." Basically, you know, classic code review. LGTM, boom, let's go. and then merged it in. So with that, I was able to move from having the left nav over to having a top nav for the website. So that was the first one. And what you'll notice as I'm going through these is that the nice thing about it is that all of these are pretty bite-size changes, right? And I'll have other videos, maybe not necessarily just for this code commute site, but for brand ghost, which is another product and service that I'm building on the side. I actually have far more complicated things that I ask it to do inside of these GitHub issues. And sometimes it's really good at it. Sometimes it's pretty terrible, but no matter what, it always gives me some ideas for how I'd like to go about building things. So, let's move on and look at the next two. We see remove the counter page and remove the weather page. So, again, if I jump back over into the original website, remember I showed you on the left nav, we have counter and weather. This is just from the the hamburger menu up top right now. But both of these pages exist and I didn't want them because that doesn't make any sense to have on my site. If you're noticing the unhandled errors just because Blazer's not actually running out of my IDE right now, so not to worry. Plus, this isn't the live site. But I didn't want these two pages in here cuz that's kind of ridiculous to have on my website. I don't need a counter or a weather page. So I basically just asked it to go remove these things. And if you look at the actual issue, literally just something as simple as remove the counter page and associated code. I'm not going to go through both of these. I just wanted to show you quickly that follows the same pattern, right? If we go to files changed, very straightforward. Removes a left nav and then removes the razor page. So overall, super simple. Both of these ones were ones that I didn't really have to go look at, which was nice. I just went into the pull request, had a quick peek, didn't have to pull down the code, just trusted that it could do it. Basically, these first three changes are me blindly telling Copilot, go do this. Right? The nice thing is because of how we wired this up in the first video, once it's done, I can just go over like a minute or two later, go over to codemute.com, refresh it, and there we go. It's all live magically for us. The next ones that we have on here, I'm just going to read them out briefly. Right, we have a landing page. So, I wanted to change again this site originally just said, "Hello world, welcome to your new app." I'm not going to have that on my Code Commute website. That doesn't make any sense. So, I needed a landing page. I wanted to put a site banner at the top. I have um the front of the Mercedes from Code Commute. I have that as a banner on YouTube. So, I figured that might be kind of cool on the site. The theming has a long way to go. This isn't my strong suit and I'm having AI do it for me, but I wanted a landing page. I wanted a site banner. I'm going to get into this aesthetic styling one because I'll show you what it created along the way and then we'll see from there a couple of other smaller changes. So, let's check out the landing page. I said I wanted the landing page to have this image on it. This is the Mercedes that I drive for code commute. This is my other car. It is a lovehate relationship. I really need to get it back on the road for code commute. Um, but we'll see sometime soon. So, I said, uh, you know, we want to have that image included in the repository. Spoiler alert, it doesn't seem to be able to do that for us, which is kind of interesting. So, just a note, it puts a placeholder in there. So, this one I did have to pull down and make a slight modification. I had to go drop the file in. But even so, I wanted to see what this one looked like cuz this was a bigger change. I gave it a tagline, which is what I use on my YouTube channel. I hate traffic. You hate traffic. I like code. You like code. Let's hang out. So, if I just jump over onto this live site, you can see that it actually has this in here now. But anyway, we'll see the landing page should describe code commute. And I just gave it a little bit of background. I said it's a vlog channel on YouTube and Spotify. It's run by me, Nick Cosantino. And then I said also known as dev leader for social media. I discussed software engineering and the channel is driven by user submitted questions because that's what code is. If you haven't checked out Code Commute, that's exactly what it is. It's my other YouTube channel. For me, it's a lot of fun. I talk about software engineering topics. And if you're interested in having your software engineering questions answered, head on over to Code Commute, leave a comment on a video with your question or just send them into me at Devleader on any social media platform and I'm happy to try and answer them with a video response on CodeCute. If we jump into this poll request, we'll have a little look here. It basically again gives us a write up about how it's going to go tackle this. This is pretty neat because at a glance you can see what it's thinking about doing. If we go into each of the sessions, we can see like exactly step by step what it's thinking through. And that's super handy when trying to debug things like this thing right here that's going to keep plagging us. And it says updated the project from .NET 9 uh to .NET 8. And that's not what we want at all. I don't want it to keep doing that. And then the other thing you'll notice is that it said um that it's adding the placeholder image. So these things again at a glance are super handy. It says the hero image. This is just right below the hero image. Placeholders included. And then tells me where the actual images. So I'm not really sure. I guess I could go through the session and read through. It probably says that it's not allowed to download this and include it. I'm assuming that's what it will say, but it's good for me to know because for other website updates, I need to go do something manually. There's probably ways that we could extend this or give it permissions to be able to pull down files. So, that will be something I look into in the future. And then basically has these changes, you'll notice that I end up questioning it. So, let's go see right here. It says, I would like to understand why you keep changing this. And can I click on it to go? Let's see. There we go. So, I noticed when I was reviewing the code because it said it in the top level, it's like .NET 9 to .NET 8. I'm like, why do you keep doing this? And then it told me because in the environment that it's working, it only has the .NET SDK. And then it's like, you're right. It's unnecessary for this repository. I put it back. Uh, I did um I did ask it, right? How do I ensure the build environment has a later version of .NET? It didn't actually respond to me. And I think that this happened because it wasn't actually in turn for it to go respond and then offer up a comment. So it was basically responding with changes and this comment that I left was not actually sort of in sync with uh prior to it making changes. So it didn't know that like I need to go make this change, which is kind of weird. It would have been nice if while it was going to deliver code changes, it could have come back here and answered my uh question in this thread. So, kind of interesting, but that's okay. So, at least I have an idea what's going on at this point. Then, uh, this is one that I pulled down when I went to go look at it. I'm just going to show you a screenshot of what it ended up producing for me. This is what it did. It dropped in well, it had a placeholder image here. I ended up basically copying and pasting over the real one. And then it put in some text, right? The text itself is not bad, right? It has the tagline that I wanted. It put in this text. It kind of wrote it all. It's a little bit weird. It's kind feels like AI wrote it, right? But all the content is driven by user submitted questions, ensuring we cover the topics you actually want to learn about. Who's we? It's is just me. Um, so feels kind of weird, but anyway, it's not terrible and it got most of the points right. But the way that this is styled is like it's horrific, right? This is why I ended up making that followup issue that we'll see in just a moment. But I made that issue to say like we need some type of styling going on here because if this is how it's going to go work through every page not going to be okay because I can't have this live on the internet. This is pretty embarrassing. I mean the current one isn't really rock solid but that's okay. It's still better than whatever that was. I gave it some tips here, right? I said change our content to all of the content and let's explore the world of software engineering together. like no man this is very much like an AISM in how it's writing not okay. So I just said like change it to this and basically everything else is pretty good. So this one just needed a few tweaks especially around the downgrade from .NET 8 but overall pretty good and then merge this one in. We'll go back to the issue list. Next up I had the site banner one made but I actually did the aesthetic styling one next in order in terms of execution. I'm just going to explain the site banner one briefly because this one I'm not going to spend a ton of time going through it, but it was the same kind of pattern. I said, "Go add this banner to the top. Here's the picture." And then I said, "Remove this text, too." Because if you look over here on the original site, it has code commute website. We don't want that. I just don't want code commute website. It's the project name. Doesn't make any sense. You'll also notice, too, it still has the blazer um icon in the top. I got to get rid of that. That'll be another follow-up one, but I need to get an icon made. But let's get this garbage text out of the top and let's use this banner image. So, without walking through how that one worked because it's very similar, I ended up having to pull the code down. I had to drop in the image and then push the code back up and let it finish. So, that's what's going on. But, I want to pause here for a moment because there's one more thing that I want to touch on. And because we were seeing the downgrade from .NET 9 to .NET 8, I said, "Okay, I got to do something about this. It never responded to me. I don't know how to correct it from doing this." So, I said, "It's time to get our C-pilot instructions put in." So, I'm just going to jump into this. If you're not familiar with this, basically, you can write like a file that gives it some extra context when it's making changes for you. If you've used VS Code or even Visual Studio and you've used GitHub within those two tools, you can use these files in your GitHub folder. Copilot instructions.mmd. Basically, it just gives your LLM extra context. And if you've used Chat GPT and made projects, it's a similar idea. You can add some basic like instructions that it will include on every prompt and that way it has a little bit more intelligence for what you're trying to do on those changes. I decided I'm going to give it some background in case I needed to do any, you know, extra writing or stuff on the website. Just a little bit of extra context. And then I added this right away. Project structure. It's .NET 9. Don't change it. Stop changing it. In one of the sessions, I'm not sure if I'll find it for this video, but one of the future sessions, it does the same thing where it's trying to build and it's like, I can't build .NET 9. Let me downgrade. And then it went but I see that I shouldn't downgrade because of the instructions. Yes. So that ended up saving the day on that. I just gave it some background that core website is in Blazer. And then I explained that we publish the contents from this repository into a public one. And then I needed to call this out because this is important. So I said the site's deployed statically. We can't rely on secrets or environment variables at runtime that need to be kept hidden from the user. what that means because I'm very used to building stuff that's hosted on a server. I can get in uh you know secrets at the time of deployment. I have environment variables. We can't really do that if we need to have secrets when we're deploying stuff statically. And that's because it's going to be public and we can't have secrets that are public. Or you can and you can follow in the footsteps of every other Vibe coder that's had a lot of big problems when they put that kind of stuff public. We're avoiding that. So, I wanted to give it this tip up front so it doesn't even try to build stuff that way. I'm going to get into the theme and styling a little bit later, but I just wanted to call that one out because along the way when I was doing these, I said, "We got to stop wasting time on these.net downgrades. Let's not do that." Let's go to the aesthetic styling one next though because this one was a little bit interesting. Said, "Apply a style template to the entire website." And I just gave it really generic stuff because I suck at this kind of thing. I don't really have a lot of experience designing, you know, very nicel lookinging front-end uh websites. So, just not something that I'm good at. I just wanted to kind of give it free reign. So, this is the first one in my opinion that is not a targeted change. It's not remove a button. It's not change some text. It's like here's a general idea about what I want. And this is kind of cool because I have experience with this in my other repository uh for brand ghost where I do give it some open-ended things. Sometimes it's pretty good. Most times it's not great, but it at least gives me some thoughts to go by. In this case, it did an okay job. So I said, for example, the landing page looks as though there's no hero image. Sorry, is the hero image is anchored to the top left. I showed you the unstyled one. It's terrible. And then just said like it's a big blob of text. like I want it to be responsive. I want it to kind of look nice and elegant. So, it went ahead and did that. Hero section transformation. It kind of talks about it. Responsive design elements, typography, cohesive color scheme. But I will show you I'll show you what it did for me because uh I think it is better. I don't even know if I can call it better. It made changes and it's not wrong, but like I said, I left it open-ended, right? So, let's see. This is the website styling that it created. So, um, not very great. So, we ended up going with a smaller hero image. Um, I don't mind the look of this text here. I like the idea of the gradient, but oh my goodness, this color scheme is not what I was imagining. So, I think it got some parts right and other parts are just way out there. What you can't see from this one is that these are responsive. So I can actually move my cursor over them and the UI moves a little bit. So it's kind of cool. But the color scheme and stuff like just not a not a huge fan. And just to show you the responsiveness if I go onto the main site right when I move my cursor over kind of bounces around a little bit, right? It's just it's just a little touch that makes it feel less like boring. But it did a pretty bad job with the purple theme. So this is one that I pulled down and I tried out locally. And then I just said because in between this is where I added the co-pilot instructions in this one. I'm pretty sure it did a downgrade as well. You can see right here initial project setup update net version compatibility. So it did that change and I was like no way. Um here are the instructions and then I just pasted them in because I'm not actually sure for GitHub copilot. If I tell it the latest commit of main, I'm not actually sure if it's able to go um in between when it's doing its commits, check what the latest status is. To be honest, I'm not sure if it's capable of that. So, I decided I'll tell it. And I'll also include what that uh file looks like. But this is where I introduce the theme and styling as well because I said that color scheme not okay. But how did I come up with this color scheme, you might ask? Well, I ended up going online and I just searched for color palettes or color palette generators and Adobe has them, Canva has them. There's a whole bunch of them. And I'm not really good with color schemes. I just wanted something that was going to be mostly like black and gray kind of thing. But I found one on I think it was uh it was either Canva or Adobe or Figma, one of those sites. I found this and it looked okay as a color palette. So, I said, "Let's try it out." Then I told it in the actual review like don't use this, right? So it starts work on this and then has its own commit where it's saying how it's using these things. Just to show you the intermediate step. This is what it looked like. Okay. So I was looking at this and I'm like it's still pretty gnarly. I'm not a huge fan. I didn't realize like these blue colors were going to be so blue, I guess. But I kind of like this part of the top nav, right? Like this this kind of black into gray into like some of the bluish kind of color. But the whole thing like together I was like this isn't the right not the right vibe for me. So I went back looked for another theme and I should mention that what I did was actually put this into chat GPT. I forgot to bring this up in the first part, right? So I gave it a screenshot and I said describe this so that an LLM can interpret it. This is me going like I'm I'm vibing this the entire way through. Here's a pallet. It's just a screenshot. You go figure it out and tell me how I should talk to an LLM about it. And then when I realized that I didn't really like that theme, I found another one. So this one is mostly just like blacks and grays, right? So let's try this one instead. And then it gave me um this new output. So, just to kind of scroll back down inside of the poll request, I left the comments here and I said, I just want that um that hero image. I want it to be bigger because it seems kind of weird that it's small now. And then I said, why not link that to my YouTube channel so when someone's on the site, they can just click boom, right to YouTube. That's where all the Code Commute content is. Anyway, I did that and then I gave it this updated color scheme. Now we go through it and it said it made the changes, right? It's using those new colors. And what I noticed when I pulled it down is two things. One is that if I look here, see this is me actually making a code change. So I already had the code pulled down to check it out. But I noticed that going back up, I said put this link in there inside of the Blazer P or the Razer page. Basically, what was happening was it put this link in, but the at symbol is a special symbol and you need to escape it when you're using that in a Razer page. So, I had to use two at symbols because that's how you escape it to be able to provide this link. So, I already had the code pulled down. I just committed it and pushed it back up. And then I told it that I need to have um these other colors replaced because it left some of them still in. So, I didn't take a screenshot of it, but I had this intermediate step where it was like some of the blues left behind and some of these new like blacks and grays. So, I said, "You got to fix that for me because it's pretty garbage." But the end result is mostly what we see here. We get that styling, right? I still have this text up at the top because that was the banner change. I don't actually have the banner image up here in this screenshot, but this is what it made. And I said, "You know what? Good enough for now. We can always iterate on the theming and styling. I like the rounded edges of the picture. I like that it's responsive on the actual live site. I don't like what's going on with these square edges here. But anyway, there's room to improve. Let's continue. Okay, so we got through the aesthetic styling one. I ended up asking it to change the landing page text links. Again, this is a pretty straightforward one, just an itemized list of go make these very specific changes. And what I wanted to do is just make sure that I could have interaction on that main page. Which means if you hover over code commute, it's just going to take you to code.com, right? Nice and simple. I actually have never clicked that until right now in the video. I didn't realize that in Blazer, it's just going to scroll me back up. That's pretty neat. Uh, but YouTube and Spotify links will work. So, if I uh middle click just to open them in new windows, right? This is my code commute YouTube channel. see me driving in the car or talking right here with my small mic and then me on vacation. Right. So, this is code commute. It's also on Spotify as well. So, if you want to check that out, you can do so there. But those links work. I have a link to dev leader. So, this is the current YouTube channel. And what else? I think I have a link to my LinkedIn. So, I have some links on the main page now thanks to this GitHub issue. So, it was a very simple change. And then I asked to change some of this text here because this still read kind of wrong. It says ensuring we cover the topics. It just doesn't sound right to me. It sounds like I am multiple people. This is a very simple change for GitHub Copilot because it was an itemized list of really simple swaps to make. So not too exciting. The final thing was just this banner changes. So I'm just going to pull this up. We still had an about link. So if I go back to the old site, this one here was kind of hanging out for the entire thing and then if I go back to here, what was happening was that there was another row above home that was the same height. So I just said go remove that and go remove the about button as well. So two very straightforward changes. Again, if we jump into this code, right, you can see at the top it's plus two lines minus 92. We love changes like that. So, it just pulled out a bunch of code that wasn't being used and some of the spots just to make sure that that bar could be collapsed and the about button was no longer there. So, overall, a very straightforward one. This is one that I didn't even pull down because I could see how it was changing things and I could trust it blindly. That's going to be it for this particular video to make sure that we can get the website to what you see here on the screen. Right? It's pretty simple. It's interactive, but what I want to do is make sure that users can submit questions. Now, that's going to be in a follow-up video because being able to submit questions isn't something that I can just generate an email from on this page. And that's because I would need to use some secrets for that. And if you recall earlier in this video, because this is a public site, that file contents is going to be public as well. I can't use secrets from GitHub to do that now. So, I need to get a little bit more creative. And in that follow-up video, I'll explain how I'm going to use Azure Functions to be able to send emails from my website. So, when that's ready, you can check it out up here. Thanks, and I'll see you next time.