IQ-POS Development Journey — Implementation, Challenges & Learning

Introduction

During the development of IQ-POS, I worked on multiple areas of the application across the Customer, Retailer, and Admin panels. The work included frontend development, backend integration, database changes, third-party APIs, notifications, localization, and debugging existing functionality.

The main focus was not only to add new features, but also to understand existing systems, identify the actual causes of problems, and implement changes without breaking existing business logic.

What I Implemented and Learned

1. Global Paid Resource Control
   1. Added an Admin panel section to control paid third-party services.
   1. Added a master switch and individual service controls.
   1. Learned how feature flags can control platform-level functionality.
2. Backend Enforcement
   1. Added backend checks for paid-resource availability.
   1. Ensured that disabling a service affects actual API usage, not only the UI.
   1. Learned that frontend restrictions are not sufficient for security.
3. Google Maps Integration
   1. Implemented Google Maps, Places, markers, location selection, and Directions.
   1. Integrated map functionality into both Customer and Retailer workflows.
   1. Learned how frontend applications communicate with external APIs.
4. Google Maps Billing and API Configuration
   1. Investigated limitations caused by the development/demo API key.
   1. Learned about API keys, billing, enabled APIs, restrictions, and quotas.
   1. Understood that an API problem can come from provider configuration rather than application code.
5. Retailer Location Search
   1. Implemented Google location search for retailer shop registration/editing.
   1. Fixed Enter-key behavior so location search does not accidentally submit the shop form.
   1. Learned how browser events interact with forms and third-party components.
6. Customer Search Reset
   1. Fixed the product search reset behavior.
   1. Clearing the search field and clicking outside now restores the complete product catalog.
   1. Learned the importance of maintaining a single, predictable state-reset flow.
7. Map Jumping and Zoom Issue
   1. Investigated a problem where the map moved or zoomed unexpectedly after search.
   1. Found a feedback loop involving fitBounds() and map bounds events.
   1. Learned how event callbacks can unintentionally trigger repeated state updates and API requests.
8. Asynchronous Search and Race Conditions
   1. Prevented older search responses from overwriting newer results.
   1. Added request/state tracking for search operations.
   1. Learned why asynchronous requests must be handled carefully in interactive applications.
9. Customer Notifications
   1. Developed notification infrastructure with an in-app notification drawer, unread count, read actions, and live updates.
   1. Integrated email notification support.
   1. Learned how a notification system can be separated from the main business logic.
10. Business Event Notifications
    1. Extended notification requirements to events such as order placement, order receipt, payment, and DTO-related updates.
    1. Focused on triggering notifications after confirmed backend operations.
    1. Learned the difference between a user action and a successfully completed business event.
11. Email Reliability
    1. Designed email delivery so an SMTP failure does not unnecessarily break the main business transaction.
    1. Added retry and duplicate-protection considerations.
    1. Learned how external services should be isolated from critical application operations.
12. DTO Product Experience
    1. Worked on providing customers with a dedicated area for DTO products.
    1. Reused existing product-card functionality instead of creating an unrelated product experience.
    1. Learned how existing components can be extended while maintaining consistency.
13. Application Localization
    1. Added localization across major Customer, Retailer, Supplier, POS, Notification, and other interfaces.
    1. Supported English, Spanish, Urdu, Arabic, and Chinese.
    1. Learned how internationalization affects the complete application rather than only individual pages.
14. Mojibake and Character Encoding
    1. Identified corrupted translation text in some locale files.
    1. Corrected translation resources and maintained consistent UTF-8 encoding.
    1. Learned why character encoding is especially important for multilingual applications.
15. Admin Panel Improvements
    1. Added dedicated administrative controls for platform-level resources.
    1. Separated platform settings from normal user permissions.
    1. Learned how good admin architecture makes large applications easier to operate and maintain.
16. State Management
    1. Worked with search state, map state, selected shops, loading states, notifications, and filters.
    1. Learned that many visible UI problems originate from incorrect or conflicting state transitions.
17. API and System Debugging
    1. Traced problems across the frontend, backend, database, and external services.
    1. Instead of immediately changing code, identified which layer was responsible for the issue.
    1. Learned a systematic debugging approach for full-stack applications.
18. Testing and Validation
    1. Used frontend/backend tests, ESLint, production builds, API/route tests, and git diff –check.
    1. Tested changes incrementally to reduce regressions.
    1. Learned that testing should be part of implementation rather than something performed only at the end.
19. Protecting Existing Functionality
    1. Implemented new features while preserving existing business logic.
    1. Carefully handled maps, search, directions, markers, orders, products, permissions, notifications, and localization.
    1. Learned that a successful feature is not only one that works—it must also avoid breaking functionality that already works.

Key Learning

The development of IQ-POS helped me move from thinking primarily in terms of pages and components toward thinking in terms of systems and data flow.

I learned to investigate a feature through the complete stack:

User action → Frontend → API → Backend → Database/External Service → Response → State → UI

This approach helped me understand problems such as API authorization failures, map feedback loops, stale search responses, incorrect state resets, notification reliability, and localization issues.

Special Learning: Google Maps Integration

Google Maps was one of the most valuable integrations because it combined several areas of software engineering:

• External API integration
• API authentication
• Billing and usage limits
• API restrictions
• Geographical coordinates
• React state management
• Asynchronous requests
• Event handling
• Performance optimization
• User experience
• Cost control

The biggest lesson was that integrating an external service is not simply about making an API request. A production integration must consider configuration, security, cost, reliability, state management, and user experience together.

Conclusion

Working on IQ-POS gave me practical experience in developing and maintaining a full-stack application rather than only implementing isolated features.

The most important lesson was:

Understand the existing system first, identify the actual cause of a problem, make the smallest safe change, and verify that existing functionality still works.

This development process improved my understanding of full-stack engineering, third-party API integration, debugging, state management, system reliability, and scalable application design.