Skip to main content

​
Overview

Platzi Viewer organizes content in a hierarchical structure designed to mirror Platzi’s learning paths. The navigation system allows you to browse through categories, routes, courses, modules, and individual classes seamlessly.

​
Hierarchical Structure

Content is organized in the following hierarchy: 
Categories
  └─ Routes (Learning Paths)
      └─ Courses
          └─ Modules
              └─ Classes (Lessons)

​
Categories

The top level of organization groups related learning content:
  • Development - Programming, web development, mobile development
  • Design - UI/UX, graphic design, product design
  • Marketing - Digital marketing, content strategy, SEO
  • Business - Entrepreneurship, leadership, project management
  • And more specialized categories
Access Categories: From the home page, browse category cards or use the category filter pills to jump to a specific section.

​
Routes (Learning Paths)

Routes are curated sequences of courses designed to build skills progressively. Each route may contain:
  • Multiple courses - A complete learning path with several related courses
  • Standalone courses - Individual courses not part of a larger path
Navigate Routes: Click on any route card from the home page or explore view to see its course list.

​
Courses

Each course contains structured learning content organized into modules. Course pages display:
  • Course title and description
  • Progress tracking ring
  • Module list with class counts
  • Resource links
  • Personal notes section

​
Modules

Modules group related classes within a course. Each module shows:
  • Module number and name
  • Progress indicator (completed/total classes)
  • Collapsible class list
Expand/Collapse: Click the module header to expand or collapse the class list.

​
Classes (Lessons)

Individual classes are the actual learning units. They can include:
  • Video content - Streaming video lessons from Google Drive
  • HTML content - Interactive sandbox/HTML files
  • Text content - Reading materials and summaries
  • Resources - Additional files (PDFs, code samples, etc.)

​
Search and Filtering

The Explore view (#explore) provides comprehensive search functionality:
  1. Access Search: Click “Explore” in the main navigation or visit the explore page
  2. Enter Query: Type course names, topics, or keywords in the search box
  3. Filter by Category: Use category chips to narrow results
  4. Real-time Results: Results update as you type (200ms debounce)
Search Behavior:
  • Searches across route names and course titles
  • Case-insensitive matching
  • Combines with category filters when both are active

​
Category Filtering

Filter content by category:
  • Home View: Click category pills to scroll to that category section
  • Explore View: Click category filter chips to show only routes from that category
  • Touch Devices: Categories toggle open/closed on tap

​
Learning View

The Learning view (#learning) shows your in-progress courses:
  • Displays all routes with at least one completed class
  • Shows progress percentage for each route
  • Sorts by most recently accessed
  • Quick access to continue learning
Breadcrumbs appear at the top of course and player views: 
🏠 Inicio › Route Name › Course Name
Navigate Back: Click any breadcrumb link to jump to that level in the hierarchy.

​
Player Sidebar

When viewing a class, the sidebar provides:
  • Course Syllabus: Complete module and class list
  • Active Module Highlight: Currently playing module is highlighted
  • Progress Indicators: Completed classes show checkmarks
  • Quick Navigation: Click any video class to jump to it
  • Collapsible: Toggle sidebar visibility on desktop (see Keyboard Shortcuts)
  • Active Class: Shown with play icon (▶) and highlighted background
  • Completed Class: Shown with checkmark (✓) and completion style
  • Available Class: Shows class number and can be clicked
  • Non-video Class: Text/reading content (not clickable in sidebar)

​
Back Navigation

  • Back Button: Returns to the course or route view
  • Browser Back: Standard browser back button works as expected
  • Breadcrumbs: Click breadcrumb links for hierarchical navigation

​
Next/Previous Class

While in the player:
  • Overlay Buttons: Previous/Next buttons in the video overlay
  • Keyboard Shortcuts: Alt+← and Alt+→ (see Keyboard Shortcuts)
  • Auto-advance: When a video ends, automatically advances to next class after 1.5s

​
Module Navigation

The player sidebar allows quick navigation:
  1. Scroll through the complete course syllabus
  2. Click any module header to see its classes
  3. Click any video class to jump directly to it
  4. See your progress at a glance

​
URL Structure

Platzi Viewer uses hash-based routing with clean URLs: 
#home                                          - Home page
#explore                                       - Search and explore
#learning                                      - In-progress courses
#route/{catIdx}/{routeIdx}                     - Route/learning path view
#course/{catIdx}/{routeIdx}/{courseIdx}        - Course detail view
#player/{catIdx}/{routeIdx}/{courseIdx}/{modIdx}/{classIdx} - Video player
Shareable Links: Copy URLs from the address bar to share specific courses or classes.

​
Mobile and Touch Navigation

​
Touch-Optimized Features

  • Category Toggle: Categories expand/collapse on tap (home view)
  • Sidebar Behavior: Player sidebar stays visible with collapsible class list
  • Touch-Friendly Buttons: Larger tap targets for touch devices
  • Swipe Support: Natural mobile scrolling behavior

​
Responsive Layout

  • Desktop: Side-by-side player and sidebar
  • Tablet: Collapsible sidebar with FAB toggle
  • Mobile: Vertical layout with expandable sections

​
Tips for Efficient Navigation

  1. Use Keyboard Shortcuts: Learn the shortcuts for faster navigation (see Keyboard Shortcuts)
  2. Bookmark Progress: Use the Learning view to see all in-progress courses
  3. Search First: Use the Explore view to quickly find specific courses
  4. Follow Breadcrumbs: Use breadcrumbs to understand your location in the hierarchy
  5. Utilize Sidebar: Keep the player sidebar open to jump between classes quickly

​
Bootstrap Loading

The app uses a lightweight bootstrap strategy:
  • Initial Load: Loads minimal course metadata (~2MB bootstrap)
  • Lazy Details: Full course details load on-demand when you open a course
  • Progress Caching: Your progress is cached locally and synced to server

​
Hash-Based Routing

  • No Page Reloads: Navigation is instant without full page refreshes
  • Browser History: Back/forward buttons work as expected
  • Bookmarkable: URLs are shareable and can be bookmarked

​
Troubleshooting

​
Content Not Loading

If course details don’t load:
  • Check the error message for diagnostic code
  • Verify server connectivity at /api/health
  • Try reloading the page
  • Check console for detailed error information

​
Search Not Working

If search returns no results:
  • Clear category filters (click “Todas”)
  • Try broader search terms
  • Check that content has loaded (stats show total courses)
If navigation seems stuck:
  • Use breadcrumbs to navigate to a known location
  • Click home (🏠) to return to the main page
  • Refresh the browser if needed (progress is saved locally)

Build docs developers (and LLMs) love

Get started for freeTalk to us