Overview
Xervices is Nigeria's on-demand service marketplace — connecting customers with verified tradespeople across 10+ categories (plumbing, electrical, cleaning, mechanics, carpentry, and more) in Lagos, Abuja, Port Harcourt, and expanding cities. The platform handles the full service lifecycle: discovery, booking, in-app payments via Paystack, escrow-held funds, dispute resolution, and artisan payout withdrawals. It ships as two consumer mobile apps, a NestJS API, and three web surfaces. I architected and built all three web surfaces as the sole frontend engineer.
The Core Challenge
Building one admin shell that serves radically different operational domains simultaneously — live monitoring, financial oversight, content management, and security controls — without it becoming a bloated, unmaintainable mess. Each module had deep domain logic that had to be surfaced cleanly inside a shared authenticated shell.
The solution: a domain-isolated Zustand store per module (finance, disputes, security, settings) with no cross-module state leakage. Each module is independently lazy-loaded behind the ProtectedRoute shell — the shell owns auth and session lifecycle, each module owns its own data layer. This kept individual modules testable and maintainable as the feature surface grew to 12 settings sub-tabs and 6 major operational domains.
The marketing challenge was equally hard: a 22-section Framer Motion animated funnel that had to feel polished while loading fast on low-bandwidth Nigerian mobile connections. Solved with react-snap pre-rendering — serving static HTML on first load and hydrating after, targeting sub-1s FCP on 3G.
Architecture Pattern
Modular admin shell · Domain-isolated Zustand stores · JWT ProtectedRoute + MFA dialog + session-expiry event listener · Mapbox GL live tracking · TanStack Query v5 · react-snap pre-rendering · JSON-LD structured data (Organization, LocalBusiness, FAQPage)
Marketing Website — xervices.ng
01
22-Section Customer Conversion Funnel
- Hero → Intro Video → 14-category service grid → Before/After reveal → How It Works → App Showcase → Comparison Table → Customer Stories → Features → Differentiators → Testimonials → FAQ → Download CTA.
- Persistent sticky CTA banner throughout scroll — always one tap from conversion.
- BeforeAfterSection with an interactive reveal slider showing real job transformations.
- Framer Motion whileInView animations with staggered delays across every section, wrapped in a PageTransition component.
02
Separate /pros Artisan Acquisition Funnel
- 10-section dedicated funnel targeting artisan sign-up independently from customer acquisition — same domain, different audience routing.
- Sections: ProHero, ProEarnings, ProTools, ProBenefits, ProComparison, ProHowItWorks, ProTestimonials, ProFAQ, ProCTA.
- Handles both sides of the marketplace from one domain — reduces CAC without paid media dependency at launch.
03
SEO Infrastructure & Pre-rendering
- Custom SEO component with full Open Graph and Twitter Card support injected per page via react-helmet-async.
- JSON-LD structured data injected per route: Organization, LocalBusiness, and FAQPage schemas for rich search results.
- react-snap pre-rendering: crawls and serialises every route to static HTML at build time — sub-1s FCP on first load.
- Canonical URLs, sitemap, and robots.txt configured for multi-page SEO coverage.
04
Supporting Pages & Compliance
- About, Contact, Privacy Policy, Terms of Service, Cookie Policy, and Delete Account pages — all with consistent layout and SEO treatment.
- GDPR-style CookieConsentBanner with persistent localStorage preference storage.
Admin Control Panel — xervices-admin
05
Auth Shell — JWT, MFA & Session Management
- Zustand auth store with JWT persistence, ProtectedRoute wrapper, and automatic redirect on auth:session-expired events.
- MFA verification dialog on login — code must be confirmed before the admin shell renders.
- Session management table: view all active admin sessions, revoke individually or bulk.
06
Dashboard Analytics
- Tabbed overview with real-time stat cards: Active Users, Ongoing Jobs, Open Disputes, Escrow Balance.
- App download tracker, daily/monthly registration trend charts (Recharts), and a recent activity feed.
- Cancellation reason breakdown, state-level geographic analytics, best-performing service categories, and top artisan performers.
07
Users & Jobs Modules
- Separate paginated tables for Customers and Artisans with inline CustomerDetailsSheet and ArtisanWalletSheet side panels.
- Suspend, approve, and ban actions with audit trail on each user action.
- JobMapView component powered by Mapbox GL — live job locations plotted across Nigeria with status filtering.
- JobDetailsSheet for reviewing job metadata, status transitions, and payment records.
08
Disputes & Finance Modules
- Dispute queue with DisputeDetailsSheet for reviewing evidence submitted by both parties.
- PaystackChargebackSheet — initiates Paystack chargeback flows directly from the admin without external tooling.
- Artisan wallet management: payout/withdrawal stats, RevenueGrowthCharts, and TransactionInsights breakdown.
09
Settings CMS — 12 Sub-tabs
- Promotion slides CMS, Featured profiles picker, Artisan level tier management.
- Escrow fee configuration, Referral bonus settings, First-time discount rules, Discount codes.
- OTP bypass controls for support workflows, User of the Week selector.
- TipTap rich text editors for live Legal and Privacy Policy updates — changes publish instantly to the consumer apps.
10
Security Dashboard & Role Management
- Audit log viewer — full history of admin actions with actor, timestamp, and payload.
- MFA enforcement settings, IP allowlist management, and rate limiting controls.
- User impersonation tool: support agents can view the platform as a specific user for debugging without sharing credentials.
- Admin team CRUD with granular role and permission assignment per operator.
11
Broadcast Center & Referrals
- Push notification composer for targeted broadcasts to customers, artisans, or both.
- Referral program stats and promo code creation/management via PromoCodeFormSheet.