xPage — Affiliate Frontend Dashboard
Description
The xPage Affiliate frontend was built with Next.js and TypeScript to give affiliates a comprehensive view of their performance data. It includes a profile page and a multi‑tab settings area, both supporting light and dark themes. Data tables feature colored status badges, column sorting, and multi‑criteria filtering, while bank details can be added and payout requests are submitted via Axios API calls.
Features
- •Referral table with searchable rows and column sorting
- •Commission table with sortable columns and filters
- •Payout history with status badges and sorting
- •Profile page displaying personal info and stats
- •Settings area with tabs for account, password, payments
- •Light/dark mode toggle persisting user preference
- •Bank details form for adding or editing payment info
- •Payout request workflow with Axios API validation
Tech Stack
- •Next.js for server‑rendered React frontend
- •React for component‑based UI building
- •TypeScript for static typing and IDE assistance
- •Zod for client‑side schema validation
- •Axios for HTTP requests to backend APIs
- •TanStack Query for data fetching, caching, syncing
- •Zustand for global state management
- •CSS for responsive layout and dark‑mode styling
Key Learnings
- •Gained deep understanding of TanStack Query caching
- •Learned client‑side schema validation using Zod
- •Improved state management skills with Zustand
- •Enhanced ability to build accessible dark‑mode UI
- •Refined API integration techniques using Axios
Future Improvements
- •Add pagination or infinite scroll for large data tables
- •Implement real‑time updates via WebSocket for commissions
- •Provide CSV export for referrals, commissions, payouts
- •Write unit and integration tests with Jest and RTL
- •Add multi‑currency support for payout amounts