Koyn Web App Dashboard

Duration: 6 weeks Role: Frontend Engineer (Contract) Technologies:

TanStack Query (Next-experimental) for data fetching

Next.js 14 App Router with streaming hydration

Zustand stores for domain-scoped UI state

Zod validation across all API schemas

Tailwind CSS + shadcn-styled primitives

I developed Koyn dashboard application with Next.js 14 application which is built for crypto off-ramping and digital utility payments in Nigeria. It powers end-to-end flows for selling crypto, NGN withdrawals, bill payments (airtime, data, Wi-Fi, cable, electricity, betting), user onboarding, KYC, profile management, notifications, and full transaction history.

The system is developed around separation of concerns: presentation components, Zod-driven schemas, Zustand state modules, and TanStack Query for fetching/caching. Authentication is session-based using secure cookies, validated at the middleware level, and hydrated into a persisted client store.

Cookie-backed authentication with explicit expiry, middleware-protected routes, and a persisted Zustand store that hydrates the user/session on load.

The "Sell Crypto" pipeline covers asset selection, wallet generation, QR sharing, clipboard utilities, and NGN crediting after confirmed blockchain settlements. UI is entirely state-driven with domain stores.

A staged flow enforcing min/max limits, UX-guided input steps, validation, and final confirmation. The experience is modular and driven by a dedicated withdrawal store.

Supports multiple categories with provider selection, plan lookup, PIN confirmation, and receipt screens. Providers are dynamically loaded and normalized through the dashboard store.

Infinite scrolling history with filters, interactive receipts, and print/share capabilities. Initialized through TanStack Query infinite lists with intersection observer bindings.

Dojah integration with controlled user metadata, safe lifecycle cleanup, and route-level orchestration from the user verification dashboard.

Firebase Cloud Messaging integration for push notifications, token registration, and delivery lifecycle handling.

Auth store persisted via cookie-backed storage abstraction

Crypto, dashboard, provider, and withdrawal stores encapsulating domain logic

Hydration and expiry-aware token initialization

Middleware enforcing authentication, token validity, and route rules

Environment-driven config for all partner keys

Consistent loading states, button behaviors, and disabled patterns

Error normalization + toast reporting across the entire app

Mobile-aware adaptive dashboards and progressive disclosure patterns

QR utilities, printable receipts, and contextual dashboard banners

Query stale times tuned to reduce overfetching while keeping UI fresh

Infinite scrolling with viewport-based triggers for lightweight history loading

Centralized error handling for transparency and debugging

Streaming hydration to reduce TTFB

On-time delivery within 6-week deadline despite complex requirements

95+ Lighthouse Performance Score across all device types

Mobile-optimized experience all end users device type