Project Surplus Customer App
- Published on
- Written on by Yayat Hidayat.
Brief Overview
The Surplus Customer App is my primary project at PT Ekonomi Sirkular Indonesia. My focus is on enhancing the app's performance and stability by resolving existing bugs, while continuously developing and integrating new features to improve user experience.
Project Goals
The goals is to save overstock food from our merchants (hotels, bakeries, restaurants) by offering it at a discounted price to the customers. Users can easily find nearby food options and filter them by categories. They can also view these options on a map. Additionally, users can purchase dine-in vouchers, add products to their shopping cart, top up their accounts, and make payments seamlessly.
Tech Stack
In this project, we utilized React Native to build both Android and iOS apps from a single codebase, significantly reducing development time. For local state management, we implemented Redux, and to efficiently handle data fetching, we employed Tanstack Query.
Spotlight
Developing "Nearby Merchant on Map"
To help users find nearby open and closed merchants and discover the best food options, we developed the "Nearby Merchant on Maps" feature. This allows users to view merchant locations and their open/close status on an interactive map. We utilized the react-native-maps library to display maps seamlessly on both Android and iOS platforms.
Implement Tanstack Query
Before I joined, the project used Redux Saga to manually handle server data with statuses like isLoading and isError. To optimize this process, we implemented Tanstack Query, which provides built-in fetching status management. Additionally, we enhanced performance by implementing pagination using Tanstack Query's useInfiniteQuery.
Implement Tailwind
We migrated from StyleSheet to Tailwind CSS to enhance productivity and improve code readability. This transition streamlined our styling process, making our codebase more maintainable and efficient.
Challenges and How I Conquer Them
In this project, I faced several major challenges. Here are three of the most significant ones
Performance and Loading Time Optimizations
When I joined, the app faced a significant challenge: slow performance and loading speeds. This issue stemmed from loading data for the main Discover Page from a single API with a massive dataset. The situation was exacerbated by rendering data that wasn't even visible on the screen.
To improve loading speed, we split the large API into separate APIs for each section, ensuring only the necessary data is provided. To further optimize rendering, I implemented removeClippedSubviews with overflow: hidden in the ScrollView to limit component rendering.
Google Maps Platform Billing
Before I joined, we faced substantial monthly bills from the Google Maps Platform due to inefficient API usage. By refactoring the code to ensure the API is only called when necessary, we successfully reduced our Google Maps Platform expenses by 75%.
App Crash when Load Large Image on iOS
I received reports of the app crashing on specific devices and in particular areas of the app. The crashes were due to devices running out of RAM. Identifying the root cause was challenging, but eventually, we discovered that iOS struggles to handle rendering large images as efficiently as Android. We resolved the issue by compressing the images, which eliminated the crashes and improved overall app performance.
I plan to write a detailed blog post about this issue soon.
Lessons Learned
In this project, I honed my skills in optimizing component rendering for a complex app with a large user base.
Through this experience, I learned that even a small piece of code can have a significant impact on performance and costs.
Additionally, I realized the importance of always validating input, even when it comes from team members.