CodeLearning is an e-learning and competitive programming platform that helps learners build programming skills through video-based courses and exercises. It includes an Online Judge for practicing data structures and algorithms, along with ICPC-style programming contests featuring structured rules, real-time rankings, and competitive workflows.
| Feature | Description |
|---|---|
| Online Judge & Automated Grading | In-browser code editor supporting C++, Java, Python, and JavaScript. Users write, test, and submit code to receive instant verdicts (Accepted, Wrong Answer, Time Limit Exceeded, etc.) with real-time testcase progress tracking. |
| Competitive Contests | Hosts ICPC-style programming contests with automated timers, penalty-based scoring, and live leaderboards featuring a freeze phase during the final minutes to maintain competitive suspense. |
| Interactive Courses & E-Learning | Structured curriculum organized into chapters, video lectures, and quizzes. Hands-on coding exercises are integrated directly alongside lessons with personal learning progress tracking. |
| Cart, Wallet & Payments | Multi-item shopping cart with voucher discounts, direct bank transfer via VietQR dynamic QR codes, and an internal virtual wallet for balance top-ups and one-click checkout. |
| Authentication & Role-Based Portals | Supports email/password login and Google Single Sign-On (SSO), providing role-based workflows and permission controls for Students, Instructors, and Administrators. |
| Automated Notifications & Emails | Sends automated email notifications for account confirmations, course enrollments, payment receipts, and platform announcements. |
| Automated Testcase Generator | Enables instructors to generate comprehensive test suites automatically using an input generator script and a reference solution. |
%%{init: {'flowchart': {'curve': 'linear'}, 'themeVariables': {'clusterBkg': '#161a1d', 'clusterBorder': '#161a1d'}}}%%
flowchart TD
subgraph ClientTier [" "]
FE["Frontend"]
end
subgraph CoreTier [" "]
BE["Backend"]
end
subgraph ServiceRow [" "]
direction LR
PAYOS["PayOS"]
JUDGE0["Judge0"]
RABBIT["RabbitMQ"]
end
subgraph StorageAndEmailRow [" "]
direction LR
DB[("PostgreSQL")]
SENDGRID["SendGrid"]
end
%% Client Communication
FE <--> |"REST API / WebSocket STOMP"| BE
%% External & Execution Services
BE <--> |"Checkout Links / Payment Webhooks"| PAYOS
BE <--> |"Batch Submissions / Verdict Webhooks"| JUDGE0
BE ---> |"AMQP Event Publishing"| RABBIT
RABBIT ---> |"Worker Email Dispatch"| SENDGRID
%% Data and email delivery
BE <--> |"JDBC / Transactions & Locks"| DB
CodeLearning/
├── backend/ # Spring Boot 3.5.7 Backend Application (Java 21)
│ ├── src/main/java/com/thanhmila/codelearning/
│ │ ├── configuration/ # Bean definitions (Redis, RabbitMQ, WebClient, PayOS, WebSocket)
│ │ ├── controller/ # REST Controllers grouped by domain
│ │ │ ├── auth/ # Authentication, token rotation, SSO endpoints
│ │ │ ├── contest/ # Contest lifecycle, problem sets, submissions, leaderboard
│ │ │ ├── course/ # Courses, chapters, lessons, video, quizzes
│ │ │ ├── oj/ # Online Judge problems, submissions, testcases
│ │ │ └── payment/ # Cart, orders, wallet, PayOS callbacks
│ │ ├── dto/ # Data Transfer Objects (Request / Response payloads)
│ │ ├── entity/ # JPA Entities mapped to PostgreSQL
│ │ ├── exception/ # Centralized exception handlers (GlobalExceptionHandler)
│ │ ├── listener/ # RabbitMQ message consumers
│ │ ├── mapper/ # MapStruct mappers (Entity <-> DTO)
│ │ ├── repository/ # Spring Data JPA repositories (Projections, Specifications)
│ │ ├── scheduler/ # Scheduled tasks (reconciliation, token cleanup)
│ │ ├── security/ # Spring Security, custom JWT decoder, SpEL evaluators
│ │ └── service/ # Core business logic services
│ ├── Dockerfile # Multi-stage Docker build for backend
│ ├── Dockerfile.rabbitmq # RabbitMQ image with delayed exchange plugin
│ └── pom.xml # Maven dependencies and plugins
├── frontend/ # React 19 + TypeScript + Vite Frontend Application
│ ├── src/
│ │ ├── api/ # Axios HTTP client instances and endpoints
│ │ ├── assets/ # Static media, icons, and illustrations
│ │ ├── components/ # Shared UI components (Monaco Editor, Modals, Navbar)
│ │ ├── context/ # React Context (AuthContext, ThemeContext, CartContext)
│ │ ├── hooks/ # Custom React hooks
│ │ ├── layouts/ # Main application and administration layouts
│ │ ├── locales/ # i18n localization resources (en.json, vi.json)
│ │ ├── pages/ # Route views (Home, OJ, Courses, Contest, Cart, Admin)
│ │ ├── types/ # TypeScript interfaces and type definitions
│ │ └── utils/ # Shared helper functions
│ ├── Dockerfile # Production NGINX container build
│ └── package.json # Node.js dependencies and scripts
├── database/ # Database initialization scripts
│ └── schema-only.sql # Canonical PostgreSQL schema
├── docs/ # Technical documentation center
│ └── architecture/ # System architecture and workflow specifications
│ ├── online_judge_workflow.md
│ ├── payment_checkout_workflow.md
│ ├── security_authorization_workflow.md
│ ├── email_pipeline_workflow.md
│ ├── contest_scheduling_workflow.md
│ └── testcase_generation_workflow.md
├── docker-compose.dev.yml # Orchestration for development environment
├── docker-compose.prod.yml # Orchestration for production deployment
├── judge0.conf # Judge0 sandbox configuration
└── README.md # Main repository documentation
Ensure the following tools are installed on your environment:
- Docker and Docker Compose (Required for containerized runtime)
- JDK 21 (Required for local backend development)
- Node.js 20+ and
npm(Required for local frontend development)
Create a .env file in the backend/ directory:
# POSTGRES DATABASE
DB_HOST=localhost
DB_PORT=5432
DB_NAME=codelearning
DB_USERNAME=postgres
DB_PASSWORD=your_secure_password
# REDIS CACHE
REDIS_HOST=localhost
REDIS_PORT=6379
# RABBITMQ
RABBITMQ_HOST=localhost
RABBITMQ_PORT=5672
RABBITMQ_USERNAME=guest
RABBITMQ_PASSWORD=guest
# SECURITY & JWT
JWT_SIGNER_KEY=your_super_secret_32_characters_key_here
# CLOUDINARY CONFIGURATION
CLOUDINARY_CLOUD_NAME=your_cloudinary_name
CLOUDINARY_API_KEY=your_cloudinary_key
CLOUDINARY_API_SECRET=your_cloudinary_secret
#PAYOS CONFIGURATION
PAYOS_CLIENT_ID=your_payos_client_id
PAYOS_API_KEY=your_payos_api_key
PAYOS_CHECKSUM_KEY=your_payos_checksum_key
# JUDGE0 SANDBOX (OJ)
JUDGE0_API_URL=http://localhost:2358
JUDGE0_WEBHOOK_URL=http://your-ip-or-domain:8080/codelearning/online-judge/webhooks/submissions (Ngrok)
# SENDGRID CONFIGURATION
SENDGRID_API_KEY=your_sendgrid_api_key
SENDGRID_WEBHOOK_PUBLIC_KEY=your_sendgrid_webhook_public_key
SENDGRID_FROM_EMAIL=your_sendgrid_from_email
SENDGRID_FROM_NAME=your_sendgrid_from_nameCreate a .env file in the frontend/ directory:
VITE_API_BASE_URL=http://localhost:8080/codelearning
VITE_GOOGLE_CLIENT_ID=your_google_oauth_client_idDocker Compose is configured with service healthchecks. Infrastructure components (PostgreSQL, Redis, RabbitMQ, and Judge0) start and verify health before launching the Spring Boot backend and React frontend.
docker compose -f docker-compose.dev.yml --profile backend --profile frontend --profile judge0 up -ddocker compose -f docker-compose.prod.yml --profile backend --profile frontend --profile judge0 up -dTo run the application manually for development or debugging:
docker compose -f docker-compose.dev.yml up -d db redis rabbitmq judge0-server judge0-workers judge0-db judge0-rediscd backend
./mvnw clean package -DskipTests
./mvnw spring-boot:runThe API will be available at http://localhost:8080/codelearning.
cd frontend
npm install
npm run devThe frontend application will be available at http://localhost:5173.