A dynamic Next.js PWA consumer wallet, event booking, and geolocation-based local offers platform.
RoleLead Frontend Developer
DurationMay 2023 - May 2024
Client / PartnerPIPLI TECHNOLOGIES PRIVATE LIMITED
IndustryRetail / Consumer Tech / E-commerce
Retail consumers lacked a unified, digital-first touchpoint to discover personalized local offers, manage transactions digitally, book store-specific events, and review e-bills. Malls and multi-store retailers needed a way to consolidate loyalty cards, paper receipts, and fragmented promotional efforts into a single branded portal.
Develop a highly responsive Consumer Application (PWA) using Next.js to provide a robust digital wallet, geolocation-based live deals, interactive event booking mechanics, multi-tenant branding support, and offline capabilities. The platform must feel like a native mobile app strictly from the web browser.
Built a comprehensive Next.js web application functioning as a native-like PWA. It handles complex state architecture using a combination of Redux (with persistence) and Zustand, while utilizing TanStack React Query for efficient server-state caching. The platform bridges full-stack boundaries natively inside Next.js. It successfully aggregates geolocation integration, secure wallet padding via the BillDesk SDK, and dynamically styled UI environments spanning multiple tenants.
- Multi-tenant dynamic theming mapping color variables across CSS and component states.
- Secure OTP-based authentication fallback and session tracking.
- Real-time geolocation algorithms serving proximity-based retail campaigns.
- Comprehensive digital wallet handling (UPI/Credit/Debit) top-ups and ledger tracking.
- Interactive Event Booking engine bundled with real-time Coupon redemption validation.
- E-bill review system with PDF downloading and file generation.
- PWA manifests yielding native iOS/Android installation behaviors.
- Engineered the core visual foundations utilizing Tailwind CSS paired with StyledComponents and component-level SCSS modules.
- Formulated the entire architectural state mapping; segregating ephemeral thematic data to Zustand, durable transactional states to Redux Persist, and background-synchronization to React Query.
- Built the complex digital checkout pipelines interacting with external SDKs like BillDesk for wallet top-ups.
- Successfully implemented PWA caching strategies allowing offline resilience in spotty retail network connections.
- Migrated legacy implementations directly to Next.js API Routes.
- Architecting a single-source codebase that dynamically reshapes its entire frontend aesthetics (CSS properties, manifest details, logos) based upon real-time tenant detection.
- Optimizing hydration crashes when combining Next.js Server-Side Rendering arrays against durably synced local persistent keys under Redux Persist.
- Validating external payment workflows efficiently through custom SDK interactions wrapped within React hooks without blocking thread concurrency.
- Orchestrated a powerful unified Zustand
useThemeCart hook directly at the app entry root. On startup, the service fetches domain/tenant specifics, injects the parameters into the global application, and immediately recalculates the active CSS tokens.
- Deployed specialized
PersistGate boundaries specifically tailored around hydration blocks, gracefully presenting loaders before painting complex client metrics.
- Utilized robust caching systems inside TanStack React Query, decoupling standard RESTful HTTP fetch calls from the UI components directly, maintaining smooth 60fps renders.
- Massively decreased UI "jank" and component pop-in artifacts by standardizing hydration chains correctly using Server-Side Rendering optimizations.
- Facilitated paperless receipts effectively, replacing hard-copy invoices with digitally cached PDFs integrated through the
/bill-invoice subsystems.
- Accelerated active marketing traction because location-specific push notifications drove foot traffic directly to proximity retailers.
- Cut internal infrastructure friction; rather than spinning up distinct applications per tenant, the singular application successfully acts as a white-labeled powerhouse for varied enterprise customers.
- Achieved a sticky user journey merging loyalty privileges, event discovery, and transaction ledgers together, yielding massive brand retention in participating retail locations.
A Hybrid SSR/CSR Next.js Web App configured to emit service-workers behaving as a PWA. State lives across a triad: Redux handling durable application data, Zustand tackling high-frequency/ephemeral layout toggles, and React Query handling asynchronous cache validity. The frontend interacts directly with Next.js specific Serverless API routes.
- Segmenting fetching constraints directly into React Query automatically solves standard data deduping and invalidation complexities without requiring manual React lifecycle refactors.
- Built heavily atomized components (BannerCards, Modals, Accordions) that receive styles strictly via theme-store properties, allowing infinite new tenants without rewriting JSX structures.
- Migrating API dependencies directly into Next.js routes effectively scales endpoints dynamically alongside page generation logic without requiring standalone API web-servers.