# Tuan Do β€” Complete Portfolio Knowledge Base This document contains the entire raw text, documentation, and code representations of Tuan Do's portfolio. --- ## File: README.md - Title: Welcome to My Portfolio - Section: about - Language: markdown ```markdown # Welcome to My VS Code Portfolio πŸ‘‹ Welcome! I'm a **Mobile & Frontend Engineer** with ~5 years of professional experience specializing in **Flutter**, native **iOS/Android**, and modern **ERP web architectures**. > *"Exploring codebases is the most natural way developers communicate."* This portfolio is designed to look, feel, and behave like Visual Studio Code. --- ## ⚑ Quick Navigation & Keyboard Shortcuts | Shortcut | Action | | :--- | :--- | | **`Cmd/Ctrl + K`** | **Open Command Palette** (fuzzy search across all files, experiences, and articles) | | **`Cmd/Ctrl + W`** | **Close active tab** | | **`Cmd/Ctrl + Tab`** | **Switch to next open tab** | | **`Esc`** | **Dismiss Command Palette / Modals** | --- ## πŸ“‚ Explorer Guide Navigate through the **Activity Bar** on the leftmost strip: 1. **About Me (`about/`)** - `bio.md`: Background, engineering philosophy, and interests. - `skills.json`: Technical competencies, frameworks, and tooling. - `now.md`: What I'm currently focused on, building, and exploring. 2. **Experiences (`experiences/`)** - `bolt-holdings.dart`: Mobile Developer at Bolt Holdings Talent (Ramond Holdings, Finra Invest, Upstock). - `tinasoft.dart`: Mobile Developer at Tinasoft Vietnam ., JSC (Scalable Flutter apps, BLoC, RESTful APIs). 3. **Articles (`articles/`)** - `building-flutter-network-inspector.md`: Deep dive into Dart HttpOverrides and building an in-app inspector. - `offline-first-erp-architecture.md`: Optimistic mutations, local caching, and conflict resolution. 4. **Projects (`projects/`)** - `interceptly.dart`: **Open-source Flutter network inspector SDK on pub.dev** (Dio, Http, Chopper support). - `ramond-holdings.dart`: Real estate & social housing trading platform with Centrifuge real-time updates and deposit workflow. - `finra-invest.dart`: Consumer investment app featuring Smart OTP authentication and Collaborator partner module. - `upstock.dart`: Modern stock trading app with real-time Order Book, gamified Quests, and Rive animations. - `inspector-preview.html`: Interactive in-app network inspector demo for Interceptly. --- Feel free to browse files, open multiple tabs, and test out keyboard shortcuts! ``` --- ## File: about/bio.md - Title: Bio β€” About Me - Section: about - Language: markdown ```markdown # Biography: Tuan I am a product-focused **Mobile & Frontend Engineer** with roughly 5 years of hands-on experience building mission-critical client applications across mobile and web platforms. --- ## πŸ›  What I Do - **Flutter & Mobile Architecture**: Over 4 years of production Flutter development, shipping complex apps with BLoC, Riverpod, clean architecture, and custom native platform channels (Swift/Kotlin). - **Enterprise ERP Frontend**: Currently engineering a production-grade enterprise ERP frontend. I focus on high-density UI, complex tabular data, virtualized rendering, and rock-solid offline-first synchronization. - **Open-Source Maintainer**: Creator and maintainer of **[Interceptly](https://pub.dev)**, a network inspector SDK for Flutter published on pub.dev that captures HTTP/Dio traffic and renders an in-app debugging UI. - **UI/UX & Entrepreneurship**: Deep appreciation for micro-interactions, accessibility, typography, and developer tooling ergonomics. Always thinking about product viability, user empathy, and business value. --- ## πŸ’‘ Core Engineering Principles 1. **Deterministic State Management**: Predictable, unidirectional data flows over ad-hoc mutations. 2. **Resilient Offline-First UX**: Mobile networks are unpredictable. Interfaces must never freeze, and optimistic updates must handle rollbacks gracefully. 3. **Developer Ergonomics**: Clean internal APIs, strong typing, and comprehensive developer tooling compound developer velocity over time. 4. **Performance by Default**: Smooth 60/120fps animations, lazy viewport loading, and zero unnecessary re-renders. --- ## πŸ“¬ Get In Touch - **GitHub**: [github.com/tuanpluss02](https://github.com) - **pub.dev**: [pub.dev/publishers/interceptly](https://pub.dev) - **LinkedIn**: [linkedin.com/in/tuanpluss02](https://linkedin.com) - **Email**: tuan@stormx.dev ``` --- ## File: about/skills.json - Title: Technical Skills & Competencies - Section: about - Language: json ```json { "id": "skills", "title": "Technical Skills & Competencies", "description": "Categorized breakdown of technical proficiency and toolchains", "summary": "Proficiency in Flutter, Native iOS/Android, React/Next.js, TypeScript, and Architecture", "order": 2, "$schema": "https://json-schema.org/draft/2020-12/schema", "name": "Technical Competencies", "experienceYears": 5, "specializations": [ { "category": "Mobile Engineering", "primary": [ "Flutter", "Dart", "Swift (iOS)", "Kotlin (Android)" ], "librariesAndFrameworks": [ "BLoC / Cubit", "Riverpod", "Dio / HttpOverrides", "Platform Channels & FFI", "Secure Enclave / KeyStore", "Isolates / Background Compute", "Drift (SQLite) / Hive", "App Store & Google Play Pipelines" ], "level": "Expert" }, { "category": "Frontend & Web Engineering", "primary": [ "TypeScript", "React", "Next.js (App Router)", "Tailwind CSS" ], "librariesAndFrameworks": [ "TanStack Query & Virtual", "Zustand / Redux Toolkit", "WebSockets / SSE", "Zod Schema Validation", "Radix UI / Headless Components", "HTML Canvas & Performance Profiling" ], "level": "Advanced" }, { "category": "Architecture & Engineering Practices", "primary": [ "Clean Architecture", "Offline-First Sync", "Design Systems" ], "librariesAndFrameworks": [ "Optimistic Mutations & Conflict Resolution", "Monorepo Workspaces (Nx / Turborepo)", "CI/CD (GitHub Actions, Fastlane, Codemagic)", "Automated Integration & Driver Testing", "Package Publishing (pub.dev, npm)", "Accessibility (WCAG, TalkBack, VoiceOver)" ], "level": "Senior" } ] } ``` --- ## File: about/now.md - Title: What I'm Doing Now - Section: about - Language: markdown ```markdown # What I'm Doing Now (Updated Recently) --- ### 🏒 Building a Production-Grade ERP Frontend - Working with a tight-knit engineering team architecting the web and mobile frontend for an enterprise ERP platform. - Tackling complex operational challenges: virtualizing massive inventory data tables, multi-currency accounting entries, and seamless background sync for field operations on unstable network connections. ### πŸ“¦ Maintaining Interceptly SDK on pub.dev - Actively iterating on our open-source Flutter network inspection package. - Implementing automatic cURL command copying, mock API response injection directly on the device, and zero-overhead production tree-shaking. ### πŸ”¬ Exploring & Experimenting - **Cross-Platform Native Bridges**: Experimenting with Dart FFI and Rust for high-throughput cryptographic verification on edge mobile devices. - **Design Systems**: Crafting keyboard-first component primitives with focus-trap ergonomics. ``` --- ## File: experiences/bolt-holdings.dart - Title: Bolt Holdings Talent β€” Mobile Developer - Section: experiences - Language: dart ```dart /** * @id bolt-holdings * @title Bolt Holdings Talent β€” Mobile Developer * @description Developing flagship Flutter mobile applications in FinTech and Real Estate * @company Bolt Holdings Talent * @role Mobile Developer * @date Jan 2025 β€” Present * @tags Flutter, Dart, Swift, iOS, Clean Architecture, Centrifuge, Smart OTP * @summary Architecting production mobile apps: Ramond Holdings, Finra Invest, and Upstock. * @order 1 * @default true */ /// Role: Mobile Developer /// Company: Bolt Holdings Talent (Full-time Β· On-site) /// Duration: Jan 2025 β€” Present /// Core Products: Ramond Holdings, Finra Invest, Upstock import 'dart:async'; class BoltHoldingsExperience { final String company = 'Bolt Holdings Talent'; final String role = 'Mobile Developer'; final String employmentType = 'Full-time Β· On-site'; final String duration = 'Jan 2025 β€” Present'; final List coreTechnologies = const [ 'Flutter & Dart', 'Native iOS (Swift)', 'Clean Architecture & Modular Monorepo', 'Centrifuge Real-Time WebSocket SDK', 'Smart OTP Cryptographic Challenge-Response', 'Rive Animation State Machines', 'BLoC & Riverpod State Management', 'App Store & Google Play Store Automation', ]; final Map> keyProjectsAndImpact = const { 'Ramond Holdings (Real Estate & Social Housing Platform)': [ 'Established the project foundation using Clean Architecture, defining core modules, flavors, and team coding standards.', 'Integrated Centrifuge client SDK for real-time inventory subscriptions, eliminating apartment double-booking race conditions.', 'Engineered end-to-end Apartment Deposit workflow with complex multi-step state machines and input validation.', 'Built the Master Search engine with multi-criteria filtering and virtualized list rendering for smooth 60fps scrolling.', ], 'Finra Invest (Consumer Investment & Personal Finance)': [ 'Co-developed FinraInvest, empowering users to invest and manage personal finances securely.', 'Delivered end-to-end account registration flow with seamless eKYC verification.', 'Implemented friction-light Smart OTP multi-layer authentication bound to hardware Secure Enclave on iOS.', 'Shipped the Collaborator module for partner/affiliate onboarding, access controls, and referral tracking.', 'Collaborated closely with Product, Design, and Backend teams to maintain rapid, polished release cycles.', ], 'Upstock (Gamified Stock Trading Platform)': [ 'Engineered the real-time Order Book module (Level 2 market depth) with buffered WebSocket streams.', 'Built gamified User Quest/Task system with daily streaks and XP milestones to maximize user retention.', 'Integrated GPU-accelerated Rive animations responding interactively to order execution and price alerts.', ], }; void printOverview() { print('Delivering high-performance, resilient mobile fintech and proptech applications at Bolt Holdings Talent.'); } } ``` --- ## File: experiences/tinasoft.dart - Title: Tinasoft Vietnam ., JSC β€” Mobile Developer - Section: experiences - Language: dart ```dart /** * @id tinasoft * @title Tinasoft Vietnam ., JSC β€” Mobile Developer * @description Mobile Developer building scalable cross-platform Flutter applications for enterprise clients * @company Tinasoft Vietnam ., JSC * @role Mobile Developer * @date Jan 2024 β€” Dec 2024 * @tags Flutter, Dart, BLoC, RESTful APIs, Dio, CI/CD, Mobile Engineering * @summary Developed scalable cross-platform mobile solutions with Flutter, clean state management, and optimized API integrations. * @order 2 */ /// Role: Mobile Developer /// Company: Tinasoft Vietnam ., JSC /// Duration: Jan 2024 β€” Dec 2024 (1 year) /// Focus: Custom Cross-Platform Mobile Application Development class TinasoftExperience { final String company = 'Tinasoft Vietnam ., JSC'; final String role = 'Mobile Developer'; final String duration = 'Jan 2024 β€” Dec 2024 (1 yr)'; final List techStack = const [ 'Flutter & Dart', 'BLoC Pattern & Cubit', 'Dio & RESTful API Architecture', 'Offline Caching (Hive & SharedPreferences)', 'Firebase (Auth, Firestore, Cloud Messaging)', 'Git Flow, Code Review & CI/CD Pipelines', ]; final List keyContributions = const [ 'Developed high-performance cross-platform mobile applications for enterprise clients across fintech and commerce domains.', 'Implemented modular feature architectures using BLoC state management to ensure maintainability and testability.', 'Integrated RESTful APIs with Dio, implementing robust token refresh interceptors, request retry mechanisms, and offline caching.', 'Collaborated in Agile/Scrum sprints, actively participating in sprint planning, code reviews, and pair programming sessions.', 'Configured automated deployment workflows using Fastlane and GitHub Actions, delivering frequent staging builds via TestFlight and Firebase App Distribution.', 'Optimized UI widget trees and image asset pipelines to maintain consistent 60fps animations across a wide range of iOS and Android devices.', ]; void printSummary() { print('Engineered production Flutter applications with clean code standards at Tinasoft Vietnam.'); } } ``` --- ## File: projects/interceptly.dart - Title: Interceptly SDK β€” Network Inspector for Flutter - Section: projects - Language: dart ```dart /** * @id interceptly * @title Interceptly SDK β€” Network Inspector for Flutter * @description High-performance network inspector for Flutter providing real-time traffic visualization for Dio, Http, and Chopper with minimal impact on UI performance. * @date Mar 2026 – Present * @tags Dart, Flutter, Dio, Http, Chopper, Networking, Open Source * @summary Real-time traffic visualization for Dio, Http, and Chopper with shake-to-open overlay and cURL export. * @pubDev https://pub.dev/packages/interceptly * @github https://github.com/Tuanpluss02/interceptly * @order 1 * @default true */ /// Package: interceptly /// Author: Do Ngoc Tuan (@Tuanpluss02) /// Platform: Flutter / Dart (iOS, Android, macOS, Windows, Web) /// Published on: pub.dev/packages/interceptly import 'dart:async'; import 'dart:collection'; import 'dart:io'; /// Core inspector engine managing intercepted HTTP traffic with ring-buffer storage /// and zero-overhead production tree-shaking. class Interceptly { static final Interceptly instance = Interceptly._internal(); Interceptly._internal(); bool _isEnabled = false; final int _maxRecords = 250; final Queue _buffer = DoubleLinkedQueue(); final StreamController _recordStream = StreamController.broadcast(); /// Initialize Interceptly with optional gesture activation and header sanitization. void init({ bool enableShakeDetection = true, bool redactSensitiveHeaders = true, List obfuscatedKeys = const ['authorization', 'x-api-key', 'cookie'], }) { _isEnabled = true; _installHttpOverrides(redactSensitiveHeaders, obfuscatedKeys); print('[Interceptly] Inspector activated. Monitoring Dio, Http, and Chopper traffic.'); } /// Global hook overriding Dart's internal HttpClient factory for package:http void _installHttpOverrides(bool redact, List obfuscated) { HttpOverrides.global = _InterceptlyHttpOverrides( onTrafficCaptured: (record) => _capture(record), ); } /// Captures network transaction into high-speed memory buffer without UI stutter void _capture(NetworkRecord record) { if (!_isEnabled) return; if (_buffer.length >= _maxRecords) { _buffer.removeFirst(); } _buffer.addLast(record); _recordStream.add(record); } Stream get stream => _recordStream.stream; List get history => _buffer.toList(growable: false); } /// Dio Interceptor integration for automatic request/response lifecycle logging class InterceptlyDioInterceptor { final Interceptly _inspector = Interceptly.instance; void onRequest(String id, String url, String method, Map headers) { // Record request start timestamp for accurate latency profiling } void onResponse(String id, int statusCode, int responseBytes, Duration duration) { // Capture response payload and latency telemetry } void onError(String id, String errorMessage, int? statusCode) { // Flag failed transaction in inspector UI } } /// Chopper Interceptor integration for structured REST API inspection class InterceptlyChopperInterceptor { final Interceptly _inspector = Interceptly.instance; Future intercept(dynamic chain) async { // Intercept Chopper Request/Response pipeline return chain; } } /// Captured network transaction model with cURL generator class NetworkRecord { final String id; final String url; final String method; final int statusCode; final Duration duration; final int requestBytes; final int responseBytes; final Map headers; final DateTime timestamp; const NetworkRecord({ required this.id, required this.url, required this.method, required this.statusCode, required this.duration, required this.requestBytes, required this.responseBytes, required this.headers, required this.timestamp, }); /// Generates a replayable cURL command for debugging in Postman/terminal String toCurl() { final headerFlags = headers.entries .map((e) => '-H "${e.key}: ${e.value}"') .join(' '); return 'curl -X $method "$url" $headerFlags --compressed'; } } class _InterceptlyHttpOverrides extends HttpOverrides { final void Function(NetworkRecord) onTrafficCaptured; _InterceptlyHttpOverrides({required this.onTrafficCaptured}); } ``` --- ## File: projects/ramond-holdings.dart - Title: Ramond Holdings β€” Real Estate & Social Housing Trading Platform - Section: projects - Language: dart ```dart /** * @id ramond-holdings * @title Ramond Holdings β€” Real Estate & Social Housing Trading Platform * @description Specialized trading platform for real estate and social housing, facilitating seamless transactions between sales agents and buyers. * @date Aug 2025 – Present * @company Bolt Holdings Talent * @role Mobile Developer * @tags Dart, Flutter, Swift, Clean Architecture, Centrifuge, Real-time WebSockets, State Management * @summary Clean Architecture foundation, Centrifuge real-time apartment availability, deposit workflow, and Master Search engine. * @appStore https://apps.apple.com/app/ramond-holdings/id6475458999 * @playStore https://play.google.com/store/apps/details?id=com.ramondholdings.app * @order 2 */ /// Project: Ramond Holdings (Mobile Trading Platform) /// Organization: Associated with Bolt Holdings Talent /// Duration: Aug 2025 – Present /// Stack: Flutter (Dart), Native iOS (Swift), Clean Architecture, Centrifuge WebSocket SDK import 'dart:async'; // ============================================================================ // 1. ARCHITECTURE FOUNDATION & APP FLAVORS // ============================================================================ enum AppFlavor { dev, staging, production } class RamondBuildConfig { final AppFlavor flavor; final String apiBaseUrl; final String wsCentrifugeEndpoint; final bool enableLogging; const RamondBuildConfig({ required this.flavor, required this.apiBaseUrl, required this.wsCentrifugeEndpoint, this.enableLogging = false, }); static late final RamondBuildConfig current; static void initialize(AppFlavor flavor) { current = flavor == AppFlavor.production ? const RamondBuildConfig( flavor: AppFlavor.production, apiBaseUrl: 'https://api.ramondholdings.com/v1', wsCentrifugeEndpoint: 'wss://realtime.ramondholdings.com/connection/websocket', ) : const RamondBuildConfig( flavor: AppFlavor.staging, apiBaseUrl: 'https://staging-api.ramondholdings.com/v1', wsCentrifugeEndpoint: 'wss://staging-realtime.ramondholdings.com/connection/websocket', enableLogging: true, ); } } // ============================================================================ // 2. REAL-TIME CENTRIFUGE INTEGRATION (PREVENTING DOUBLE-BOOKING) // ============================================================================ enum UnitLockStatus { available, reserved, deposited, sold } class ApartmentUnitEvent { final String unitId; final String projectId; final String unitCode; final UnitLockStatus status; final String? lockedByAgentId; final DateTime updatedAt; const ApartmentUnitEvent({ required this.unitId, required this.projectId, required this.unitCode, required this.status, this.lockedByAgentId, required this.updatedAt, }); } /// Real-time client subscription manager ensuring Sales Dashboard inventory /// stays synchronized instantly across hundreds of concurrent agents. class RealtimeInventorySyncService { final StreamController _unitUpdateStream = StreamController.broadcast(); Stream get onUnitStateChanged => _unitUpdateStream.stream; /// Subscribes to project-specific Centrifuge channel Future subscribeToProject(String projectId) async { final channel = 'projects:$projectId:inventory'; print('[Centrifuge] Subscribed to real-time inventory channel: $channel'); // Listens for instant lock events broadcasted by backend // Triggering instant UI repaint to eliminate double-booking race conditions } void dispose() { _unitUpdateStream.close(); } } // ============================================================================ // 3. APARTMENT DEPOSIT WORKFLOW & FORM VALIDATION STATE MACHINE // ============================================================================ enum DepositStep { unitSelection, customerInfo, paymentVerification, contractSigning, confirmed } class ApartmentDepositWorkflow { DepositStep currentStep = DepositStep.unitSelection; final Map formData = {}; bool validateCustomerData({ required String fullName, required String nationalId, required String phoneNumber, }) { final isIdValid = RegExp(r'^\d{9,12}$').hasMatch(nationalId); final isPhoneValid = RegExp(r'^(0|\+84)\d{9}$').hasMatch(phoneNumber); if (fullName.trim().isNotEmpty && isIdValid && isPhoneValid) { formData['customer'] = { 'fullName': fullName, 'nationalId': nationalId, 'phone': phoneNumber, }; return true; } return false; } Future submitDepositLock({ required String unitId, required double depositAmount, required String agentToken, }) async { // Atomic deposit reservation call with optimistic locking currentStep = DepositStep.paymentVerification; return true; } } // ============================================================================ // 4. MASTER SEARCH ENGINE WITH ADVANCED FILTERING & VIRTUALIZATION // ============================================================================ class SearchFilterCriteria { final String? query; final double? minPrice; final double? maxPrice; final int? minBedrooms; final String? projectZone; final String? orientation; const SearchFilterCriteria({ this.query, this.minPrice, this.maxPrice, this.minBedrooms, this.projectZone, this.orientation, }); } class MasterSearchEngine { /// Evaluates unit criteria against high-density apartment dataset with /// sub-millisecond query execution for smooth 60fps list scrolling. List filterUnits({ required List rawUnits, required SearchFilterCriteria criteria, required bool Function(T unit, SearchFilterCriteria criteria) predicate, }) { return rawUnits.where((unit) => predicate(unit, criteria)).toList(growable: false); } } ``` --- ## File: projects/finra-invest.dart - Title: FinraInvest β€” Consumer Investment & Personal Finance App - Section: projects - Language: dart ```dart /** * @id finra-invest * @title FinraInvest β€” Consumer Investment & Personal Finance App * @description A consumer investment app empowering users to start investing and manage personal finances securely. * @date Jan 2025 – Present * @company Bolt Holdings Talent * @role Mobile Developer * @tags iOS Development, Dart, Flutter, Swift, Smart OTP, FinTech, Biometrics, Security * @summary Consumer investment app with end-to-end registration flow, Smart OTP authentication, and affiliate collaborator module. * @appStore https://apps.apple.com/app/finrainvest/id6477832626 * @playStore https://play.google.com/store/apps/details?id=com.finra.invest * @order 3 */ /// Project: FinraInvest (Finra Capital) /// Organization: Associated with Bolt Holdings Talent /// Duration: Jan 2025 – Present /// Focus: Secure Wealth Management, Smart OTP Multi-Layer Auth, Affiliate Partner Platform import 'dart:async'; import 'dart:convert'; // ============================================================================ // 1. END-TO-END ACCOUNT REGISTRATION & ONBOARDING STATE MACHINE // ============================================================================ enum RegistrationStep { phoneInput, otpChallenge, identityEkyc, pinCreation, completed } class AccountRegistrationCoordinator { RegistrationStep currentStep = RegistrationStep.phoneInput; String? _sessionToken; /// Validates phone number and initializes biometric-backed session Future initiateRegistration(String phoneNumber) async { if (phoneNumber.length < 10) return false; currentStep = RegistrationStep.otpChallenge; _sessionToken = 'reg_session_${DateTime.now().millisecondsSinceEpoch}'; return true; } /// Processes identity verification and biometric registration Future completeIdentityVerification({ required String idCardNumber, required bool biometricConsent, }) async { currentStep = RegistrationStep.pinCreation; } } // ============================================================================ // 2. SMART OTP ENGINE (FRICTION-LIGHT, HARDWARE-BACKED AUTHENTICATION) // ============================================================================ class SmartOtpChallenge { final String challengeId; final String transactionReference; final int expireAtEpoch; const SmartOtpChallenge({ required this.challengeId, required this.transactionReference, required this.expireAtEpoch, }); } /// Smart OTP manager eliminating external SMS latency by generating /// cryptographic time-bound OTP signatures bound to hardware Secure Enclave. class SmartOtpManager { static final SmartOtpManager instance = SmartOtpManager._internal(); SmartOtpManager._internal(); bool _isDeviceRegistered = false; String? _hardwareKeyAlias; /// Registers user's device with hardware-backed keypair (iOS Secure Enclave / Android KeyStore) Future activateSmartOtp({ required String pinCode, required String userSession, }) async { _hardwareKeyAlias = 'finra.smart_otp.key'; _isDeviceRegistered = true; print('[SmartOTP] Hardware-isolated signer successfully provisioned.'); return true; } /// Generates a 6-digit dynamic OTP without network roundtrips String generateTransactionOtp(SmartOtpChallenge challenge) { if (!_isDeviceRegistered) throw StateError('Smart OTP device not enrolled'); final epochMinutes = DateTime.now().millisecondsSinceEpoch ~/ 30000; final hashInput = '${challenge.challengeId}:$epochMinutes:$_hardwareKeyAlias'; // Simulating SHA-256 HMAC truncation to 6 numeric digits final digest = base64Url.encode(utf8.encode(hashInput)); final numericOnly = digest.replaceAll(RegExp(r'[^0-9]'), ''); return (numericOnly.length >= 6 ? numericOnly.substring(0, 6) : '849201'); } } // ============================================================================ // 3. COLLABORATOR MODULE (PARTNERS & AFFILIATES ECOSYSTEM) // ============================================================================ enum CollaboratorTier { bronze, silver, gold, diamond } class CollaboratorProfile { final String partnerId; final String affiliateCode; final CollaboratorTier tier; final int totalReferredUsers; final double accumulatedCommission; const CollaboratorProfile({ required this.partnerId, required this.affiliateCode, required this.tier, required this.totalReferredUsers, required this.accumulatedCommission, }); } class CollaboratorService { /// Fetches partner dashboard metrics and onboarding workflows Future fetchPartnerMetrics(String partnerId) async { return const CollaboratorProfile( partnerId: 'partner_9921', affiliateCode: 'FINRA_TOP_INVEST', tier: CollaboratorTier.gold, totalReferredUsers: 342, accumulatedCommission: 48500000.0, ); } } ``` --- ## File: projects/upstock.dart - Title: Upstock β€” Gamified Stock Trading & Investment Platform - Section: projects - Language: dart ```dart /** * @id upstock * @title Upstock β€” Gamified Stock Trading & Investment Platform * @description A modern stock trading application integrating gamification to enhance user engagement. * @date Feb 2025 – Aug 2025 * @company Bolt Holdings Talent * @role Mobile Developer * @tags Dart, Flutter, Rive Animations, Real-time Order Book, Gamification, WebSockets * @summary Modern stock trading application integrating real-time Order Book, gamified User Quests, and high-performance Rive animations. * @playStore https://play.google.com/store/apps/details?id=com.upstock.invest * @appStore https://apps.apple.com/app/upstock-trade-invest/id6479590623 * @order 4 */ /// Project: Upstock (Trade & Invest) /// Organization: Associated with Bolt Holdings Talent /// Duration: Feb 2025 – Aug 2025 /// Focus: High-Frequency Order Book, Gamification Quests, Interactive Rive Motion Design import 'dart:async'; // ============================================================================ // 1. REAL-TIME ORDER BOOK MODULE (LEVEL 2 MARKET DATA) // ============================================================================ class PriceLevel { final double price; final int volume; final int orderCount; const PriceLevel({ required this.price, required this.volume, required this.orderCount, }); } class OrderBookSnapshot { final String symbol; final List bids; final List asks; final DateTime timestamp; const OrderBookSnapshot({ required this.symbol, required this.bids, required this.asks, required this.timestamp, }); /// Computes cumulative volume depth for visual order book ladder rendering double calculateDepthPercentage(int currentVolume, int maxVolume) { if (maxVolume == 0) return 0.0; return (currentVolume / maxVolume).clamp(0.0, 1.0); } } /// High-throughput Order Book stream provider buffering WebSocket updates /// to prevent UI thread frame drops during extreme market volatility. class OrderBookManager { final StreamController _orderBookStream = StreamController.broadcast(); Stream get stream => _orderBookStream.stream; void handleMarketDataTick(String symbol, Map rawPacket) { // Throttled 60fps state dispatch for fluid market depth animation } } // ============================================================================ // 2. USER QUEST & TASK GAMIFICATION ENGINE // ============================================================================ enum QuestType { firstTrade, dailyStreak, portfolioDiversification, volumeMilestone } class UserQuest { final String id; final String title; final String description; final QuestType type; final int currentProgress; final int targetGoal; final int rewardXp; final bool isClaimed; const UserQuest({ required this.id, required this.title, required this.description, required this.type, required this.currentProgress, required this.targetGoal, required this.rewardXp, required this.isClaimed, }); bool get isCompleted => currentProgress >= targetGoal; } class GamificationEngine { final List _activeQuests = []; void onTradeExecuted({required String symbol, required double amount}) { // Updates quest progress, rewards user badges, and fires trigger animations } } // ============================================================================ // 3. RIVE ANIMATION STATE MACHINE INTEGRATION // ============================================================================ abstract class RiveController { void fireTrigger(String triggerName); void setNumberInput(String inputName, double value); } /// Manages dynamic Rive animations responding seamlessly to user interactions /// such as celebration confetti, mascot reactions, and level-up rewards. class UpstockRiveAnimationManager { RiveController? _mascotStateMachine; void bindStateMachine(RiveController controller) { _mascotStateMachine = controller; } /// Triggers gamified visual effect on successful trade execution void playTradeCelebration(double orderValue) { _mascotStateMachine?.setNumberInput('tradeValue', orderValue); _mascotStateMachine?.fireTrigger('onTradeSuccess'); } /// Plays dynamic reaction when market price hits user target alert void playPriceAlertNotification() { _mascotStateMachine?.fireTrigger('onAlertTriggered'); } } ``` --- ## File: projects/inspector-preview.html - Title: Flutter Network Inspector Preview - Section: projects - Language: html ```html Interceptly β€” Flutter Network Inspector
Interceptly Flutter DevTool
Response Body
Headers
Timing

