bookingtogo
A comprehensive React Native mobile application in the online travel industry, designed for booking flights, hotels, trains, tours, and even private jets.
Primarily built for B2B operations, it includes exclusive features such as balance management, travel documents, sub-company accounts, and more.
bookingtogo empowers businesses to streamline their corporate travel needs through a single, efficient platform.
Tech Stack & Tools
Android
iOS
React Native
Typescript
Redux
Axios
Key Features
Flight Booking
Book domestic and international flight tickets seamlessly from multiple airlines.
The system supports real-time seat availability, dynamic pricing, and instant e-ticket generation for a smooth and reliable booking experience.
Hotel Booking
Search and book hotel rooms across various destinations with detailed hotel information, including photos, address, available facilities, and room listings.
Designed to make accommodation booking quick, transparent, and convenient for travelers.
Train Booking
Integrated with Kereta Api Indonesia (KAI), this feature allows users to book Indonesian train tickets easily, check train schedules, and receive digital tickets instantly within the app.
Tour Packages
Discover a variety of tour packages that cover both local and international destinations.
Users can view package details, itineraries, and pricing, making it easy to plan group or family vacations with confidence.
Private Jet Booking
This feature allows users to book private jet flights for both personal and corporate travel needs.
It offers fixed routes, flexible scheduling, and direct coordination to ensure a seamless and premium travel experience.
Corporate Features
Built for B2B clients, this module helps companies manage their travel operations efficiently. It includes balance management, travel document uploads, and multi-role access control for departments like Master, Booking, and Finance. A PIN verification system ensures secure balance-based payments, making corporate travel management simple, organized, and secure.
Development Journey
Project Vision & Motivation
bookingtogo began as a platform primarily tailored for B2B clients—companies that needed a reliable system to manage their corporate travel needs. Over time, however, the company’s vision grew. Management wanted the product to evolve, not only to serve business partners but also to reach a broader audience with a fresher, more modern, and more user-friendly experience.
This shift in direction sparked the decision to revamp the entire application. Rather than simply refining the old structure, we chose to rebuild it from the ground up. The previous version relied on React Native with JavaScript and class components, which had served its purpose for years. But to support future scalability, better performance, and cleaner architecture, the new version embraced React Native with TypeScript and functional components—bringing the project in line with modern development standards.
From planning and UI restructuring to implementing new business logic and integrating all travel services, the revamp became a full end-to-end journey. I developed the project starting from a blank codebase all the way through release and continuous maintenance. Throughout the process, the goal remained clear: create a more intuitive, efficient, and forward-thinking application that supports the company’s growth and delivers a better experience for every user.
Challenges Faced
Unstructured Codebase & No Strict Typing
The previous version of the app was built using plain JavaScript, which lacked strict typing and made the overall codebase less predictable. Without enforced type definitions, data handling became error-prone, debugging took longer, and maintaining consistency across features was increasingly difficult as the project grew.
Large, Monolithic Files with Mixed Logic, UI, and Styles
Before the revamp, many screens were structured as giant monolithic files that combined business logic, UI components, and styles in one place—often resulting in thousands of lines of code. This made the code difficult to read, hard to maintain, and slow to expand with new features.
Inconsistent UI/UX Across Screens
The old version of the application lacked a unified design system, resulting in inconsistent spacing, styling, and component behavior across different pages. This inconsistency affected visual quality and slowed down development because components couldn’t be reused effectively.
Performance Issues on Complex Screens
Pages with large datasets—such as flight results or hotel listings—suffered from sluggish rendering and unnecessary re-renders due to inefficient component structures. On lower-end devices, these issues became even more noticeable and significantly impacted user experience.
Solutions Implemented
Implementing TypeScript for Strong Typing
In the revamp, I migrated the entire project to TypeScript to enforce strong and consistent type definitions across the codebase. This ensured safer data handling, reduced runtime errors, improved developer productivity, and made the code far more maintainable in the long term.
Clear Separation of Concerns with a Modular Architecture
During the revamp, I introduced a cleaner architectural structure by separating logic, presentation, and styling. For example, logic was moved into dedicated hooks like useHomeScreen.ts, UI components remained in HomeScreen.tsx, and styles were isolated in styles.ts. This resulted in cleaner, more readable code that is significantly easier to manage and scale.
Establishing a Unified Design System & Reusable Components
I introduced reusable UI components and consistent styling patterns built on top of a shared design system. This improved visual consistency, reduced duplicated code, and accelerated development since the same components could be used across multiple features.
Performance Optimization and Efficient Rendering
To improve performance, I optimized component rendering, implemented memoization where needed, and refined list virtualization for heavy data-driven screens. These enhancements resulted in smoother scrolling, faster loading, and a more responsive experience across a wide range of devices.
Projects Showcase
Key Learnings & Takeaways
The Value of Strong Typing & Code Predictability
Migrating from JavaScript to TypeScript significantly improved code reliability.
Strong typing helped prevent unexpected data issues that previously caused hidden runtime bugs.
With clearer type definitions, development became faster and debugging became easier.
I learned that investing early in type safety creates long-term stability for large-scale apps.
The Importance of a Well-Structured Architecture
Revamping the project from scratch highlighted how crucial a clean and modular architecture is.
By restructuring screens, components, and hooks, the app became far easier to maintain and scale.
Clear separation of concerns reduced code duplication and simplified onboarding for future developers.
Building a Smooth and Consistent User Experience
I learned how UI/UX consistency significantly impacts user satisfaction in a consumer-focused app.
Implementing reusable components and standardized design tokens ensured visual consistency across screens.
The revamp process helped me understand how small UI details contribute to overall user trust and comfort.
Managing Complex State Effectively
Handling features like flight search, hotel booking, and multi-step forms taught me the value of robust state management.
I learned how Redux patterns, middleware, and proper slicing help maintain predictable data flow.
This experience reinforced the importance of scalable state handling in applications with evolving business logic.
Future Improvements
Over-the-Air Updates with CodePush
Implementing CodePush allows shipping UI updates, hotfixes, and small improvements instantly—without requiring users to download a full app update. This will speed up release cycles and make iteration significantly faster.
Performance Optimization & Bundle Size Reduction
Optimizing the JavaScript bundle, cleaning unused dependencies, and enabling Hermes can improve startup speed and runtime performance, especially on low-end devices frequently used in the target market.
Advanced Error Monitoring & Crash Analytics
Integrating deeper monitoring tools such as Sentry or Crashlytics will provide better visibility into crashes and unexpected behaviors, enabling faster debugging and more stable production releases.
Automated Testing & CI/CD Pipeline Enhancement
Expanding the CI/CD pipeline with automated testing, lint checks, and build verification ensures safer deployments. Implementing tools like Detox or Jest helps maintain code quality and prevents regressions as the app scales.
Let’s Build Something Amazing Together
Ready to take your ideas to reality? I’m always excited to work on new challenges and create innovative solutions.