Shipped

Mitratrip

React super-app frontend for payments, PPOB, and travel with protected routes and PWA installability.

Full Stack Developer
2 Months
Mitratrip login screen on mobile
Mitratrip home dashboard with service grid
Mitratrip flight booking form

Project Overview

Mitratrip is a consumer-facing super-app for digital payments and PPOB services. The frontend is a React SPA with a mobile-first UX, protected member routes, and a broad catalog of transactions (top up, bills, pulsa, vouchers, travel). The architecture prioritizes seamless in-app navigation, resilient session handling, and consistent UI patterns across high-frequency purchase flows. Core frontend focus areas include modular routing for many transactional surfaces, a robust API client for authenticated requests with CSRF support, PWA readiness for app-like behavior, and repeatable UI patterns for checkout, confirmations, and history.

Impact

99.9%

Transaction Success Rate

Scale

10k+

Monthly Transactions

Key Features

Abstract glowing nodes on a dark background representing offline workflows

Protected Member Experiences

Route guards ensure only authenticated users reach app surfaces, with a clear public login entry point.

Payment & PPOB Catalog

Dedicated flows for bills, pulsa, e-wallet top-ups, voucher games, and balance top-ups.

Dark analytics dashboard showcasing key transaction metrics

Travel Transactions

Flight and hotel search experiences integrated into the same app shell for cross-category journeys.

PWA Ready

Vite PWA plugin with manifest, icons, and auto-update behavior for installable UX.

Technical Stack

  • Framework: React 19

    Mobile-first SPA with modular transaction flows and shared UI patterns.

  • Routing: React Router 7

    Protected member routes with a clear public login boundary.

  • Build Tooling: Vite 7 + PWA

    Installable manifest with auto-update behavior for app-like UX.

  • Styling: Tailwind CSS v4

    Consistent UI patterns for checkout, confirmations, and history flows.

  • Networking: Axios + CSRF

    Authenticated requests with CSRF handling, bearer tokens, and retry logic.

  • UI Assets & Fonts: Lucide React + Manrope

    Unified iconography and typography across high-frequency purchase flows.