Skip to main content

​
Prerequisites

Before you begin, ensure you have the following installed on your system:

Node.js & npm

Version 14.x or higher for running the Angular frontend

Angular CLI

Version 14.2.1 for Angular development commands

.NET 6.0 SDK

Required for building and running the .NET Core API

SQL Server

LocalDB or SQL Server instance for data storage
The project uses SQL Server LocalDB by default. If you’re using a different SQL Server instance, you’ll need to update the connection string in appsettings.json.

​
Installation

1

Clone the Repository

Clone the Locker Management project to your local machine:
git clone https://github.com/oneagustiranda/LockerManagement.git
cd LockerManagement
2

Set Up the Database

The project uses Entity Framework Core migrations. Navigate to the API directory and apply the migrations:
cd API/Locker/Locker.API
dotnet ef database update
This will create the LockerDb database with the necessary tables.
Make sure SQL Server LocalDB is running. If you encounter connection issues, verify the connection string in appsettings.json.
3

Configure the Backend

Review and update the connection string if needed in appsettings.json:
{
  "ConnectionStrings": {
    "LockersDbConnectionString": "server=(LocalDB)\\MSSQLLocalDB;database=LockerDb;Trusted_Connection=true"
  }
}
For SQL Server instances other than LocalDB, update the server address accordingly. For example: "server=localhost;database=LockerDb;Trusted_Connection=true"
4

Run the Backend API

From the API directory, start the .NET Core API:
cd API/Locker
dotnet run --project Locker.API
The API will start on https://localhost:7281 by default.

Verify API is Running

Navigate to https://localhost:7281/swagger to access the Swagger UI and verify all endpoints are available.
5

Install Frontend Dependencies

Open a new terminal window and navigate to the Angular frontend directory:
cd UI/locker
npm install
This will install all required Angular 14 dependencies including:
  • Angular core packages (v14.0.0)
  • RxJS for reactive programming
  • Angular CLI build tools
6

Configure the Frontend

The Angular service is pre-configured to connect to the API at https://localhost:7281.If you’re running the API on a different port, update the baseUrl in src/app/service/lockers.service.ts:
baseUrl = 'https://localhost:7281/api/lockers';
7

Run the Frontend

Start the Angular development server:
ng serve
The application will be available at http://localhost:4200/. The app will automatically reload when you make changes to source files.

​
Your First Locker

Now that both the backend and frontend are running, let’s create your first locker:
1

Access the Dashboard

Open your browser and navigate to http://localhost:4200/. You’ll see the Locker Management dashboard with a form on the left and the locker grid on the right.
2

Create a New Locker

Fill in the form with the following information:
  • Locker No: A unique identifier (e.g., “A-101”)
  • Size: A numeric value (e.g., 2 for medium)
  • Location: Building or area (e.g., “Building A - Floor 1”)
  • Employee No: Leave empty for an available locker, or enter an employee ID (e.g., “EMP001”)
Click Save to create the locker.
Empty lockers will appear with a green background, while occupied lockers (with an employee number) will have a blue background.
3

View the Locker Card

Your new locker will appear in the grid as a card showing:
  • Locker number
  • Location
  • Employee ID (if assigned)
  • Color-coded status (green = empty, blue = occupied)
4

Update a Locker

Click on the locker number in the grid to populate the form with its data. Modify any field and click Save to update.
There is a known limitation with the update functionality. Updates work, but the routing needs improvement for a smoother experience.
5

Delete a Locker

Click the trash icon on any locker card to remove it from the system.

​
API Endpoints

The system exposes the following RESTful endpoints: 
curl https://localhost:7281/api/lockers

​
Business Rules

The API enforces the following business rules:

Unique Constraints

  • Each locker number must be unique
  • Each employee can only be assigned to one locker
  • Empty employee numbers are allowed (represents available lockers)
When attempting to create a locker, the API will validate: 
// Employee number uniqueness
var empNumberExist = await lockersDbContext.Lockers
    .Where(x => x.EmployeeNumber == locker.EmployeeNumber 
           && !x.EmployeeNumber.Equals(string.Empty))
    .Select(x => x.EmployeeNumber).ToListAsync();

// Locker number uniqueness
var lockerNumberExist = await lockersDbContext.Lockers
    .Where(x => x.LockerNo == locker.LockerNo)
    .Select(x => x.EmployeeNumber).ToListAsync();

​
Data Model

The TypeScript model on the frontend matches the C# model on the backend: 
public class LockerInfo
{
    [Key]
    public string LockerNo { get; set; }
    public string? EmployeeNumber { get; set; }        
    public int Size { get; set; }
    public string Location { get; set; }
    public bool IsEmpty { get; set; }
}

​
Troubleshooting

If you see connection errors, verify that:
  • SQL Server LocalDB is installed and running
  • The connection string in appsettings.json is correct
  • You’ve run dotnet ef database update to create the database
The API is configured with CORS to allow all origins in development:
builder.Services.AddCors((setup) =>
{
    setup.AddPolicy("default", (options) =>
    {
        options.AllowAnyMethod().AllowAnyHeader().AllowAnyOrigin();
    });
});
Make sure the API is running when you start the Angular app.
The port is configured in launchSettings.json. If you need to change it, update both the API configuration and the baseUrl in the Angular service.
Ensure you have the correct versions:
  • Node.js 14.x or higher
  • Angular CLI 14.2.1
Try clearing the cache:
npm cache clean --force
rm -rf node_modules package-lock.json
npm install

​
Next Steps

Explore the API

Dive deep into the API endpoints and integration options

Features Overview

Learn about dashboard features and locker management

Database Schema

Understand the data structure and migrations

Architecture

Learn about the system architecture

Employee Tracking

Learn how employee assignments work

Locker Management

Understand locker creation and updates

API Models

Explore the data models and schemas
This quick start guide gets you running locally. For production deployments, you’ll need to configure proper authentication, update CORS policies, and use a production-grade SQL Server instance.

Build docs developers (and LLMs) love

Get started for freeTalk to us