Back to IDE (Ilmu Digital Ekonomi)
edutech 2024

IDE Super App - Mobile

Product Engineer

Available on:

IDE Super App - Mobile is a comprehensive educational platform developed for PT Yapindo Jaya Abadi with the tagline "Super Learning Platform for Economics & Business Students. Learn smarter, more efficiently, and practically with IDE Super Apps."

This mobile application consolidates fragmented learning resources into a unified ecosystem, eliminating the need for students to juggle multiple platforms. Instead of switching between different systems, students can access all learning materials, classes, videos, journals, and expert consultations in one place.

The platform integrates 10+ core modules including multi-factor authentication, unified learning dashboard, live online classes via Zoom SDK, expert consultation booking, premium video streaming with HLS, academic journal library with PDF viewer, interactive learning modules, program study personalization, adaptive navigation system, and Firebase-based dynamic configuration.

Built with Flutter 3.29.3 using Clean Architecture, BLoC/Cubit state management, offline-first strategy with multi-layer caching, monorepo architecture with Melos, and enterprise-grade security with encrypted storage.

Flutter Dart BLoC/Cubit GetIt Dio Flutter Secure Storage Flutter Cache Manager Video Player Flutter PDFView WebView Flutter Firebase Remote Config Firebase Crashlytics Zoom SDK HLS Streaming Easy Localization Clean Architecture Melos Monorepo

Project Highlights

10+ integrated modules in single mobile app: Authentication, Dashboard, Online Classes, Expert Consultations, Premium Videos, Journals, Learning Modules, Program Selection, Navigation, and Dynamic Config

Offline-first architecture with multi-layer caching for content access without internet — videos and PDFs remain accessible offline

Adaptive navigation system: bottom navbar for mobile, sidebar for tablet with responsive breakpoints

HLS adaptive video streaming with offline caching for smooth playback even on low connectivity

Native PDF viewer with download capability, pagination support, and text selection for academic journals

Zoom SDK integration for seamless in-app video conferencing without leaving the application

Multi-role support with conditional UI for students and instructors (super user) with program selection

Clean Architecture implementation with 3-layer separation (Presentation, Domain, Data) for maintainability

Secure authentication with encrypted storage, device ID verification, and JWT token management

Firebase Remote Config for instant configuration updates without app redeployment

Project Info

Role Product Engineer
Year 2024
Category edutech

Tech Stack

FlutterDartBLoC/CubitGetItDioFlutter Secure StorageFlutter Cache ManagerVideo PlayerFlutter PDFViewWebView FlutterFirebase Remote ConfigFirebase CrashlyticsZoom SDKHLS StreamingEasy LocalizationClean ArchitectureMelos Monorepo

Problem → Solution → Impact

Problem

Economics & business students at PT Yapindo Jaya Abadi faced significant challenges. Learning content was scattered across 4+ different platforms: separate LMS, video sites, journal databases, and Zoom links.

Students struggled with poor internet connectivity, making it difficult to access content when offline. Mobile PDF reading experience was suboptimal, and coordination of live class schedules was scattered.

Instructors also faced difficulties managing content for multiple study programs simultaneously, leading to inefficiencies in content delivery and student support.

This fragmentation caused poor learning continuity, wasted time switching between platforms, reduced class attendance, and frustration with suboptimal mobile interfaces.

Solution

Developed a comprehensive mobile application with 10+ integrated modules using Flutter 3.29.3 and Clean Architecture. The platform unifies all learning resources (materials, classes, videos, journals, consultations) into a single mobile app optimized for Android and iOS.

Implemented offline-first strategy with multi-layer caching for content access without internet. Built HLS adaptive video streaming for smooth playback, native PDF viewer with download capability, and Zoom SDK for seamless in-app video conferencing.

Added multi-role support with conditional UI rendering for students and instructors. Integrated expert consultation booking, smart journal search with embedded PDF viewer, and secure authentication with encrypted storage.

Leveraged Firebase Remote Config for instant configuration updates without app redeployment, enabling rapid deployment and improved user experience.

Impact

  • Unified platform consolidates all learning resources in one app (vs 4+ separate systems) — saving 20-40 min/day
  • Offline-first capability with content access without internet — videos and PDFs remain accessible offline
  • Improved class attendance with live status tracking, countdown timers, and 1-click Zoom join
  • Enhanced content discovery through smart search, categorization, and featured carousels
  • Research access democratized with instant digital journal library vs manual library visits
  • Multi-program management streamlined for instructors with easy program switching
  • Expert consultation booking enables direct mentoring access — group sessions for 100+ students
  • Firebase Remote Config reduces deployment time 90% — instant feature rollout/rollback without app update

Engineering Challenges & Solutions

Technical obstacles encountered during development and the architectural decisions made to overcome them.

Challenge

Offline-first architecture with multi-layer caching for video content, PDF, and HTTP responses without third-party logging services

Solution

Implemented multi-layer caching strategy: flutter_cache_manager for HTTP responses and video caching with TTL management, local storage using flutter_secure_storage for credentials and user preferences, download capability for PDF with flutter_pdfview and local file storage. Built-in cache management with storage optimization, delete cache functionality, and automatic cache invalidation. All downloaded content remains accessible without internet connection.

Challenge

Adaptive navigation system for mobile, tablet, and desktop with single codebase

Solution

Implemented breakpoint system (<600px mobile, 600-1440px tablet, >1440px desktop) with device-specific navigation: bottom navbar for mobile with 4-5 main tabs, sidebar drawer for tablet with persistent navigation, and persistent sidebar + app bar for desktop. Created adaptive grid layouts (1-4 columns based on screen size), dynamic font sizing, and touch vs mouse-optimized interactions. Used Flutter's responsive widgets and MediaQuery for seamless cross-device experience with single codebase.

