Build an ASP.NET Core Blazor Web App - End to End Video Series

normally this is where I would say let's jump over to visual studio though but we're not going to look at code actually in this video we're going to do something a little bit different than I usually do on this channel usually I'm walking you through some C code or talking about some general software engineering guidance that I want to be able to provide you but this time it's going to be different I had some feedback from colleagues at Microsoft as well as my newsletter subscribers that you wanted to see some different type of content on my channel in particular it had to do with asp.net Blazer and Building Things you want to see real things being built so I decided that I'm going to kick off a series of videos where we're going to build an asp.net core Blazer web application and it's not just going to be the next budgeting or calculator app and not that there's anything wrong with those but I wanted to build something real that I'm going to use if that sounds interesting stay tuned check that pin comment for a link to my newsletter and let's jump into things normally this is where I would say let's jump over to visual studio though but we're not going to look at code actually I'm going to spend some time drawing on a virtual whiteboard that's why I have this I picked up a little drawing tablet so that I can start drawing some system and block diagrams in my videos and be able to provide some different type of content for you but before I start drawing I wanted to talk about what we're going to build and in particular I wanted to talk about who we're building it for and why we're building it you see something that I want to be able to bring to the channel is that I have years of developing software for real customers and I want to make sure that when I'm helping educate this audience I'm not not just talking about building things in C there's nothing wrong with that I like being able to provide that type of content but I have expertise and shipping value to customers and when we start framing things as being able to deliver value to customers we start looking at software differently so while I think it's extremely valuable that you spend time building side projects building hobby things and just being able to build things in general I think that there's something to be said about shifting that a little bit towards being able to ship value to customers and the big difference is that you start to have constraints when you have customers like I love to refactor code if I could just keep refactoring the same code over and over and making it more clean and tidy and trying out different patterns I would waste a lot of time doing that but enjoy it but when you're trying to ship value to customers you don't have that luxury and sometimes that means leaving cod in a little bit of a gross situation so it just means that we have to be thinking about the next biggest priority for shipping value to customers so it's a different mindset when we go into this kind of thing so I wanted to start with what we're building and for who we're going to build something that's pretty simple in theory it's just going to be a dashboard for analytics about different social media and Publishing platforms that's it these types of things exist across these different platforms like Tik Tok Facebook YouTube you name it but a lot of these metrics are split out across different platforms the platforms that you're getting metrics for and what I want to be able to do is bring that all into one spot and have it be extensible for the different platforms that I'm engaged in so as we go through this exercise I'm technically going to be the customer that we're building for but I think we can make me a little bit more generic and it's going to be someone who's trying to publish content across different platforms and they're tired of going to different spots to see all of it and the other part is that we want to be able to extend this to different types of platforms that we're engaged in so the problem that we're solving for this type of individual I mean me in this case is that instead of having disperate analytics spread out everywhere I want One dashboard in one spot that allows me to see the growth of my social presence all in one spot and that was the other key part is that I want to see the historical growth of my social presence that means it's not sufficient just to reach out to say the API that Facebook might offer for your follower growth or something like that I want to be able to see it growing I mean hopefully growing over time and have that trended and plotted on a graph so it's pretty simple Theory I think that that's pretty straightforward but I wanted to start with who we're building it for and why because I think that's an important thing that we have to consider when we're trying to get a market for a product or something we want to build to be able to ship to people now in real life we might be spending some time for Market fit and things like that doing competitor analysis but we're going to assume that that kind of stuff is out of the way and I want to talk about what I like to do next from putting some systems together in order to try and solve problems and I like to start with really high level block diagrams so this is where I'm going to switch over to my drawing tablet and let's check out some ideas so I should preface this I'm pretty terrible at drawing so buckle up and hopefully this is going to be helpful when I start getting into a system like this I'm not trying to pick out specific Technologies like am I going to have a mySQL database I mean like I don't even know if I need a database right like I want to get into some of these really high level thoughts and for this I want to start thinking about what's available right because when I was talking about the problem state statement I was thinking like there's already analytics for these platforms but what does that look like and why isn't that working well for us so if I think about what's going on I want to draw like some type of clouds and um these are going to be the different say social platforms that we have to work with right so these blobs I'm just drawing this vertical line to sort of delineate this external part of the system that we're talking about um with these different uh you know social platforms or U it could be like medium or other publishing platforms so these Services exist online and whether or not they have an API to them to be able to get analytics um that's one way so like we could be asking this uh you know to go fetch analytics so some API um maybe for uh this platform D here right maybe for that one uh there's no API but we want to be able to disc scrape data for it so uh instead of that we have um you know some something where we could go to that site we could do some scraping we don't really know quite yet what's going to be available to us but the way that I'm thinking about this is that these types of things exist right now right like I could go write a scraper for a web page or check if there's an API uh but that's only going to fetch me what currently exists so that's one part of the puzzle and I think this is important to call out too that I'm I'm trying to break down the problem into smaller pieces right so we have some type of data fetching going on the other thing that I called out is that I want to see this plotted onto you know a chart some type of user interface and I'm I want to build this in Blazer um if you're building things for your customers you want to think about what platform and stuff you're going to build for but like in my particular case it's not important that it's Blazer it's just that that's what the audience is asked for so I'm tailoring it to that um I highly recommend you pick things that you know you pick Frameworks and tools that are aligned to uh you know your skill set what's going to allow you to ship value to customers effectively don't just pick things because it's the shiny new thing so this is you know purposefully selected as blazer for Content creation but it could be built in anything to be honest right now um and in fact I wouldn't build this in Blazer personally because Blazer is not where my skill set is I have more experience building asp.net core backends and then for front ends it's even though I'm not good at react I have more experience in react but part of this is going to be that I'm learning Blazer and I'm teaching you along the way too but that means that I need something you know I need some user interface it's going to have some chart with these lines on it um hopefully that social growth going up into the right but this is some UI that we have and challenge is that we need to get that data that we're we're being able to fetch and we need to put it on the UI but it's not that straightforward because otherwise we would just wire this up directly you know have it wired up to the UI but I mentioned that I want to have historical data to me that's a critical part because I want to be able to see this growing over time so I am going to need some type of storage I'm going to draw that right here so we have some type of database um what kind of database is it no idea postgress is it MySQL is it mongodb it could be anything right I don't know and I don't care right now but I think that I need to have some type of database and the reason I say that is because um I want to be able to have something running right I don't know what it is but that's going to be calling all of the code you know doing this part here right it's going to call that stuff and then it's going to take that and put it into the database so that way we can have something running uh on a schedule ual or something like that and it's going to be fetching data or scraping periodically however it needs to work um so this right here is actually the part that's going to be um gluing together if you will the API endpoints that we have to the database but now the next part is that once we have it in the database I feel like it's pretty straightforward to be able to um have the uy you know go through some whether it's like a layered architecture or we could do vertical slice whatever it happens to be but our UI will be able to call into our our backend and access the database so this is going to be a Blazer app and it's going to access our database and the database will be populated through some type of scheduled work that will be calling these apis um these different platforms now that's a really highlevel overview of the different pieces of course when we start building this we're going to have to get into more specific so I'm not trying to gloss over that I just want to show you my thought process for being able to get some blocks drawn out now the other thing and you might have predicted this if you watch some of my other content is that this is absolutely going to use plugins for being able to build this out and that's because we want to be able to support many social and Publishing platforms that have analytics and I as the end user want to make sure that I can extend this to other platforms that I want to be able to watch the growth of so the thing that I want to try draw here is the sort of highlevel idea around plugins right so if I'm going to go back to having this kind of barrier to the different platforms that we have to work with so we have um I'm just going to draw a couple of them these are supposed to be like a cloud shape but I'm terrible at drawing like I said so that's not a b that's a b and then so a b c d going to deal with four for now right so these are sort of out the web so that's out on the web and what we want to be able to do is talk about how we have access to these different types of things so what I'm thinking about doing if you recall I talked about having something like auler so I'm going to put auler there and the way that this scheduler is going to work at least in my mind in the beginning is that I needed to be able to access the apis but we have ABCD written right now and literally I can think about 15 platforms that I want to be able to support and there's going to be more that com so the idea is that it needs to be extensible so I want to think about how to minimize the impact of that so this is where some of the design patterns and stuff come into play right but I'm going to be doing like plugins here and I want to have a facade in front of it so I want to explain that my thought process is that each platform that we want to integrate with needs to have a plugin associated with it okay and the reason that it needs that is because each platform that we want to talk talk to is going to have its own way to get analytics whether it is an API or whether it's web scraping or whatever it happens to be right I need to have a plugin to be able to do that and when I say A plugin the way that you can conceptualize this right now is like I just need custom code per platform to be able to interact with it but the reason that I'm already jumping to having a plugin is because I'm thinking of and I've built systems like this right I'm thinking about the rest of the code that needs to call into to this what I don't want to do is build a system where okay I have you know these different platforms that I have to interact with and every time I add a platform I need to go touch code in like a 100 spots right every time I add a new feature I have to go make sure it's supported with this new plugin like that's not scalable and the way that I work around that is I build plugins so when I say A plugin it's that it has a common interface or as much as possible a common interface so that means the these plugins that I have listed here from a to d they all have a different implementation but to the code that we have on the left hand side like the system we're building it's going to have a common API in C that we can work with and what we can do is put what I call a facade in front of that so I'm going to put an F for facade and that means that when we go to use theer and it will say on whatever schedule I mean we can look at different Frameworks for building the Schuler but the idea behind it is that it will execute some code that in my opinion needs to be able to somehow talk to these plugins and like I said instead of having to custom code every single part of this to support a new plugin we want to go through this facade so we simply go through here and then the facade knows how to go to these individual pieces that way it always just looks like one in and out on the facade itself so the way that that will work is that we have to make sure that we have something that we're providing on here it could be um you know it could be an index for the plug-in it could be some other types of parameters it could just be nothing and we say hey hey facade go get me all of the analytics and it will go enumerate you know all of the plugins that we have and pull back the uh full result set so I don't know the right implementation of that right now and at this point it doesn't matter cuz we're not coding it but the thought process is putting this facade layer in place for the different plugins so that way we have this type of thing going on and they can cross the uh the barrier that's out to the web and inside of our code like everything that we're putting over here becomes isolated even from our own plugins we don't have to worry about having a million different spots touch each of these plugins they just go through the facade and that's why I love this design pattern I know I said at the beginning of this I wasn't going to focus on design patterns and stuff but the facade here is so helpful because it helps Shield us from all this complexity that can come up with the plugins so um I think it's a great fit for this type of thing all right so we had a very high Lev look at some different parts of this system that we're thinking about building and a quick recap is that it's going to be a Blazer app it's going to be able to support many plugins for different social media and Publishing platforms that we can pull analytics from and it will have something that can go talk to those different apis through a facade to try and reduce the complexity inside of our code and kind of push that all to the plug-in level but it will call those different plugins get those analytics and we're going to put that into a database we haven't talked about the schema or anything yet that'll come later when we start going into the code and the UI that we're going to build in Blazer will be able to end up accessing our database we'll have things like repository patterns and we'll try to put some Entity framework in there to access our database I think that will be good to cover as well and I think that this is going to be an awesome little tool that I can get put together I'll have the repo shared and you can follow along with the video series as well as the repo itself so um when it's all posted I'll try to see even if I can accept poll requests and the Cadence of these videos going out might be slower than what's happening on the repository so when that's all posted up I'll make sure to update the description and the pin comment so you can have that and then you may find that the repository itself is you know going faster than the video series so feel free to follow along in both and uh if you're interested in more stuff like this this began on my newsletter so if you're subscribed to my newsletter and like I said at the beginning of this that'll be in the pin comment you can see this kind of stuff before it becomes Live on YouTube and have some more like uh Insight early on so hopefully this sounds like an interesting series I'm person personally excited to build this because I want to use it I told myself that if I was going to do something like this and have a build along that it needs to be something I'm going to use I don't have a lot of time to go building other things I spend a lot of time on my side project that's called meal coach and that's a fullon you know web application that has customers using it so I dedicate a lot of time to that outside of my 9 to5 and this felt like a good platform seems simple enough and and it seems like it would be helpful so stay tuned follow along and let's build some Blazer stuff together thanks and I'll see you next time