Download on
Project Highlights
8 structured content channels: Berita Roda Dua, Motor Listrik, Tips & Modifikasi, Sport, Do Care, Komunitas, Foto, and Video & Review
Dark mode support for comfortable reading in any lighting condition
Trending article curation with Top 5 ranking and popularity indicators
Full-screen image gallery viewer for photo journalism and event coverage
Article detail pages with tag-based discovery and related content recommendations
Sidebar navigation with search functionality for seamless channel switching
Video & review section with embedded YouTube player for hands-on motorcycle reviews
Push notifications via Firebase Cloud Messaging for breaking news alerts
Project Info
Tech Stack
Problem → Solution → Impact
Problem
Indonesian motorcycle enthusiasts — one of the largest riding communities in the world — relied on fragmented web-based sources and social media for motorcycle news, reviews, and community updates. No dedicated native mobile platform existed that structured content specifically for the two-wheeled vehicle ecosystem.
The web experience on mobile browsers was suboptimal for media-rich content: slow loading of photo galleries, no offline reading capability, poor video playback integration, and no push notifications for breaking news about new motorcycle launches or racing results.
Content discovery was inefficient — riders interested in specific topics like electric motorcycles or modification tips had to manually search through unstructured feeds, missing trending stories and important industry developments.
Solution
Built a native Android application that organizes otorider.com's content into 8 structured channels, each serving a specific segment of the motorcycle community: breaking news, electric vehicle coverage, tips & modifications, racing sport, community events, photo galleries, and video reviews.
Implemented dark mode for comfortable reading during any condition, trending article curation with Top 5 ranking for quick content discovery, full-screen image gallery viewer optimized for photo journalism, and Firebase push notifications for breaking news delivery.
Designed intuitive sidebar navigation with search functionality, tag-based content discovery on article pages, and related content recommendations — making it easy for riders to explore topics they care about without leaving the app.
Impact
- Native mobile experience delivers faster content consumption compared to browser-based access — optimized image loading, smooth scrolling, and native transitions
- Structured 8-channel navigation helps riders find relevant content instantly instead of scrolling through unstructured feeds
- Dark mode reduces eye strain for riders checking news in low-light conditions — a frequently requested feature by the community
- Trending article system surfaces popular content, ensuring readers never miss important industry developments
- Push notifications enable real-time breaking news delivery for motorcycle launches, racing results, and industry updates
- Photo gallery viewer provides immersive full-screen experience for event coverage and motorcycle photography
- Tag-based discovery and related content create natural content exploration paths, increasing reader engagement
Engineering Challenges & Solutions
Technical obstacles encountered during development and the architectural decisions made to overcome them.
Dark mode implementation with consistent theming across all content types including HTML articles
Built ThemeCubit with SharedPreferences persistence for light/dark toggle. Defined separate lightTheme and darkTheme with custom color schemes. Theme state propagates via BlocProvider to all widgets, with status bar styling adapting per mode. HTML article renderer also respects theme changes for consistent reading experience.
Rich article rendering with mixed HTML content, embedded images, and YouTube videos from CMS
Used flutter_html for rendering CMS article bodies with custom tag handlers. Integrated youtube_player_flutter for embedded video playback within articles. Built in-app WebView browser for external links, with platform-specific configuration (Android text zoom, iOS user agent) for proper content rendering.
Full-screen image gallery with smooth transitions and gesture controls for photo journalism content
Designed custom photo gallery viewer with pinch_zoom package for pinch-to-zoom and swipe navigation between images. Implemented carousel_slider for headline and trending article displays with auto-play. Used flutter_animate for smooth entry transitions across content lists.
HTTP caching strategy for media-heavy content with 7-day stale tolerance
Configured dio_cache_interceptor with in-memory cache store (2 MB per entry, 20 MB total) and refreshForceCache policy. Set max stale to 7 days for offline-tolerant browsing. Cache handles 401/403 errors gracefully, serving stale content when API authentication fails temporarily.
Advanced drawer navigation with 8+ content channels plus search and bottom navigation
Combined flutter_advanced_drawer for side menu navigation with persistent_bottom_nav_bar for main tabs. Drawer contains all 8 content channels plus utility links (disclaimer, contact, careers). Integrated search with easy_debounce for real-time article discovery via ArticleSearchBloc.
Clean Architecture with BLoC pattern for predictable state across 10+ content modules
Structured app into Data, Domain, and Presentation layers. Each feature module (Home, Article, Trending, Photo, Video, Search, Tag, Motor Listrik) has dedicated Bloc/Cubit with Equatable states. Used GetIt for DI, Dartz Either for functional error handling, and MultiBlocProvider for centralized state registration.
Architecture Overview
Otorider follows Clean Architecture with BLoC/Cubit for state management and GetIt for dependency injection. The app communicates with otorider.com's REST API via Dio with cache interceptor, uses flutter_html and WebView for article rendering, and Firebase services for push notifications, remote config, and crash reporting.
Screenshots
Interested in working together?
Let's discuss your next project and create something amazing.
Get In Touch