Find the Right Course for You
Introduction to Web Development
π« Vientiane TVET College
Advanced JavaScript & TypeScript
π« Lao-German Technical Institute
Node.js & REST API Development
π« National University of Laos
React & Next.js Masterclass
π« Lao-German Technical Institute
Python for Data Analysis
π« Vientiane TVET College
SQL & Database Design
π« National Tourism College
Machine Learning Fundamentals
π« National University of Laos
UI/UX Design Principles
π« Lao-German Technical Institute
ພາສາລາວສຳລັບຜູ້ເລີ່ມຕົ້ນ
π« Vientiane TVET College
ການອ່ານ ແລະ ການຂຽນພາສາລາວ
π« National University of Laos
English for Communication
π« Lao-German Technical Institute
Business English
π« National University of Laos
Full Stack Development Path
Multiple Instructors Β· 3 Courses
Screen Flow (from flow.puml):
π Spec notes β UC-LMS.06 / SCR-LMS.01 (fields, actions, requirements)
- Screen: SCR-LMS.01 β Course Catalog
- Use case: UC-LMS.06 β Browse Course Catalog
Displays published Courses and Specializations based on login state. Users can search by keyword, filter by tags (multi-select AND logic), and sort results. Results paginated at 20 per page. Each card shows: title, cover image, institute name, tags, difficulty, Free/Paid badge, and Enrolled badge (logged-in only).
- Guest (not logged in): sees all published Courses and Specializations from every institute, including shared ones
- Logged-in user: sees only Courses and Specializations from their own institute, plus shared ones (cross-institute shared); courses from other institutes are hidden
search_query"Search Courses" β text Β· max_length:200 Β· Search and filter bar Β· default: "" (param ?q=)sort_order"Sort By" β enum [newest, popular, alphabetical_asc] Β· required Β· default: newest (param ?sort=)selected_tags"Category (Tag)" β enum multi-select Β· Tag.id Β· default: [] (param ?tags=)result_count_label"Result Count" β text Β· computed Β· read-onlyinstitute_name"Institute" β text Β· Catalog grid Β· data_ref: Institute.name Β· read-only (displayed on each card)tags_on_card"Tags" β enum Β· Catalog grid Β· computed (CourseTag + InstituteCourseTag union) Β· read-only (tag chips on card)visibility_mode"Visibility Scope" β enum [guest, authenticated, empty_institute] Β· Catalog grid Β· computed Β· read-only (drives banner + AF-1A)item_title"Title" β text Β· Catalog grid Β· read-onlycover_image"Cover Image" β file Β· Catalog grid Β· read-onlydifficulty_level"Difficulty Level" β enum [beginner, intermediate, advanced] Β· Catalog grid Β· read-only Β· course cards onlyprice_badge"Free/Paid Badge" β enum [free, paid] Β· Catalog grid Β· computed Β· read-onlyenrolled_badge"Enrolled Badge" β boolean Β· Catalog grid Β· computed Β· read-only Β· visible when logged_in==true
search"Search" β always enabled Β· triggers UC-LMS.06-M-2toggle_tag"Select/Deselect Tag" β always enabled Β· triggers UC-LMS.06-M-4change_sort"Sort" β always enabled Β· triggers UC-LMS.06-M-6change_page"Change Page" β enabled when result_count > 20 Β· triggers UC-LMS.06-M-6clear_filters"Clear Filters" β enabled when search_query != '' || selected_tags.length > 0 Β· triggers UC-LMS.06-A-3A-2open_item_detail"Open Detail" β always enabled Β· triggers UC-LMS.06-M-7view_all_courses"View All Courses" β enabled when visibility_mode == empty_institute (AF-1A only) Β· triggers UC-LMS.06-A-1A-1
- Course card: cover image (field 9), title (field 8), institute name (field 5), tag chips (field 6 β CourseTag + InstituteCourseTag), difficulty (field 10), Free/Paid badge (field 11 β no price), Enrolled badge (field 12 β logged-in + Enrollment.status=active) [refs: UC-LMS.06, UC-LMS.11]
- Specialization card: cover image (field 9), title (field 8), institute name (field 5), tag chips (field 6), member course count, Free/Paid badge (field 11), Enrolled badge (field 12 β logged-in) [refs: UC-LMS.06]
- Guest visitors see no Enrolled badges [refs: NFR-10]
- URL supports ?q=, ?tags=, ?sort=; browser back from detail restores filters
- Empty catalog state: show empty state + guidance if no published items exist
- Pagination: 20 items/page default; no-results shows a "Clear Filters" button
- Cover images use lazy loading [refs: NFR-02]
- Visibility banner (field 7) always visible at top of Catalog grid: guest β "Showing all published coursesβ¦"; authenticated β "Showing your institute's courses + shared"; empty_institute (AF-1A) β "Your institute has no courses" + View All Courses button [refs: UC-LMS.06]
- tags_on_card (field 6) = union of CourseTag (Paid Tags, Central Reviewer) + InstituteCourseTag (Free Tags, Program Admin via UC-LMS.11); tag filter sidebar uses same tag universe [refs: UC-LMS.06, UC-LMS.11, UC-LMS.12]
- If a clicked Course/Specialization no longer exists, the User is informed it is no longer available with a way back to the Catalog (UC-LMS.06 additional_requirement #1) β not modeled as a separate scenario here (system-level condition, not a screen-specific alternative flow)
- Definition of "popular" sort β enrollment count, views, or rating?
- Items per page β 20/50 default or infinite scroll?
- SEO: meta tags, sitemap, canonical URL strategy
- Card spec differences: Course vs Specialization cards show different data (price, rating, duration)
- Additional filters (difficulty, duration, access type) β future scope
- Personalization for logged-in users β out of scope v1
- Cache strategy for high-traffic catalog queries (expensive per-request)
- Filter state persistence when guest logs in and returns