19. Building a Full-Stack Project: Part 1

Project Setup and Planning

We will create a task manager application where users can create, view, and manage tasks. This project will have two main parts:

1. Backend: A .NET Core API for managing tasks.
2. Frontend: A React application for interacting with the API.

Designing the Application Architecture

1. Backend (API):

• Task model with properties: Id, Title, Description, IsCompleted, and DueDate.
• Endpoints for CRUD operations.
• Database integration using Entity Framework Core with MySQL.

2. Frontend (React):

• Components: TaskList, TaskForm, TaskItem.
• Fetch tasks from the API.
• Create new tasks and mark them as completed.

Setting Up the Backend with .NET

Step 1: Create a New ASP.NET Core Web API Project

1. Open Visual Studio and create a new project.
2. Select ASP.NET Core Web API, name it TaskManagerAPI, and configure it to use .NET 6.0.

Step 2: Add NuGet Packages

1. Install Entity Framework Core and MySQL provider:

• Right-click on the project, select Manage NuGet Packages.
• Install Pomelo.EntityFrameworkCore.MySql, Microsoft.EntityFrameworkCore, and Microsoft.EntityFrameworkCore.Tools.

Step 3: Create the Data Model

1. Add a Models Folder and create a Task.cs file:

namespace TaskManagerAPI.Models
{
    public class Task
    {
        public int Id { get; set; }
        public string Title { get; set; }
        public string Description { get; set; }
        public bool IsCompleted { get; set; }
        public DateTime DueDate { get; set; }
    }
}

Step 4: Create the Database Context

1. Add a Data Folder and create a TaskContext.cs file:

using Microsoft.EntityFrameworkCore;
using TaskManagerAPI.Models;

namespace TaskManagerAPI.Data
{
    public class TaskContext : DbContext
    {
        public TaskContext(DbContextOptions<TaskContext> options) : base(options) { }

        public DbSet<Task> Tasks { get; set; }
    }
}

Step 5: Configure Database Connection

1. Open appsettings.json and add the connection string:

{
  "ConnectionStrings": {
    "DefaultConnection": "Server=localhost;Database=taskmanagerdb;User=root;Password=yourpassword;"
  },
  "Logging": {
    "LogLevel": {
      "Default": "Information",
      "Microsoft.AspNetCore": "Warning"
    }
  },
  "AllowedHosts": "*"
}

2. Configure Services in Program.cs:

using Microsoft.EntityFrameworkCore;
using TaskManagerAPI.Data;

var builder = WebApplication.CreateBuilder(args);

// Add services to the container.
builder.Services.AddDbContext<TaskContext>(options =>
    options.UseMySql(builder.Configuration.GetConnectionString("DefaultConnection"), new MySqlServerVersion(new Version(8, 0, 21))));

builder.Services.AddControllers();
builder.Services.AddEndpointsApiExplorer();
builder.Services.AddSwaggerGen();

var app = builder.Build();

// Configure the HTTP request pipeline.
if (app.Environment.IsDevelopment())
{
    app.UseSwagger();
    app.UseSwaggerUI();
}

app.UseHttpsRedirection();
app.UseAuthorization();
app.MapControllers();
app.Run();

Step 6: Create the Controller

1. Add a TasksController.cs in the Controllers folder:

using Microsoft.AspNetCore.Mvc;
using Microsoft.EntityFrameworkCore;
using TaskManagerAPI.Data;
using TaskManagerAPI.Models;

namespace TaskManagerAPI.Controllers
{
    [Route("api/[controller]")]
    [ApiController]
    public class TasksController : ControllerBase
    {
        private readonly TaskContext _context;

        public TasksController(TaskContext context)
        {
            _context = context;
        }

        [HttpGet]
        public async Task<ActionResult<IEnumerable<Task>>> GetTasks()
        {
            return await _context.Tasks.ToListAsync();
        }

        [HttpGet("{id}")]
        public async Task<ActionResult<Task>> GetTask(int id)
        {
            var task = await _context.Tasks.FindAsync(id);
            if (task == null)
            {
                return NotFound();
            }
            return task;
        }

        [HttpPost]
        public async Task<ActionResult<Task>> PostTask(Task task)
        {
            _context.Tasks.Add(task);
            await _context.SaveChangesAsync();
            return CreatedAtAction(nameof(GetTask), new { id = task.Id }, task);
        }
    }
}

Step 7: Enable and Use Swagger for Testing

1. Run the Application:

• Press F5 or click the Run button in Visual Studio to start the application.
• The Swagger UI will be available at https://localhost:5001/swagger (or a similar URL).

2. Test the API:

• Use Swagger UI to test the CRUD operations.
• GET /api/tasks to fetch all tasks.
• GET /api/tasks/{id} to fetch a specific task.
• POST /api/tasks to create a new task.

Step 8: Set Up MySQL Workbench and Migrate Database

1. Open MySQL Workbench and connect to your local MySQL server.
2. Run Migrations to create the database schema:

• Open the Package Manager Console in Visual Studio (Tools -> NuGet Package Manager -> Package Manager Console).
• Run the following commands:

Add-Migration InitialCreate
Update-Database

Conclusion of Part 1

We’ve set up the backend of our task manager application using ASP.NET Core with MySQL. The database schema is managed through Entity Framework Core, and we can perform CRUD operations via our API.

More from this Series

This blog is part of my series “Building Dynamic Web Apps: React and .NET Unleashed”. If you found this helpful, be sure to check out the other posts in the series:

Building Dynamic Web Apps: React and .NET Unleashed

Building Dynamic Web Apps: React and .NET Unleashed