System Architecture
Platzi Viewer is a client-server application that streams Platzi course content from Google Drive. The architecture consists of:- Python Backend: HTTP server with Drive API integration
- JavaScript Frontend: Single-page application with modular routing
- Google Drive: Content storage and streaming source
- Local Storage: Progress tracking and state persistence
Architecture Diagram
Technology Stack
Backend
| Component | Technology | Purpose |
|---|---|---|
| HTTP Server | Python http.server.ThreadingHTTPServer | Multi-threaded request handling |
| Drive Integration | Google API Python Client | File listing and streaming |
| Authentication | OAuth2 Service Account | Drive API access |
| Caching | JSON file + in-memory cache | Course metadata |
| Video Processing | FFmpeg (optional) | Compatibility streaming |
The server supports Range Requests (HTTP 206) for video seeking and efficient bandwidth usage.
Frontend
| Component | Technology | Purpose |
|---|---|---|
| Application | Vanilla JavaScript (ES6 Modules) | No framework dependencies |
| Routing | Hash-based SPA router | Client-side navigation |
| State Management | Centralized state service | Data + progress tracking |
| API Communication | Fetch API with retry logic | Backend integration |
| Storage | LocalStorage + Server sync | Progress persistence |
Data Flow
Application Bootstrap
Video Streaming Flow
Component Communication
API Endpoints
The backend exposes RESTful endpoints:| Endpoint | Method | Purpose |
|---|---|---|
/api/bootstrap | GET | Lightweight course catalog |
/api/courses | GET | Full course data with all details |
/api/course-detail/{cat}/{route}/{course} | GET | On-demand course detail loading |
/api/progress | GET/POST | User progress sync |
/api/health | GET | System health check |
/drive/files/{fileId} | GET | Stream Drive file with Range support |
/api/video-compatible/{fileId} | GET | FFmpeg-remuxed video stream |
Frontend Services
Cache Architecture
The system uses a two-tier caching strategy:File-Based Cache (courses_cache.json)
rebuild_cache_drive.py, contains:
- Category/route/course hierarchy
- Drive file IDs for all content
- Module and class structure
- Metadata (match types, presentation flags)
In-Memory Cache
Thread Safety
The backend handles concurrent requests safely:Deployment Modes
Platzi Viewer supports multiple deployment configurations:Local Development
Environment Variables
| Variable | Default | Purpose |
|---|---|---|
PORT | 8080 | Server port |
HOST | 127.0.0.1 | Bind address |
PLATZI_VIEWER_PATH | Current dir | Static files location |
PLATZI_DATA_PATH | Viewer path | Data storage (cache, progress) |
GOOGLE_SERVICE_ACCOUNT_FILE | service_account.json | Drive credentials path |
GOOGLE_SERVICE_ACCOUNT_JSON | - | Inline credentials (JSON string) |
Performance Optimizations
Bootstrap Endpoint
Bootstrap Endpoint
The
/api/bootstrap endpoint returns a lightweight payload (class counts instead of full class arrays), enabling fast initial page load. Full course details are loaded on-demand.Gzip Compression
Gzip Compression
Server pre-compresses JSON responses and serves gzipped data when
Accept-Encoding: gzip is present, reducing bandwidth by ~70-80%.Range Request Streaming
Range Request Streaming
Video files support HTTP Range requests (status 206), allowing efficient seeking and reduced bandwidth when users skip through content.
Shared Drive Session
Shared Drive Session
1MB Chunk Streaming
1MB Chunk Streaming
Error Handling
Backend
Frontend
bootstrap_http_500, course_detail_not_found) for precise debugging.
Next Steps
Frontend Architecture
Dive into JavaScript modules, routing, and state management
Backend Architecture
Explore Python server internals and request handling
Google Drive Integration
Learn about Drive API, authentication, and file streaming