8 integrated modules in single native macOS application: Authentication, Dashboard, Learning Materials, Online Classes, Premium Videos, Journals, Program Selection, and Profile Settings
Native macOS design with macos_ui package - SliverToolBar, MacosScaffold, CupertinoTextField, and native window controls for authentic macOS experience
Advanced video player with Media Kit integration, multi-resolution streaming (480p/720p/1080p), playback speed control (1x/1.5x/1.75x/2x), and chapter navigation
Real-time class status with live indicators for ongoing classes and countdown timers for upcoming sessions
Academic journal library with 1000+ articles, keyword search, popular category filters (Akuntansi, Ekonomi Syariah, Bisnis, Manajemen, Pajak), and wishlist submission
Built-in PDF viewer using Syncfusion with zoom, navigation, and seamless reading experience for journals and materials
Categorized learning materials with Basic Economics (Ilmu Dasar Ekonomi) and Advanced (Materi Lanjutan) tabs using MacosTabView
Clean Architecture implementation with Interactor pattern for business logic separation and maintainability
Infinite scroll pagination with scroll-to-top functionality for video and journal lists
Over-the-air updates via Shorebird for instant bug fixes without App Store review delays
macOS users in the IDE Super App ecosystem were underserved. While mobile and Windows versions existed, Mac users had to rely on web browsers or mobile apps running in emulation, resulting in a suboptimal experience.
The existing solutions lacked native macOS integration - no proper window management, unfamiliar UI patterns, and missing keyboard shortcuts that Mac users expect. This created friction and reduced engagement among the growing Mac user segment.
Additionally, premium video streaming on macOS required proper media handling that web-based solutions couldn't deliver efficiently, leading to buffering issues and poor playback quality on slower connections.
Developed a native macOS application using Flutter with macos_ui package for authentic macOS design patterns. The application features native window controls, SliverToolBar navigation, CupertinoTextField inputs, and MacosTabView for familiar macOS interactions.
Implemented Media Kit for advanced video playback with multi-resolution streaming (480p/720p/1080p) and playback speed control (1x to 2x), ensuring smooth video consumption regardless of network conditions.
Built comprehensive content modules: categorized learning materials with Basic/Advanced tabs, real-time class status indicators with live badges, journal library with keyword filters and wishlist submission, and Syncfusion PDF viewer for seamless document reading.
Leveraged Shorebird OTA updates for instant bug fixes bypassing App Store review delays, and integrated Sentry for crash tracking and error monitoring.
Hambatan teknis yang ditemui selama development dan keputusan arsitektur untuk mengatasinya.
Native macOS UI implementation with Flutter while maintaining feature parity with other platforms
Integrated macos_ui package for authentic macOS design: MacosScaffold for window structure, SliverToolBar for native toolbar with transparency effects, MacosTabView for tabbed navigation, and CupertinoTextField for native text inputs. Used MacosTheme for dark/light mode support and native color schemes (MacosColors.windowBackgroundColor, headerTextColor). Implemented custom window chrome with macos_window_utils for proper window management.
Multi-resolution video streaming with quality selection and playback speed control
Built video player using media_kit with HLS support and custom resolution selector. Parsed m3u8 manifests with flutter_hls_parser to extract available quality levels (480p/720p/1080p). Implemented resolution switching that preserves playback position, and added playback speed control (1x/1.5x/1.75x/2x) with real-time stream updates. Used HTTP headers (Referer) for CDN authentication.
Real-time class status indicators showing live vs upcoming classes
Implemented status computation in home screen with conditional rendering: live classes show "🔴 Kelas Online yang Sedang Berlangsung" section with real-time indicators, upcoming classes display countdown timers. Built CustomHomeKelasOnlineComponent with isLive flag for different visual treatments. Used polling mechanism to refresh class status at regular intervals.
Efficient journal search with keyword filters and infinite scroll pagination
Built JurnalCubit with search and loadmore functionality. Implemented popular keyword quick-filters (Akuntansi, Ekonomi Syariah, Bisnis, Manajemen, Pajak) with toggle state. Added scroll listener with threshold-based load more trigger (200px from bottom), and scroll-to-top button appearing after 300px scroll. Used SliverAlignedGrid for responsive 2-column layout.
PDF viewing for journals and learning materials with native reading experience
Integrated Syncfusion Flutter PDF Viewer (syncfusion_flutter_pdfviewer) for professional PDF rendering. Built webview-based material reader using webview_flutter_wkwebview for HTML content. Created separate screen flows for PDF vs HTML content with proper navigation arguments (WebviewMateriBelajarArgs).
Categorized learning materials with Basic/Advanced separation
Implemented MacosTabView with two tabs: "Materi Ilmu Dasar Ekonomi" (Basic) and "Materi Lanjutan" (Advanced). Built MateriBelajarCubit that fetches and categorizes materials into listMateriDasar and listMateriLanjutan. Used AlignedGridView.count for responsive 5-6 column grid layout based on screen width (>1920px gets 6 columns).
State management with predictable state flow across 8+ modules
Implemented BLoC/Cubit pattern with GetIt dependency injection. Created separate cubits for each module (HomeCubit, MateriBelajarCubit, VideoPremiumCubit, JurnalCubit) with clear state classes (Loading, Loaded, Error). Used Interactor pattern for business logic separation - each module calls its respective interactor (ArticleInteractor, MateriInteractor, VideoInteractor, KelasInteractor). Implemented Either error handling with dartz for functional error management.
Over-the-air updates for macOS without App Store review delays
Integrated Shorebird code push system for Flutter 3.27.4 to enable OTA updates. Configured shorebird.yaml with app_id for macOS target. This enables instant deployment of bug fixes and minor updates (minutes vs days) while maintaining app stability through staged rollouts.
IDE Super App - macOS follows Clean Architecture with clear separation between Presentation, Domain, and Data layers. Flutter 3.27.4 handles UI layer with macos_ui design system for native macOS experience, BLoC/Cubit for state management, and GetIt for dependency injection. Business logic is handled by Interactor layer (ArticleInteractor, MateriInteractor, VideoInteractor, KelasInteractor, AuthInteractor), while Data layer uses Dio for REST API calls and Flutter Secure Storage for encrypted token storage. Media Kit provides advanced video playback, Syncfusion handles PDF rendering, and Shorebird enables over-the-air updates.
2024 Unified learning platform for economics & business students featuring 10+ integrated modules: learning materials, online classes, premium video courses, research journals, and expert consultations — all in a mobile app with offline-first architecture, HLS streaming, and adaptive navigation for Android/iOS.
2024 Unified learning platform for economics & business students featuring 9 integrated modules: learning materials, online classes, premium video courses, research journals, and expert consultations - all in a native Windows desktop app with Fluent UI design, real-time polling, and multi-role support.