Challenge

HLS adaptive video streaming with offline caching and smooth playback across various network conditions

Solution

Integrated video_player package with HLS format support. Built adaptive bitrate system that auto-adjusts quality based on network speed, reducing bandwidth usage and eliminating buffering issues. Implemented video caching strategy using flutter_cache_manager with background download capability, progress tracking synced across devices, and platform-specific optimizations (Android MediaPlayer, iOS AVPlayer) while maintaining consistent UI across platforms.

Challenge

Native PDF viewer with download capability, pagination, and text selection for academic journals

Solution

Integrated flutter_pdfview for native reading experience with zoom, navigation, and bookmark capabilities. Built download system using flutter_cache_manager for offline storage with local cache management and storage optimization. Implemented advanced search with keyword filtering, category/date/author filters, and pagination for large datasets (1000+ articles). Created downloaded articles screen with delete cache functionality and storage management.

Challenge

Zoom SDK integration for seamless in-app video conferencing without disrupting user experience

Solution

Implemented Zoom SDK integration with custom UI overlay, handling authentication, meeting management, and session lifecycle. Built state management to preserve app context during Zoom sessions, ensuring smooth transitions between app and video calls. Implemented proper session cleanup and error handling for network interruptions, and automated profile validation before joining meetings.

Challenge

Firebase Remote Config for dynamic configuration updates without app redeployment and review process

Solution

Integrated Firebase Remote Config for dynamic configuration management: API endpoints, feature flags, encryption keys, and app settings. Built configuration system with default values, staged rollout strategy (5% → 50% → 100%), and rollback capability. Implemented encryption key management from Remote Config for secure data storage, and feature flag system for instant feature rollout/rollback without app update. Achieved 90% faster deployment time for configuration changes.

Challenge

Clean Architecture implementation with 3-layer separation for maintainability and testability

Solution

Designed Clean Architecture with Presentation (UI, BLoC/Cubit), Domain (entities, use cases, repository interfaces), and Data (repository implementations, API, local storage) layers. Used GetIt for dependency injection, BLoC/Cubit pattern for state management with immutable states (Equatable), and repository pattern for data abstraction. Implemented Either error handling (dartz) for functional error handling. This enables 95% testability with isolated unit tests, maintainability with clear separation of concerns, and scalability for future feature additions.

Challenge

Monorepo architecture with Melos for code sharing across apps and dependency management

Solution

Implemented Melos-based monorepo with shared packages: app_core for domain logic (entities, use cases, repository interfaces), app_common for UI components (reusable widgets, themes, utilities). Built dependency management with Melos scripts for dependency linking, version management, and build orchestration. This increases code reusability 70%, reduces build time 40% with shared dependencies, and simplifies maintenance with single source of truth for shared code.

Challenge

State management with BLoC pattern for predictable state updates in complex application

Solution

Implemented flutter_bloc with Cubit pattern for state management. Built immutable states using Equatable for efficient state comparison, and Either error handling (dartz) for functional error handling. Created separate cubits for each module (AuthCubit, DashboardCubit, ClassCubit, VideoCubit, JournalCubit) with clear state flow. Used GetIt for dependency injection, ensuring state updates propagate correctly across components. This results in predictable state updates, easier debugging with time-travel debugging, and reduced runtime errors.

Challenge

Security and encryption for sensitive user data (tokens, profile) with multi-layer protection

Solution

Implemented multi-layer security: flutter_secure_storage for encrypted local storage (credentials, tokens), AES encryption with keys from Firebase Remote Config for additional data protection, platform-specific device ID for device verification, and JWT token management with auto-refresh mechanism. Built secure session management with 30-day session validity, auto-login on app restart with background auth validation, and device limit enforcement. Achieved zero reported security breaches with compliance to data protection standards.

Challenge

Comprehensive error handling and crash tracking for production stability

Solution

Integrated Firebase Crashlytics for real-time error tracking and crash reporting. Built custom logger with structured logging, graceful error UI with user-friendly error messages, and structured error responses with Either pattern (dartz). Implemented error recovery mechanisms with retry logic and fallback states. This results in 99.5% crash-free rate, 60% reduction in MTTR (Mean Time To Resolution), and improved user experience with proper error handling.

Architecture Overview

IDE Super App - Mobile follows Clean Architecture with clear separation between Presentation, Domain, and Data layers. Flutter 3.29.3 handles UI layer with BLoC/Cubit state management, GetIt for dependency injection, and adaptive navigation for mobile/tablet/desktop. Business logic is handled by Domain layer (entities, use cases, repository interfaces), while Data layer uses Dio for REST API calls, flutter_secure_storage for encrypted local storage, and flutter_cache_manager for offline caching. Firebase Remote Config enables dynamic configuration, Firebase Crashlytics handles error tracking, Zoom SDK provides video conferencing, and monorepo architecture with Melos enables code sharing across apps.

Presentation
Flutter Mobile UIBLoC/Cubit State ManagementAdaptive NavigationResponsive Widgets
Domain
Entities/ModelsUse CasesRepository InterfacesBusiness Logic
Data
Repository ImplementationsREST API (Dio)Flutter Secure StorageFlutter Cache ManagerLocal Storage
Services
Firebase Remote ConfigFirebase CrashlyticsZoom SDKHLS Video CDNEasy Localization
Security
JWT AuthenticationAES EncryptionEncrypted StorageToken ManagementDevice ID Verification

Screenshots

Interested in working together?

Let's discuss your next project and create something amazing.

Get In Touch