It's the start of the first week at the Talent Mobility Program with Azubi, and I'd love to take you on a technical tour of our first project. Our first technical project is to build a Learning Management System called G-Client. As a Full-Stack Software Engineer, I have decided to develop both the frontend and backend to have full flexibility to add more functionality later.

I will guide you through my thought process, and my system architecture for the project and then dive into the code later.

Roles and Actions

G-Client has two main roles: a user can sign up as either an Admin or a Learner. Each role has its dashboard or panel. Therefore, there is authentication for both administrators and learners.

An authenticated Admin can:

• Add tracks

• Add courses

• View learners

• Issue invoices

• and manage reports.

A learner can:

• View available tracks

• Preview a track

• Enroll in any track

• Rate a track

Both can update their profiles. These, therefore, are the major modules of the project. We first focused on Admin-related activities before moving on to Learner-related operations. Now that you have an overview of the project, let's dive right in.

The project is divided into four phases for Admin and another four phases for Learner. In the next articles, we will be diving into the phases.

Admin Phases

• Phase 1: Registration and Authentication

• Phase 2: Tracks and Courses Management Phase

• Phase 3: Invoice and Learners Management Phase

• Phase 4: Profile Management and Dashboard

Project Planning

Technology Stack

1. Full-stack Framework → Next.js (App Router)

2. Component Library → ShadcnUI

3. Global State Management → Zustand

4. Server State Management → TansStack Query

5. Authentication → JWT-based authentication with middleware protection

Architecture and Layer Breakdown

Primary Architecture: Next.js Full-Stack with App Router

This project will use a Layered Full-Stack Architecture with several specific patterns:

Core Patterns

1. Frontend-Backend Monolith: Single Next.js app serving both UI and API

2. Layered Architecture: Clear separation of concerns across layers

3. Service-Repository Pattern: Services to handle business logic, models to handle data

4. API-First Design: REST endpoints with typed interfaces

Specific Architectural Pattern

1. MVC-like: Controllers (API routes), Models (Mongoose), Views (React components)

2. Repository Pattern: Services abstract database operations

3. Client-Server with Shared Types: TypeScript interfaces shared between layers

4. Authentication-First: JWT-based authentication with middleware protection

Layer Breakdown

G-Client Learning Management System will employ a 7-layer architecture that willl create clear boundaries between different aspects of the application. This layered approach is my practical solution to the chaos that emerges in complex full-stack applications

1. Presentation Layer: to handle user interface and user interaction

2. State Management Layer: to manage application state and server data synchronization

3. API Client Layer: to bstract HTTP communication and provides type safety

4. API Routes Layer: Next.js server-side endpoints that will handle HTTP requests serving as our backend

5. Service Layer: to contain business logic and orchestrate data operations

6. Data Access Layer: to define database schemas and provides data validation

7. Database Layer: to persistent data storage with document-based structure

Let’s delve right into the project: Phase 1 (Admin Registration and Authentication)