From Clunky Code to Killer Features: A Flutter App Developer's Refactoring Journey

Ever wrestled with spaghetti code in a live app? Discover how one Flutter developer tackled a challenging project head-on, transforming a marketplace platform with improved architecture and UX enhancements, and the lessons learned along the way.

Taking on the Findit Challenge: A Marketplace App Ripe for Refactoring

On November 11, 2024, I joined Vivasoft Limited as a Software Engineer (Flutter Developer) working on "Findit," an active marketplace app. The goal: Refactor and enhance the existing codebase to improve its performance and user experience. The initial codebase showed the need for serious change, so this was going to be a challenge.

Teamwork Makes the Dream Work: The Refactoring Crew

I wasn’t alone. With the help of App Lead Omar Faruk and senior developers Fahim Islam, Arafat Rohan, and Shadman Sakib, we began the journey towards a cleaner, more maintainable app. Their guidance was essential in navigating the complexities of refactoring a live application.

Untangling the Architecture: A Clean Start with Modular Design

The initial architecture lacked separation of concerns, leading to tightly coupled code and performance issues. A significant change involved moving towards clean architecture, separating the business logic, UI, and data layers.

Benefit: Enhanced modularity, scalability, and maintainability.
How: Senior developers Arafat Rohan and Shadman Sakib guided the refactoring efforts, implementing modern design patterns and cleaning up legacy code.

Supercharge Search: Debouncing with BLoC for Lightning-Fast Results

One of the earliest improvements involved optimizing the search functionality. Previously, each keystroke triggered an API call, overloading the server and creating a laggy experience. By integrating debouncing with BLoC state management, we dramatically reduced the number of API calls.

Impact: Significantly faster search response times and a smoother user experience.
The Tech: Implemented debouncing to delay API calls until the user pauses typing, combined with BLoC for efficient state management.

The One-Time Password (OTP) input screen was functional but clunky. I implemented automatic cursor transitions between fields and improved the overall layout. This made the sign-in process smoother and more intuitive. This little change dramatically cut-down on user frustration and abandonment during sign-up.

Shimmer Loading Magic: Keeping Users Engaged While Data Loads

Blank loading screens can be frustrating. To improve the user experience, I added shimmer loading effects to the UI. Instead of staring at empty screens, users now see a subtle shimmer effect while data is being loaded. Users get a sense that the app is loading the data, even if it takes a little longer.

Star Seller System: Recognizing Top Performers and Building Trust

To highlight top-performing sellers and build trust, a Star Seller system was introduced. Sellers earned badges based on sales performance and customer feedback. This gave sellers a way to show off the quality of their services and improve trustworthiness in the marketplace.

Bug Fixes and Filter Finesse: Ensuring Accurate Results

Alongside new features, I dedicated time to fixing bugs and refining existing functionality. A key area was the filtering system. Previously, the product filtering was not properly refined.

The Fix: After refining the filter logic, users received more accurate results, making it easier to find the products they needed.
The Result: A more stable app, and more efficient product browsing.

The Future of Findit: An Ongoing Evolution

This journey of building the Findit app is a continuous one. The team are committed to ongoing refinement, architectural improvements, and user experience enhancements. With the support of the team, the Findit marketplace app is set to deliver a fast, reliable, and enjoyable experience. This also includes improving state management and architecture of the Flutter side of the app.