Since the pandemic began, almost everything has gone digital, and most businesses have embraced this shift to gain more income. Consumers prefer ordering online since it is more convenient. They can order items at home and track their orders to ensure they’re receiving the right item.

But has everything really been digitalized? Not exactly. One thing that hasn’t been digitalized is the water station. Our research and surveys shows that many still rely on outdated systems. They record transactions on paper, manually calculate daily earnings, and store customer information the same way. Some have POS (point of sale) systems, but they’re not user-friendly and are only accessible on desktop computers.

Is the old system the only problem? Unfortunately, no. Another issue is communication. Some water providers receive fake orders from unknown users, while others aren’t responsive to their customers. There’s also the problem of not being able to track riders. Without any gps, there’s no way to locate them, and no automatic alerts to update customers.

So, how can we fix these problems? That's where GoDroplet comes in. The goal is to revolutionize water delivery by creating a more efficient and transparent system for both customers and providers. We want to bring water stations into the digital age, making transactions easier, faster, and more reliable.

The project aims to create a platform that enables water providers to manage transactions, track deliveries, and communicate effectively with customer, all in real time. It also seeks to create a more efficient, transparent, and reliable water delivery system that benefits both providers and consumers.

These are the primary objectives:

• Digitalize water delivery operations

  Develop a mobile and web application to streamline order management and delivery processes. The platform will enable water stations to efficiently handle transactions, track customer orders, and manage deliveries in a digital and automated environment.

• Enhance Customer Experience

  Create a well-designed UI focused on user experience, while also implementing a system that improves communication between water providers and customers. The platform will provide real-time updates, notifications, and customer support features to ensure smooth interactions.

• Track Deliveries

  Customers should be able to track deliveries in real time and stay informed about the status of their orders.

• Increase Provider Visibility

  Most water providers are not visible to their customers especially those small ones. They can’t showcase their water products due to lack of man power or popularity. So this project also aims to enhance water provider’s visibility to allow customers to easily discover, compare and select providers based on location, and water products.

The development of this project began in the last quarter of 2023 and was paused in the second quarter of 2024. This is a particularly challenging project for a team of three members, as we aim to create a large system that will revolutionize water delivery. We started by designing the architecture, focusing on how the system will connect and communicate. Next, we conceptualized which features to implement first, how the data would be structured, and how the UI would be designed.

We divided our roles: one team member focused on frontend development, another on full-stack (both frontend and backend) development, and the third on UI/UX design. Since we are developing three mobile applications (customer, provider, and rider apps), the full-stack developer takes the lead in ensuring both the frontend and backend are implemented correctly and that progress continues smoothly.

I was mainly focused on mobile app development. I started by setting up the repositories for the three mobile applications using the Expo framework in an npm workspace. I created the base components, contexts, and theme, ensuring consistency in file structure, components, and styling across all app repositories. I also set up the GitHub workflow pipelines to automate builds, tests, and previews, making it easier to test the app on different devices and environments.

I wasn’t involved that much in backend development but we used Supabase and created our own custom endpoints using Edge Functions, written in the Deno runtime. We applied the MVC pattern, specifically using Hono framework to easily handle controllers or endpoints. We also applied the service layer pattern by utilizing classes to create services, and used the decorator pattern with decorators and metadata to define the endpoint and request method.

For API integrations, we used the proxy design pattern to call our API, ensuring methods are aligned with the backend controllers or third party apis. For example, we created a Product class to represent the product-related endpoints or methods. This class is wrapped in a BaseApi class, which handles authentication, request methods, and refresh tokens. We also applied the adapter design pattern, with an adapter class that structures data in a way that’s immediately usable by different components. This approach allows us to reuse more components and reduces the need for additional mapping or transformation within the components since the data is already structured appropriately.

For maps, we used Mapbox so that we could design our own map view and determine which map indicators to display. This is specifically used for selecting the user’s address by dragging the pin to their location and retrieving the coordinates, and also to display the water provider’s exact location. One of the challenges with using this service is that some places are not detectable when creating search queries, likely due to outdated map data. We also use google maps to create routes for riders.

Since we’re using some third-party services to align with our goals, there were instances where code and design revisions were required, as decided by the whole team. Despite these challenges, we have successfully made it to the beta release.