Select a request on the left to view payload details.

``` --- ## File: articles/building-flutter-network-inspector.md - Title: Building an In-App Network Inspector SDK for Flutter - Section: articles - Language: markdown ```markdown # Building an In-App Network Inspector SDK for Flutter Debugging network payloads in production or staging Flutter apps is often a headache. Teams rely on Charles Proxy or Proxyman, which requires installing custom SSL certificates, configuring device Wi-Fi proxies, and dealing with certificate pinning headaches. When building **[Interceptly](https://pub.dev)**, my goal was simple: **Zero external proxies. Shake the device, and inspect every HTTP request, header, response, and duration directly on the screen.** --- ## 1. How Dart Handles Global HTTP: `HttpOverrides` In Dart, all standard HTTP requests initiated via `dart:io`'s `HttpClient` flow through a factory method. Dart exposes a powerful hook: ```dart class InterceptlyHttpOverrides extends HttpOverrides { final NetworkCallback onTraffic; InterceptlyHttpOverrides({required this.onTraffic}); @override HttpClient createHttpClient(SecurityContext? context) { final client = super.createHttpClient(context); return InterceptedHttpClient(client, onTraffic); } } ``` By calling `HttpOverrides.global = InterceptlyHttpOverrides(...)` during app bootstrapping, every single HTTP call in the app (including libraries like **Dio**, **http**, or image loaders) is routed through our custom client! --- ## 2. The Non-Destructive Stream Splitting Problem When an HTTP response arrives as a `Stream>`, reading the byte stream to log it consumes it. If your logging layer reads the stream, the UI caller will get an empty body or `StateError: Stream already listened to`. To solve this, we implemented a custom byte-stream teeing transformer: ```dart Stream> splitStream(Stream> source, Function(List) onChunk) { return source.map((chunk) { onChunk(chunk); // Record chunk for Interceptly return chunk; // Pass chunk along untouched to the consumer }); } ``` --- ## 3. Designing the Shake-to-Open Overlay To make it completely zero-configuration for QA and testers: - We subscribed to accelerometer events from the device sensors. - When an acceleration threshold exceeds \(15 m/s^2\), an overlay entry is inserted into Flutter's `Navigator.overlay`. - The overlay renders a sleek, dark-themed inspector with search, status-code filtering, and one-tap **Copy as cURL**. --- ## 4. Packaging and Publishing on pub.dev Publishing an open-source package requires rigorous code quality: 1. **Zero runtime overhead in release mode**: Providing an empty no-op stub implementation when `kReleaseMode` is active. 2. **Exhaustive documentation**: 100% pub points on pub.dev with thorough API docs and an example project. 3. **Automated CI**: Continuous testing via GitHub Actions across stable and beta Flutter channels. Check out the package live on [pub.dev/packages/interceptly](https://pub.dev)! ``` --- ## File: articles/offline-first-erp-architecture.md - Title: Architecting Offline-First Mutations in Modern Enterprise Frontends - Section: articles - Language: markdown ```markdown # Architecting Offline-First Mutations in Modern Enterprise Frontends In enterprise warehouse and logistics operations, internet connectivity is never a given. Concrete walls, basement storage facilities, and moving delivery trucks cause constant network dropouts. Yet, warehouse staff cannot stop scanning packages or logging inventory changes. In this post, I break down the architectural blueprint we implemented for our enterprise ERP suite. --- ## 1. The Core Triad: Store, Queue, Reconciler An offline-first architecture rests on three foundational pillars: ``` β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β” β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β” β”‚ Optimistic Cache β”‚ ────> β”‚ Mutation Queue β”‚ β”‚ (IndexedDB/Mem) β”‚ β”‚ (Persistent Log) β”‚ β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜ β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜ β”‚ β”‚ β”‚ β–Ό β”‚ β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β” └───────────────> β”‚ Network Reconciler β”‚ ───> Cloud API β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜ ``` 1. **Optimistic Cache**: Updates UI instantaneously (zero latency) using temporary UUIDs. 2. **Mutation Queue**: An append-only persistent FIFO log stored in IndexedDB (web) or SQLite (mobile). 3. **Network Reconciler**: Watches network connectivity status and drains the queue sequentially. --- ## 2. Deterministic Conflict Resolution What happens when two users modify the same purchase order while both are offline? We utilize a hybrid approach combining **Field-Level Last-Write-Wins (LWW)** with **Server-Reconciled Revision Vectors**: ```typescript interface EntitySnapshot { entityId: string; revision: number; updatedAt: string; data: T; } interface MutationRecord { mutationId: string; baseRevision: number; payload: Partial; timestamp: number; } ``` - If the server's current revision matches `baseRevision`, the mutation applies cleanly. - If revisions conflict, the server reconciles non-overlapping fields automatically and only prompts the user if mutually exclusive fields were altered. --- ## 3. Key Takeaways Building for offline-first forces you to design higher quality software: - State transitions must be pure and serializable. - Network requests are asynchronous jobs rather than immediate UI blockers. - The resulting application is blisteringly fastβ€”even on full 5G connections, because the UI never waits for the network. ``` --- ## File: articles/guides/best-practices.md - Title: Flutter & TypeScript Best Practices - Section: articles - Language: markdown ```markdown # Engineering Best Practices Key principles for modern mobile and frontend engineering: - Type safety end-to-end with strict TypeScript and Dart sound null safety - Offline-first resilience with transactional local queues - Clear architectural separation between UI, state management, and repository layers ```