Bangkok TukTuk Taxi App - React.js / GraphQL
Application, taxi and transit manager
Bangkok TukTuk Taxi App - React.js / GraphQL
Application, taxi and transit manager
Overview
The Bangkok TukTuk Taxi App is a transit management application developed to improve and optimize the functionality of an existing app. The project focused on addressing key issues such as browser freezing, excessive requests, and non-scalable code. Over the course of the 3-month assignment, a variety of improvements were made, including upgrading the code to a newer version of React.js, fixing JavaScript and hoisting issues, and integrating RxJS for better handling of Firebase response events.
The application is built using Vulcan.js (based on Meteor.js), a full-stack JavaScript framework, and integrates with GraphQL and Apollo for querying and managing data. The app uses Firebase as a real-time database and synchronizes with MongoDB for persistent data storage.
Features
- Bug Fixes: Addressed performance issues such as freezing browsers and flooding requests.
- React.js Upgrade: Updated older code to a later version of React.js for improved scalability and maintainability.
- Firebase Integration: Implemented RxJS to manage Firebase response events efficiently.
- Web Worker Optimization: Fixed web worker-related performance issues, improving app responsiveness.
- Version Control: Implemented Semantic Versioning using git tags to ensure better scalability and project management.
- Cross-Platform Compatibility: Ensured the app works seamlessly across different platforms and screen sizes, optimizing it for mobile and desktop users.
Tech Summary
- Frontend (Client): Built using React.js, Apollo, GraphQL, Firebase, Webworkers, and the Vulcan.js framework.
- Backend (Server): Powered by Node.js, MongoDB, Firebase, and GraphQL, utilizing the Vulcan.js framework for full-stack development.
- Performance Improvements: Enhanced browser performance by fixing issues related to ES6/ES5 JavaScript code standards and implementing RxJS for event-driven programming.
- Build Process: Utilized the Vulcan.js build system to bundle the app for deployment.
Outcome
The Bangkok TukTuk Taxi App successfully addressed major bugs and performance issues, resulting in a more stable and scalable application. The use of React.js, Apollo, GraphQL, and Firebase has improved the app’s real-time data handling and user experience. The project also involved upgrading legacy code and ensuring long-term maintainability through code refactoring and improvements. The final release was delivered with semantic versioning to ensure a smooth transition and version control for future updates.
![[1] Bangkok TukTuk Taxi App - React.js / GraphQL, Application, taxi and transit manager](/projects/tuktuk/tuktuk-1.jpg)
![[1] Bangkok TukTuk Taxi App - React.js / GraphQL, Application, taxi and transit manager](/projects/tuktuk/tuktuk-2.jpg)