The simplest way how to became a software engineer and write your very first real-world app

6 min readJan 10, 2024

As I promised in the last article , we will create a simple but real world app for fast start your technical career. Our goal is to be as simple as possible.

We will not focus on code quality or the best design. We will focus on functional and useful result and in the next articles we will cover topics like code design and architecture.

Before we start

You have to install following components:

For more information see this video.

Our new app cookbook

Let’s begin.

Open your Visual Studio and choose Blazer web app as our Dev framework

Click next

Choose project name like {company name}.{project name}.{application type}. In our case: “FakeCorp.Ordering. App”
Select location for your project. I recommend choose short name folder in your Root drive. Like Dev / {project name}
Click to the next button

Now fill in dialogue according to this screen. For now we will use server interactive render mode globally.
Click to the create button and let’s our programming begin!

The first class — Order

Create a new class which will be container for our order data.

There will be two properties.

ID is the unique identifier for our order and we will initialize it by a new identifier
Description is order description

Paste following source code.

namespace FakeCorp.Ordering.App;

public class Order
{
    public Guid Id { get; set; } = Guid.NewGuid();
    public string? Description { get; set; }
}

Install NuGet package for managing your data

Click “Manage NuGet Packages” item from project dependencies context menu.
Find and install Npgsql.EntityFrameworkCore.PostgreSQL package

The DbContext class

Entity framework is our ORM (Object Relational Mapping). It’s the easiest way to start work with a relational database.

DbContext is the main part of Entity framework Core ORM.

Create new class and change name to “OrderingDbContext”. Paste following source code.

using Microsoft.EntityFrameworkCore;

namespace FakeCorp.Ordering.App;

public class OrderingDbContext : DbContext
{
    public OrderingDbContext(DbContextOptions options) : base(options)
    {

    }
    protected override void OnModelCreating(ModelBuilder modelBuilder)
    {
        modelBuilder
            .Entity<Order>()
            .ToTable("orders");
    }
}

This class is inherited form the DbContext and contains required constructor and simple Order entity mapping to PostgreSQL (Database) table.

DbContext configuration

Now we have to configure our DbContext. Go to the program.cs class and add the following configuration on the right place. Note: Please change server value, port user ID or password if you have a different postgreSQL setup.

builder.Services
        .AddDbContext<OrderingDbContext>(options => options
        .UseNpgsql("Server=localhost;Port=5433;Database=FakeCorpOrdering;User Id=pguser;Password=pgpwd"));

The first Blazor Page / Component

Add a new Blazor component for our order management. And paste following code.

@page "/orders"
@using Microsoft.EntityFrameworkCore

<h1>Order detail</h1>
<div>
    <div class="form-group">
        <label for="description">Description</label>
        <InputTextArea @bind-Value="CurrentOrder.Description" class="form-control" id="description" placeholder="Enter description"></InputTextArea>
    </div>
    <button type="submit" @onclick="CreateOrder" class="btn btn-primary mt-3 mb-5">OK</button>
</div>

<h1>Order list</h1>
<table class="table">
    <thead>
        <tr>
            <th scope="col">Description</th>
        </tr>
    </thead>
    <tbody>
        @foreach (var order in Orders)
        {
            <tr>
                <td>@order.Description</td>
            </tr>
        }
    </tbody>
</table>

@code {
    [Inject]
    public OrderingDbContext DbContext { get; set; } = default!;

    public Order CurrentOrder { get; set; } = new Order();

    public IList<Order> Orders { get; set; } = new List<Order>();

    protected override async Task OnInitializedAsync()
    {
        Orders = await DbContext.Set<Order>().ToListAsync();
    }

    private async Task CreateOrder()
    {
        DbContext.Add(CurrentOrder);
        await DbContext.SaveChangesAsync();
        CurrentOrder = new Order();
        Orders = await DbContext.Set<Order>().ToListAsync();
    }
}

This component contains following:

URL address for our page (@page “/orders”)
Simple HTML which contains input for description and button for creating a new order.
Simple table for list of created orders.
OrderingDbContext property with injection (framework fill this automatically)
Current Order with initialization which will be managed by this simple form
And finally add a new empty list which will be filled by all orders from the database
There is overridden OnInitializedAsync method which contains logic for retrieving list of orders from the database.
And the last method is CreateOrder which do following: Add a current order to DB, save changes to the database, clear current order by a new instance and refill order list from the database

Page navigation adjustment

Go to Components/Layout folder and open NavMenu.razor file. Change name and url of the Counter item like in this picture

Excellent that’s it from the code. Now we will switch to the database perspective!

Database

Open PG admin application
Select postgressql instance and create a new database

Fll the name e.g. FakeCorpOrdering and click Save

expand a menu from the new created database, select schemas, public, tables and create a new table

Set table name to orders and switch to columns tab. Add Row for every column what you need for your app. We will add ID as our unique identifier and primary key. Another column is description. You can change required length for every text column.
Click to the save button

Hold the breath and cross your fingers

We are going to run and test your the very first application. Click the Run button in the visual studio or just press ctrl+F5 keys on your keyboard .

Visual studio will automatically open new browser tab with your application. Navigate to your new orders management page, fill the description field and click OK.