An MVP-version online learning platform inspired by Khan Academy, designed for students to browse courses, track learning progress, and practice with quizzes.
TS-Courser is a web-based learning management system that provides:
- For Students: Browse courses by tags/tracks (AP/A-Level), track reading progress, access learning materials and quizzes with PDF support
- For Teachers: Create and edit courses, manage sections and episodes, upload materials with markdown editor and PDF files
- For Admins: Manage all courses, users, and verify teacher accounts
The platform supports two types of learning episodes:
- Material Episodes: Learning content with markdown-rendered info pages or PDF documents
- Quiz Episodes: Practice problems with optional answer PDFs
- Framework: Django 5.x
- Database: SQLite (local development)
- Python Package Manager: uv
- Authentication: Django built-in auth system with custom User model
- UI Framework: Bootstrap 5
- JavaScript: Native Fetch API (no jQuery)
- Markdown Editor: Vditor (WYSIWYG editor for teachers)
- Markdown Rendering: marked.js
- PDF Viewer: PDF.js
- Template Engine: Django Templates
- email (unique, for login)
- role (student/teacher/admin)
- is_verified_teacher (boolean, for teacher approval)
- + Django built-in fields (username, password, etc.)
- name (unique)
- category (track/subject)
- title
- description
- thumbnail (optional)
- creator (FK to User)
- tags (M2M to Tag)
- is_published (boolean)
- created_at, updated_at
- course (FK to Course)
- title
- order (integer for sorting)
- section (FK to Section)
- title
- type (material/quiz)
- order (integer for sorting)
- info_page_content (markdown text, optional)
- content_pdf (file upload, optional)
- answer_pdf (file upload, optional, quiz only)
- created_at, updated_at
- user (FK to User)
- course (FK to Course)
- current_episode (FK to Episode, nullable)
- updated_at
- Unique together: (user, course)
- user (FK to User)
- episode (FK to Episode)
- is_read (boolean)
- marked_at
- Unique together: (user, episode)
- Registration/Login: Email-based registration (verification code printed to console for MVP)
- Course Browsing: View published courses, filter by tags (track/subject)
- Course Overview: View course details and personal progress
- Learning Interface:
- Left sidebar: Section/Episode navigation with progress indicators
- Main area: Markdown content rendering OR PDF viewer
- AJAX progress tracking (auto-save current position, manual mark as read/unread)
- Registration/Verification: Register as teacher, wait for admin approval (is_verified_teacher=True)
- Course Management: Create new courses, edit any existing courses
- Content Creation:
- Create sections and episodes
- Edit markdown content with Vditor WYSIWYG editor
- Upload PDF files (with file validation and content screening)
- Preview Mode: Access same learning interface as students with additional edit buttons
- Use Django Admin interface to:
- Approve teacher verification requests
- Manage all courses, sections, episodes
- Manage all user accounts
/accounts/
register/ # User registration
login/ # User login
logout/ # User logout
/courses/
/ # Course list with tag filters
<id>/overview/ # Course overview with progress
<id>/learn/ # Learning interface (redirects to last episode)
<id>/learn/<eid>/ # Specific episode view
/teacher/
courses/ # Teacher course list
courses/create/ # Create new course
courses/<id>/edit/ # Edit course
sections/create/ # Create section
episodes/create/ # Create episode
episodes/<id>/edit/ # Edit episode (with Vditor)
/api/
progress/update/ # AJAX: Update current episode
progress/mark/ # AJAX: Toggle read/unread status
upload/ # File upload for Vditor images
/admin/ # Django admin panel
- Student Access:
@login_required+role in ['student', 'teacher', 'admin'] - Teacher Access:
@login_required+role == 'teacher'+is_verified_teacher == True - Admin Access:
@login_required+is_staff == True
- Receive file → Validate MIME type
- Content screening (check file headers, virus scan placeholder)
- Rename with unique identifier:
{uuid}_{timestamp}.{ext} - Store in
MEDIA_ROOT/episode_pdfs/oranswer_pdfs/ - Save file path to database FileField
- Python 3.13+
- uv package manager
- Clone the repository:
# if using https mode
git clone https://github.com/Tsinglan-Coding-Club/ts-courser.git
cd TS-Courser- Install dependencies with uv:
uv sync- Run migrations:
uv run python manage.py migrate- Create superuser (admin):
uv run python manage.py createsuperuserSECURITY CHECK！Make sure you change the SECRET_KEY in settings.py to a random value for production use.
- Run development server:
uv run python manage.py runserver- Access the application:
- Main site: http://localhost:8000
- Admin panel: http://localhost:8000/admin
- Database schema design with Django ORM
- User authentication system (email-based login)
- Role-based access control (student/teacher/admin)
- Course browsing with tag filtering (track/subject)
- Course overview with personal progress tracking
- Learning interface with sidebar navigation
- AJAX-based progress tracking (current episode, read status)
- Teacher course management (create/edit courses)
- Section and episode management with drag-and-drop reordering
- Markdown editor (Vditor) for content creation
- PDF file upload and viewing (PDF.js)
- Tag creation modal with AJAX support
- File upload with MIME type validation
- Admin approval workflow for teachers
- User progress tracking (enhanced)
- Email verification with real SMTP service (SSO of teams accounts)
- Advanced quiz features (interactive questions, auto-grading, etc., need ask Mr. Cao)
- Student discussion forums (or course comments)
- Course rating and review system (maybe, or student can share solutions to question)
- Mobile responsive improvements
- PostgreSQL migration for production deployment (currently using SQLite for simplicity)
This is an MVP project. Contributions welcome for bug fixes and feature enhancements.
TBD