CodeHub - Online Learning Platform

Project: CodeHub - Interactive Online Programming Learning Platform

General Introduction

While the online programming education market is diverse, it often suffers from inherent problems: courses are mainly one-way videos, lack interaction, and students easily get discouraged by complex environment setups and unclear learning paths. This creates a significant barrier for beginners and reduces learning effectiveness.

CodeHub was created to solve these problems. It is an interactive programming learning platform that combines high-quality video lectures with an in-browser IDE. Students can learn theory, practice coding, and get instant feedback without installing any software. The system is built on a powerful ASP.NET Core backend, a specialized learning web interface with Angular, and a convenient mobile app with Flutter for learning anytime, anywhere.

Vision & Objectives

Vision:

To become the leading practical programmer training platform in Vietnam, helping students go from zero to job-ready through real-world projects.

Objectives:

  • Build clear learning paths for 5 major knowledge areas (e.g., Frontend, Backend, Mobile).
  • Increase the course completion rate by 30% compared to traditional platforms.
  • Eliminate technical barriers for beginners with a zero-installation coding environment.
  • Build a learning community through Q&A and discussion features.
  • Provide a seamless learning experience across web and mobile.

  • Production: Azentra Team
  • Category: Office
  • Duration: 11 months

Key Features

1. Student Platform (Web App - Angular):

  • Learning Paths: Provides pre-designed paths for specific career goals, helping students learn with a clear direction.
  • Integrated Code Environment: An in-browser code editor that allows writing, running, and testing code for each lesson.
  • Multimedia Lectures: Combines videos, detailed articles, and slides to deliver knowledge effectively.
  • Challenges & Real-world Projects: Small coding exercises after each video and large projects at the end of each module to reinforce knowledge.
  • Q&A: Ask questions directly under each lesson and receive support from instructors and the community.
  • Progress Tracking: The system automatically tracks and displays the user's learning progress.

2. Instructor & Admin Management Portal (Web App - Angular):

  • Course Management: An interface allowing instructors to create/edit courses, upload videos, and design practical exercises.
  • Student Interaction: Track student progress, grade projects, and answer questions.
  • Analytics Dashboard: Provides metrics on engagement levels and course completion rates to improve teaching quality.

3. Mobile Application (Mobile App - Flutter):

  • Flexible Learning: Allows students to watch video lectures and read theory on their mobile devices.
  • Quick Review: Multiple-choice questions and flashcards to review learned concepts.
  • Offline Mode: Pre-download lectures to learn even without an internet connection.
  • Notifications: Reminders for study schedules and notifications when questions are answered.

Role and Responsibility Allocation

Business Analyst - Thu Thao Nguyen:

  • Researches the e-learning market and analyzes competitors to identify strengths and weaknesses.
  • Creates user personas (students, career changers) and identifies their core needs.
  • Designs the user experience flow from registration and course selection to learning and completion.

UI/UX Designer - Thao Le:

  • Designs the user interface for both the web platform and mobile app, focusing on an intuitive, distraction-free learning experience.
  • Designs the experience for the integrated code environment, ensuring it is friendly and easy for beginners to use.
  • Builds the brand identity and design system for CodeHub.

Technical Lead / Client Communicator - Minh Duc Pham:

  • Works directly with education experts or initial instructors to gather input and build suitable teaching features.
  • Proposes and decides on the overall technical architecture for the entire system.
  • Assists the Backend team in designing complex components like the code execution service or learning progress tracking logic.

Backend Developer - Van Hien Nguyen:

  • Primarily responsible for building the entire backend system using .NET Core.
  • Designs the database to manage users, courses, lessons, progress, and student submissions.
  • Builds RESTful APIs to provide data for the Angular web app and the Flutter mobile app.

Frontend Developer - Quoc Bao Doan:

  • In charge of all client-side user interface development using Angular, including both the student platform and the instructor management portal.
  • Integrates a code editor (e.g., Monaco Editor) into the web platform.
  • Builds interactive interfaces, dashboards, and ensures a smooth user experience in the browser.

Mobile Developer - Van Nhat Pham:

  • Responsible for developing the cross-platform mobile app (iOS & Android) using Flutter.
  • Builds key features like video playback, multiple-choice quizzes, offline lesson downloads, and the push notification system.

Image Icon
Image Icon
Image Icon
Image Icon