Fred’s Cars – Full Stack Development

In Chapter one we mocked up what the “Fred’s Cars, Truck’s & Jeeps” website should look like and we built it out using just static HTML. In Chapter 3 we started using dynamic frameworks and rebuilt it using ASP.Net Core MVC. And in Chapter 4 we rebuilt it yet again in ASP.Net Core Razor Pages. In Chapter 5 we saw it in ASP.Net Core Blazor, the first SPA (Single Page Application) type of app we looked at.

So we have a pretty good idea of what our car dealership website should look like by now. All we have to do now is implement our Full Stack Architecture. But what are the steps we need to do that? Let’s lay it out. These are the steps we will complete in this chapter in order to upgrade and migrate Fred’s Cars to a Full Stack Architecture.

  1. Prepare our environment: The first thing we have to do is install all the tools we need on our system. We have to install Angular and Visual Studio 2022 on our machine and make sure everything is working. When we install Visual Studio it should also install a version of SQL Local DB on our machine. But we have the option of also installing the full SQL Server 2022 Express if we want to. And we might want to install a tool called Postman so we can easily test our Rest Services and Web APIs as we build them.
  2. Create the Visual Studio Solution: Once everything is setup and ready to go, we will create a Visual Studio solution called FredsCars.sln. Then we will create two projects within the solution. First we will create an ASP.Net Core Web API app called FredsCarsAPI.csproj. Then we’ll create a Stand Alone Angular TypeScript App called FredsCars.esproj.
  3. Build the FredsCars Web API Rest Services: Next we’ll start building out the backend Vehicles Rest Service to feed data out to the Angular Application in JSON format to consume. And eventually some Rest Services to update the database. We may need some Rest Services to update and create Car and Vehicle products on the car lot.
  4. Build the FredsCars Angular Application: Finally we’ll develop the front end UI application in Angular allowing the user to interact; Users can search cars and vehicles. Admins can create and update vehicles in the database.

Let’s get started! In the next module we’ll start to build out our system environment.

< Prev
Next >

Leave a Reply