GiftCardsToNaira - Web App Dashboard Development

Role: 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

Identity Verification: Dojah KYC

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 the development of the application’s frontend that is capable of handling complex state, real time transaction updates, and ensuring that every user interaction is responsive, secure, and frictionless.

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

Complex Multi-Step Trading: I needed to manage a smart form that guides users through their trade. It automatically updates rates and options based on their choices in real-time, while saving their progress securely so they don't have to start over if they get interrupted.

Scalable Record Management: Users need to find specific trade history information quickly. My challenge was to build a high-performance Transaction History system that remains quick even when filtering through thousands of records across different parameters.

Secure API Integration: Connecting the dashboard to various banking and utility providers required a solid bridge to verify account numbers and meter IDs instantly, preventing money from being sent to the wrong place.

Global UI State: I implemented Zustand stores to manage complex authentication flows, including token expiration detection and async hydration with secure storage.

Server State: I engineered a hierarchical Query Key factory using TanStack Query to manage caching patterns. This allowed for intelligent cache invalidation and reduced redundant API calls.

I designed a sophisticated multi-step wizard pattern for trade creation:

Dynamic Validation: Integrated React Hook Form with Zod, implementing real-time validation logic and reactive rate calculations using useMemo.

Robust Uploads: Built a custom dropzone integration with attachment schema validation (UUID and extension tracking) to ensure only valid assets are processed.

State Persistence: Form data persists across steps using Zustand, allowing users to navigate the multi-step form without losing progress.

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.

Next.js Route Groups: Organized the app into route groups to separate protected routes from public ones.

Typed API Client: Built a centralized API client with generic response typing, automatic token injection, and toast-based error surfacing.

Performance Optimization: Used selective Zustand subscriptions and Streamed Hydration to minimize re-renders and perceived load times.

Zero-Error Submissions: Pre-validation APIs for bill payments and Zod runtime schemas caught user errors before they reached the backend.

High Performance: Intelligent caching via TanStack Query and optimized image handling resulted in a fast, PWA-ready experience.

Enhanced Security: The 2FA and token management system effectively neutralized unauthorized access attempts and session hijacking risks.

Impact Summary: I delivered a polished, high-trust SPA that successfully handles multi-currency transactions perfomantly. By prioritizing structural integrity and real-time feedback, I created a platform that drives user retention and minimizes operational support tickets.