GiftCardsToNaira – Gift Card Exchange Dashboard (Next.js)

Role: Lead Frontend Engineer Timeline: 6 Weeks Tech Stack:

Framework: Next.js 14 (App Router)

Language: TypeScript

Styling: Tailwind CSS + Radix UI

State Management: Zustand + TanStack Query

Forms & Validation: React Hook Form + Zod

Notifications: Firebase Cloud Messaging

Hosting/Deployment: Vercel

GiftCardsToNaira is a fintech platform operating in Nigeria and Ghana, allowing users to redeem gift cards for fiat currency (Naira or Cedis), pay utility bills, and manage digital wallets.

I was responsible for building the web application dashboard from the ground up. The goal was to move beyond a simple trading interface to a robust, scalable Single Page Application (SPA) capable of handling complex state, real-time transaction updates, and strict security protocols for financial operations.

Building a fintech dashboard comes with a unique set of constraints:

Trust & Anxiety: Users handling money need immediate feedback. Even a 2-second delay without a visible indicator can reduce trust.

Complex Data Entry: Trading gift cards requires multi-step forms (brand selection, sub-category, image upload, rate calculation), where mistakes can lead to failed trades.

Security: Withdrawal and wallet actions must be protected by Two-Factor Authentication (2FA), with session handling that’s secure but unobtrusive.

I engineered the dashboard using Next.js 14 (App Router) for server-side rendering on public pages and a highly interactive client-side SPA experience for the dashboard.

Global UI State: Managed ephemeral UI elements (2FA drawer visibility, modals, sidebar toggles) via Zustand.

Server State: Used TanStack Query (React Query) for data fetching, caching, and stream hydration, enabling features like live exchange rates to update without manual reloads.

Designed a multi-step wizard pattern guiding users through trade creation:

Validation: Employed Zod schema validation to prevent invalid trades and reduce rejected submissions.

Services Integrated: Airtime, Data, Electricity (prepaid/postpaid), Cable TV, Internet, and Betting platforms (Bet9ja, SportyBet).

Pre-validation Logic: Ensured meter numbers, smartcards, and betting IDs are verified before processing transactions.

2FA Integration: Developed a custom slide-up 2FA Drawer component for sensitive operations like adding bank accounts or making withdrawals.

KYC Compliance: Integrated Dojah widget for seamless user identity verification.

Leaderboards: Live view of top traders, updated in real-time.

Polls: Interactive polling system for platform feature feedback.

Referral Program: Dashboard for users to track referral earnings and copy invite codes.

Integrated Firebase Cloud Messaging (FCM) for real-time push notifications.

Used informational, success, and suspension modals to guide users through transactions.

Next.js App Router with (app) and (public) route groups.

Centralized API client with typed responses, token injection, and toast-based error surfacing.

Zustand feature-level stores for UI state with hydration from queries.

React Query ensures caching (staleTime: 5 min, gcTime: 1 hr) and stream hydration for near-real-time UI updates.

Query keys factory standardizes cache invalidations.

Middleware enforces route protection and token expiry.

Two-factor mutations secure sensitive actions.

Platform gating ensures trade and withdrawal features are only accessible when operational.

Optimized rendering for gift card lists, bill payments, and leaderboard views.

Streamed hydration minimizes perceived load times.

Real-time notifications and modal feedback improve trust and engagement.

Complex forms handled with React Hook Form + Zod for real-time validation without rendering issues.

Dual-currency support (Naira & Cedi) throughout the UI.

Referral Stats: Real-time total referrals and trade-based earnings.

Trade Funnel Tracking: Initiated → Verified → Completed trades.

2FA Success Rate: Monitored verification times and failure rates.

Bill Payment Performance: Success ratios and validation error distribution per provider.

Feature Readiness: Verified across Nigeria & Ghana with typed entities and zod validation.

High-performing, PWA-ready SPA with robust validation and clear UX flows.

Reduced failed trade incidents and support tickets.

Increased user session times via gamification and engagement features.

[Image Placeholder 7] Alt Text: Collage showing "Success" modal state, user profile settings, and dark mode dashboard.

Impact Summary: The Project combines secure financial operations, real-time updates, and community engagement features into a polished SPA. Users benefit from high trust, intuitive interfaces, and gamified experiences, driving adoption, retention, and cross-border transaction reliability.