Insight 105

Posted on Dec 29

Introduction & Foundation of Academic Suite

#architecture #beginners #systemdesign

This chapter serves as the initial foundation for the entire book. Its goal is to provide a technical overview of the Academic Suite system, ranging from the problem context to be solved, the technology choices made, to the project structure that will be developed throughout this book.

Unlike a preface that focuses on reader orientation, this chapter begins to delve into the technical realm and serves as the starting point for system implementation.

1.1 Academic Suite System Context

Academic Suite is a Learning Management System (LMS) with a primary focus on administering online exams for schools and universities.

Unlike typical CRUD applications, an online exam system has specific characteristics that demand greater attention to architectural aspects and data consistency. Some of the main challenges that form the basis of this system's design include:

High Concurrency
Thousands of students may start, work on, and submit exams within a very close timeframe.
Data Integrity
Exam answers must be stored securely, even in the event of network disruptions, page refreshes, or partial system failures.
Security & Anti-Cheating
The system needs to limit behaviors potentially leading to cheating, such as tab switching, time manipulation, or invalid answer submission.
Real-time Monitoring
Instructors and administrators require direct visibility into the status of exam participants: active, disconnected, finished, or experiencing issues.

Academic Suite is designed to address these challenges through a simple yet robust architectural approach, focusing on system reliability and ease of development.

1.2 Tech Stack Used

The selection of technology in this book is made by considering three main factors: performance, maintainability, and ecosystem maturity. The stack used is not the only correct choice, but it was chosen for being relevant and realistic for a medium-scale LMS system.

Backend: Go (Golang)

The backend of Academic Suite is built using Go (Golang) version 1.24.0.

Key backend components:

Web Framework: Fiber v2
Fiber is built on top of fasthttp and is known for high performance with a simple API.
ORM: GORM
Used to simplify interactions with relational databases like PostgreSQL and SQLite.
Authentication: JWT (JSON Web Token)
A stateless authentication approach to support scalability and frontend–backend separation.

Reason for using Go:
Go has a concurrency model based on goroutines that are lightweight and efficient, making it highly suitable for handling high loads like online exams running concurrently. Additionally, Go encourages writing code that is explicit and easy to maintain in the long run.

Frontend: React + Vite

The frontend of Academic Suite is built using the modern JavaScript ecosystem with a focus on stability and user experience.

Key frontend components:

UI Framework: React 18
Used to build a structured component-based user interface.
Build Tool: Vite 6
Provides a fast development experience through Hot Module Replacement (HMR).
Language: TypeScript 5
Used to improve data type safety and reduce bugs at runtime.
Styling: Tailwind CSS 3.4
A utility-first approach for consistent and efficient styling.
UI Components: shadcn/ui
A collection of components based on Radix UI that prioritizes accessibility and flexibility.
State Management: Zustand
Used to manage simple client state without excessive complexity.
Data Fetching: TanStack Query (React Query)
Manages server state such as caching, re-fetching, and data synchronization.

This frontend stack was chosen to support an exam interface that is responsive, stable, and remains usable even in less-than-ideal network conditions.

1.3 Project Structure (Monorepo)

Academic Suite is organized using a monorepo approach, where the backend and frontend reside in the same repository but remain separate in responsibility.

This approach was chosen to:

Facilitate synchronization of frontend and backend development
Simplify version management and deployment
Provide a complete system overview in a single repository

The main project directory structure is as follows:

academic-suite/
├── backend/                # Source code API (Go)
├── handlers/           # HTTP handlers / controllers
├── models/             # Database schema (structs)
├── routes/             # API endpoint definitions
├── go.mod              # Go dependencies
└── main.go             # Backend application entry point
│
├── frontend/               # UI Source code (React)
├── src/
│   ├── components/     # Reusable UI components
│   ├── pages/          # Application pages
│   ├── hooks/          # Custom React hooks
│   └── lib/            # Utilities (API client, helpers)
├── package.json        # Frontend dependencies
└── vite.config.ts      # Build configuration
│
├── book/                   # Technical documentation (this book)
└── MANUAL.md               # Concise user guide

This structure will be used consistently throughout the book to maintain code orderliness and readability.

1.4 Development Environment Prerequisites

Before proceeding to the implementation stage, ensure the development environment is correctly set up.

Backend Requirements

Go 1.24 or newer
PostgreSQL (recommended for production) or SQLite (for development)

Frontend Requirements

Node.js v18+ or Bun v1.0+
Git

With these prerequisites met, we are ready to move to the next stage.

Chapter Summary

In this chapter, we have discussed the context of the Academic Suite system, the main challenges of an online exam system, the technology used, and the project structure that will form the basis of development.

In Chapter 2, we will start from the most critical foundation of this system: database design, which will determine how exam data, users, and grading results are managed consistently and efficiently.

DEV Community