CAPSTONE PROJECT REPORT
Report 4 – Software Design Document
– Da Nang, June 2025 –
Table of Contents
I. Record of Changes................................................................................................................7
II. Software Design Document................................................................................................ 8
1. System Design...............................................................................................................................8
1.1 System Architecture...............................................................................................................................8
1.2 Package Diagram..................................................................................................................................11
1.2.1 FE Package Diagram..........................................................................................................................11
1.2.2 BE Package Diagram..........................................................................................................................13
2. Database Design.........................................................................................................................14
3. Detailed Design...........................................................................................................................18
3.1 Authentication.....................................................................................................................................18
3.2 User...................................................................................................................................................... 21
3.3 System configuration...........................................................................................................................25
3.4 Semester configuration........................................................................................................................39
3.5 Initialize exam configuration................................................................................................................47
3.6 Exam supervisor registration...............................................................................................................59
3.7 Exam Code configuration.....................................................................................................................68
3.8 Notification management....................................................................................................................72
3.9 Check attendance management..........................................................................................................73
3.10 Export summary report file................................................................................................................75
3.11. Issues Management..........................................................................................................................77
3.12 Dashboard Management...................................................................................................................84
Table of Figures
Figure 1 System Architecture Diagram 7
Figure 2 FE Package Diagram 10
Figure 3 BE Package Diagram 12
Figure 4 Database Design 14
Figure 5 Authentication Class diagram 17
Figure 6 Sign in with Microsoft account & Google Account sequence diagram 19
I. Record of Changes
Date A In charge Change Description
*
M
,
D
*A - Added M - Modified D - Deleted
II. Software Design Document
1. System Design
1.1 System Architecture
1.1.1 System Architecture Diagram
Figure 1 System Architecture Diagram
1.1.2 System Architecture Explanation
1.1.2.1 TypeScript
TypeScript is a strongly typed superset of JavaScript that compiles to plain JavaScript. It adds
optional static typing, enhanced tooling support, and features like interfaces and generics, making it
easier to write scalable, maintainable, and bug-free code. It integrates seamlessly with popular
JavaScript libraries and frameworks, providing developers with better code intelligence and catching
errors during development.
1.1.2.2 NextJS + ShadcnUI
Next.js is a React-based framework for building server-side rendered (SSR) and static web applications. It
optimizes performance through automatic code splitting, pre-fetching, and API routes. Shadcn/ui is a
modern, accessible UI component library designed for React applications, offering a comprehensive
design system with pre-built, responsive, and highly customizable components. It provides beautiful
default styling while maintaining full control over component appearance, making it perfect for building
professional educational interfaces.
1.1.2.3 Zustand
Zustand is a lightweight and simple state management library for React, developed by the creators of
Jotai and React Spring. Unlike Redux Toolkit, Zustand eliminates the need for boilerplate code or
complex structures like reducers and actions. It enables global state management using a
straightforward hook-based API (useStore). Zustand supports middleware, state persistence, and
integration with developer tools, making it suitable for both small and large-scale applications while
maintaining performance and simplicity
1.1.2.4 Tailwind CSS
Tailwind CSS is a utility-first CSS framework that allows developers to design directly in their HTML using
predefined classes. It emphasizes flexibility and reusability, enabling rapid development of responsive and
aesthetically pleasing designs without the need to write custom CSS. Tailwind also supports themes and
custom configurations, which we utilize to maintain consistent Japanese-inspired design elements
throughout the learning platform.
1.1.2.5 Spring Boot + Java
Spring Boot is a powerful, production-ready framework that simplifies the development of Java
applications by providing auto-configuration, embedded servers, and comprehensive security features.
Combined with Spring Security for JWT authentication and Spring Data JPA for database operations, it
enables the creation of robust, scalable, and secure RESTful APIs. This technology stack is ideal for our
educational platform’s complex business logic, user management, and integration with external services
like payment gateways and AI services.
1.1.2.6 Clean Architecture
Clean Architecture is a design approach that separates application logic into independent layers, such as
Use Cases, Domain, and Infrastructure. The goal is to create maintainable, testable, and scalable software
by ensuring that the core business logic remains decoupled from implementation details like databases
and UI frameworks. Our Japanese Learning Platform implements this pattern with clear separation
between presentation, business logic, and data access layers.
1.1.2.7 VNPay Payment Gateway
VNPay is Vietnam’s leading payment gateway service, providing secure and reliable payment processing
for e-commerce and online services. It supports multiple payment methods including bank transfers,
credit cards, and digital wallets, making it ideal for our Vietnamese market. VNPay offers comprehensive
APIs, real-time transaction notifications, and robust security measures including HMAC-SHA256
encryption, ensuring safe and seamless payment experiences for course purchases.
1.1.2.8 WebSocket + Real-time Communication
WebSocket is a communication protocol that provides full-duplex communication channels over a single
TCP connection. It enables real-time, bidirectional communication between clients and servers, essential
for interactive learning features like live progress updates, instant notifications, and real-time chat
support. Our implementation includes automatic reconnection, message queuing, and scalable
connection management for thousands of concurrent learners.
1.1.2.9 PostgreSQL
PostgreSQL is a powerful, open-source relational database management system known for its advanced
features, reliability, and standards compliance. It supports complex queries, JSON data types, full-text
search, and advanced indexing capabilities. PostgreSQL’s robust transaction support and data integrity
features make it ideal for managing user data, course content, learning progress, and payment
transactions in our educational platform.
1.1.2.10 Redis
Redis is an in-memory data structure store used as a database, cache, and message broker. It supports
various data structures like strings, hashes, lists, and sets, providing exceptional performance for session
management, caching frequently accessed data, and implementing real-time features. In our platform,
Redis caches course data, manages user sessions, and handles real-time notifications, significantly
improving response times and user experience.
1.1.2.11 Docker
Docker is an open-source platform that simplifies the development, deployment, and management of
applications by using containerization. Containers package an application and its dependencies together,
ensuring consistent performance across environments. Docker makes it easy to scale, deploy, and run
applications in isolated environments, which is especially useful for microservices and modern DevOps
workflows. Our platform uses Docker for both development consistency and production deployment.
1.1.2.12 CloudLinux VPS Hosting
CloudLinux VPS is a virtual private server hosting solution that integrates CloudLinux, a specialized
operating system designed for web hosting environments. CloudLinux enhances server stability, security,
and performance by isolating applications in lightweight virtualized environments, preventing resource
spikes, and ensuring consistent performance. This setup is ideal for hosting our educational platform
securely and efficiently while supporting multiple concurrent users.
1.1.2.13 Github Actions CI/CD
GitHub Actions is a continuous integration and continuous delivery (CI/CD) platform that automates
building, testing, and deployment workflows directly from GitHub repositories. It supports a wide range of
languages and platforms, integrates seamlessly with containerization, and provides extensive marketplace
of pre-built actions. Our platform uses GitHub Actions for automated testing, security scanning, and
deployment to production environments.
1.1.3 Cost Estimation
# Service Monthly cost Yearly cost Note
Development
1 Next.js + Shadcn/ui 0 VND 0 VND
2 TypeScript 0 VND 0 VND
3 Tailwind CSS 0 VND 0 VND
4 Spring Boot + Java 0 VND 0 VND
5 Docker 0 VND 0 VND
6 IDE 0 VND 0 VND
Include
7 Cloud Server Linux 2 98.100 VND 1.046.400 VND
(1 core, 2GB RAM, 20GB) (1) MySQL
Database
Actual operational implementation
8 Database VPS(1 core, 2GB RAM, 40GB 165.000 VND 1.980.000 VND 55 VND/
SSD)
Notification
Include
9 Cloud Server Linux 4 239.200 VND 2.870.400 VND
(2 core, 4GB RAM, 60GB) (1) MySQL
Database
Total 569.200 VND 6.830.400 VND
(1) : Table of service cost: iNET
(2) : Suppose to send up to 3.000 notifications/ a month
* Server cost will be free if deployed on FPT University's server system.
1.2 Package Diagram
1.2.1 FE Package Diagram
Figure 2 FE Package Diagram
Package Descriptions
No Package Description
This directory contains global state management configurations, using
01 store
Zustand, to handle application-wide data such as authentication state,
user sessions, and shared states.
Custom React hooks are stored here to encapsulate reusable logic, such
02 hooks
as fetching data, handling UI state, or interacting with external APIs,
providing a cleaner and more modular code structure.
Contains API service layer for backend communication, including RESTful
03 services
API calls, authentication services, and data transformation between
frontend and backend systems.
Houses utility functions and configurations that support the application's
04 lib
logic, such as API client setup, helper methods, constants, and shared
configurations used throughout the platform.
This folder includes React Context providers for global state management,
05 context
authentication context, theme providers, and other application-wide state
that needs to be shared across components.
Contains authentication and account management pages, including login,
06 Auth
registration, email verification, password reset, and account type
selection for users.
Houses tutor-specific functionality including course creation tools,
07 Tutor
content management interface, student progress tracking, and tutor
profile management features.
Contains student learning interface with course browsing, interactive
08 Student
learning modules, progress tracking, and enrolled course management
functionalities.
Next.js API routes for server-side logic including AI content suggestions,
09 API
dictionary management, course handling, and other backend integration
endpoints.
A collection of reusable UI components including basic components like
10 ui
buttons and forms, essential UI elements, and design system components
used across the application.
Represents the administrative dashboard module, including course
11 Admin
management, user management, system analytics, and other
administrative functionalities for platform management.
Forum and community interaction components containing discussion
12 discussion
threads, comment systems, Q&A functionality, and student-tutor
communication features.
1.2.2 BE Package Diagram
Figure 3 BE Package Diagram
Package Descriptions
No Package Description
Contains configuration settings and bean definitions, including database
01 config
configuration, CORS settings, security configurations, and other
application-wide settings required for the Spring Boot application.
Houses security-related components including JWT token management,
02 security
authentication filters, authorization configurations, and user role-based
access control for protecting API endpoints.
This directory contains global exception handling configurations, custom
03 exception
exception classes, error response formatting, and centralized error
management for consistent API error responses.
Contains mapping utilities for converting between entities and DTOs,
04 mapper
providing clean separation between database models and API data
transfer objects used in request/response handling.
REST API controllers that handle HTTP requests and responses, define API
05 controller
endpoints, manage request validation, and coordinate between frontend
requests and backend services.
Business logic layer containing core application functionality, data
06 service
processing operations, validation rules, and coordination between
different components to fulfill business requirements.
Data access layer using Spring Data JPA for database operations,
07 repository
containing query methods, custom repository implementations, and
database interaction logic for entity management.
JPA entity classes representing database table structures, containing data
08 entity
models, relationships, constraints, and mapping annotations for object-
relational mapping with the database.
Input data transfer objects for API requests, containing validation
09 request
annotations, input data structures, and request payload definitions used
for receiving data from frontend applications.
Output data transfer objects for API responses, containing response data
10 response
structures, formatted output models, and standardized response formats
sent back to frontend applications.
2. Database Design
Figure 4 Database Design
Table Descriptions
No Package Description
Contains user authentication and profile information, including personal
01 Users
details, contact information, avatar, and account status for all platform
users.
Defines system roles such as ADMIN, TUTOR, and STUDENT with specific
02 Roles
permissions and access levels for platform functionality management.
Stores additional information for users with tutor role, including teaching
03 Tutors
requirements, qualifications, and instructor-specific profile details.
Contains student-specific information and learning preferences for users
04 Students
enrolled in Japanese language courses on the platform.
Defines difficulty levels for courses and exercises, including BEGINNER,
05 Levels
INTERMEDIATE, and ADVANCED classifications for content organization.
Represents Japanese learning courses with details such as title,
06 Courses
description, duration, pricing, content overview, and approval status.
Organizes course content into structured learning modules, each
07 Modules
containing multiple lessons and positioned sequentially within courses.
Contains individual learning sessions within modules, including video
08 Lessons
content, descriptions, duration, and educational materials for students.
Stores various types of learning exercises including multiple choice, fill-
09 Exercises
in-blank, speech recognition, listening, and reading comprehension
activities.
Contains individual questions within exercises, including content, hints,
10 Questions
correct answers, explanations, and point values for assessment.
Stores multiple choice options for questions, including the option text
11 Options
and correctness indicator for automated grading systems.
Tracks student registrations in courses, including enrollment dates,
12 Enrollments
completion status, and progress tracking for learning analytics.
Records student progress through individual lessons, tracking completion
13 LessonCompletio
ns timestamps and learning milestones for progress monitoring.
Defines bundled course packages with discounted pricing, combining
14 CourseCombos
multiple related courses for comprehensive learning paths.
Manages discount codes and promotional offers, including validation
15 Vouchers
rules, usage limits, and applicable courses or combos.
Tracks the application and usage history of vouchers by users, including
16 VoucherUsages
usage timestamps and associated purchases.
Records all financial transactions on the platform, including course
17 Payments
purchases, payment methods, amounts, and transaction status.
Provides forum functionality for course-related discussions, questions,
18 Discussions
and community interaction between students and tutors.
Comments
19 Stores user comments and responses within discussion threads, enabling
structured conversation and knowledge sharing.
Manages system-generated alerts and messages sent to users, including
20 Notifications
course updates, payment confirmations, and learning reminders.
Handles email marketing and educational content distribution to
21 Newsletters
subscribed users for engagement and platform updates.
22 Resources Stores additional learning materials such as documents, audio files,
images, and supplementary content for courses.
Contains speech recognition exercises for pronunciation training,
23 SpeechPractices
including target phrases and accuracy requirements for Japanese
phonetics.
SpeechExerciesR
24 Records student performance on speech recognition exercises, tracking
esults
pronunciation accuracy scores and improvement over time.
PasswordResetT Manages temporary authentication tokens for secure password reset
25
oken functionality with expiration and usage tracking.
Stores professional experience information for tutors, including work
26 Experiences
history, teaching background, and relevant qualifications.
Contains educational background information for tutors, including
27 Educations
degrees, certifications, and academic achievements.
UserRoles Junction table linking users to their assigned roles, enabling flexible role-
28
based access control and permission management.
Maps vouchers to specific courses they can be applied to, allowing
29 VoucherApplicab
leCourses targeted promotional campaigns and discount strategies.
30 VoucherApplicab Links vouchers to course combo packages, enabling promotional pricing
leCombos for bundled learning content offerings.
31 ComboCourses Junction table defining which individual courses are included in each
course combo package for bundle management.
3. Detailed Design
3.1 Authentication
3.1.1 Class diagram
Figure 5 Authentication Class diagram
3.1.2 Sign in with Microsoft account & Google Account
Figure 6 Sign in with Microsoft account & Google Account sequence diagram
