Dalilk
Case Study
Hyperlocal discovery and a two-sided service directory across all 69 wilayas of Algeria. Connecting communities with verified local stores and freelance drivers through Mapbox geospatial exploration, threaded community discussions, and an isolated administrative command center.
The Algerian Context & Constraints
69 Wilayas & Mapbox in Algeria
Strict Algeria geo-framing, wilaya polygon overlays, client-side Arabic RTL text injection, and an automatic circuit breaker fallback so visitors never see a blank canvas error.
Manual Local Payment Rails
No automated Stripe luxury: business subscriptions and boosts run on CCP, BaridiMob, and bank transfers, backed by an uploaded receipt verification pipeline and promo boost codes.
Dynamic Storefront Theming
Merchants customize their shop pages using four adaptive layout styles, perceptual OKLab brand color mixing, and generative SVG backdrops.
Hyperlocal Trust & Verification
Unverified claims destroy directory credibility. Store owners verify trade registries, while driver reviews require 7-day confirmed job claims before review text becomes public.
Geospatial Discovery Across 69 Wilayas
Local directories in Algeria usually break at the Sahara: wilaya borders are outdated, Arabic place names render as unreadable reversed glyphs, and mobile users on slower 3G connections get punished by heavy WebGL tile downloads.
Dalilk solves this with an Algeria-framed Mapbox GL engine. On landing, a mathematical pin-dispersion algorithm spreads top places across wilayas on an interactive dot-matrix map, preventing visual pin clustering. When entering the full explore map, dynamic vector polygon layers highlight selected wilayas and communes, with in-database Haversine spherical geometry calculating exact radius-based proximity from 1km up to 50km.
Critically, the map respects reality: Mapbox GL is lazy-loaded on mobile devices where the sidebar map is hidden to eliminate accidental map load billing. And a dedicated circuit-breaker health check detects token limits or network failures, gracefully flipping visitors to a clean list view rather than leaving a broken canvas.
Circuit Breaker
Detects Mapbox API quota limits or network refusal instantly and switches to list view without throwing client-side errors.
Client RTL Engine
Automatically injects the Mapbox RTL text plugin at runtime, ensuring Arabic wilaya names and communes render with pristine ligatures.
Smooth-Scroll Coexistence
Custom Lenis scroll guard exempts Mapbox canvas elements, allowing effortless multi-touch map panning without page-scroll fighting.
Custom Storefront Theming & Reddit-Style Discussions
Every business in Algeria has a distinct visual identity, yet most directories force them into monotonous templates. Dalilk gives store owners complete aesthetic ownership through four architectural page styles: classic, tinted, gradient, and immersive.
Using perceptual OKLab color-mix spaces, the owner's custom brand color dynamically generates an adaptive page background. For the gradient style, a high-contrast brand sweep at the top smoothly settles into an eye-comfort neutral grouped wash. If a merchant hasn't uploaded photography yet, an algorithmic generative SVG system (“StoreArt”) creates a crisp, geometry-driven branded backdrop based on their category and name seed.
Community engagement abandons flat review lists for a full Reddit-style discussion tree. Store updates and reviews support two-way upvoting and downvoting with net scores, optimistic React Query updates, and collapsible nested comment threads. Indentation is capped at depth 6 on mobile to guarantee that multi-level replies never truncate or squash on phone viewports.
OKLab Color Mixing
Blends custom brand hex colors into the CSS background hierarchy without muddiness or gray midtone artifacts.
Thread Collapse (+/−)
Full branch collapsing with depth clamping allows dense community debates while keeping small mobile screens readable.
Placeholder Preservation
Deleted or moderated comments retain their tree node as an anonymous placeholder so nested replies remain intact.
The Driver Ecosystem & Anti-Slander Arbitration
Algerian commerce relies heavily on independent delivery couriers and errands runners (“qadayan”), yet freelance drivers rarely have a structured directory or a way to build verifiable public trust. Dalilk provides dedicated driver profiles directly integrated alongside local storefront listings.
Drivers configure their vehicle profile (motorcycle, car, pickup truck, furgon van), operational services (point-to-point delivery, grocery errands, moving), and multi-wilaya coverage. Availability is controlled via a master instant toggle plus a 30-minute block weekly scheduler anchored to Africa/Algiers local time, natively handling overnight shifts where end times cross past midnight.
To prevent competitors or trolls from destroying a driver's livelihood, customer reviews are bound to a job-claim verification workflow. A customer can only review a driver by filing a service claim. The driver receives 7 days to confirm or dispute. If confirmed, the review is unlocked; if disputed, it routes to an administrative dispute desk. Star ratings record immediately, but review text remains hidden from the public API until verified.
Anti-Slander Holding Gate
Review text is withheld from the public API until the driver confirms the job or an admin upholds the customer's claim.
7-Day Auto Confirmation
Unanswered job claims auto-confirm after 7 days, ensuring responsive customers aren't silenced by inactive drivers.
Algiers Local Hours
Weekly schedules compute minutes since midnight in Algiers timezone, seamlessly supporting overnight work shifts (to < from).
Privacy-First Metrics & The Isolated Admin Deck
Store owners and drivers need to know if their profiles generate real business, such as phone calls, WhatsApp taps, direction requests, and page views. Dalilk provides clean daily Insights without invading user privacy: visitor identity is tracked via a cryptographically keyed daily hash of IP and user agent. No raw IPs or cookies are ever stored in the database.
Atomic rate-limited windows prevent refresh spam, counters rollover at midnight in Algiers, and the owner's or admin's own views are strictly excluded so merchants cannot artificially inflate their numbers. Store owners and drivers also connect a Telegram chat ID to receive weekly summaries and automated monthly PDF reports.
Operating the ecosystem is an independently deployed back-office app (apps/admin). This isolated console manages promotional boost codes (generating promo codes for free featured search days with strict usage caps), a manual payment verification pipeline (inspecting CCP and BaridiMob receipt uploads with approval/reversal flows), a multi-entity moderation desk, and a robust GDPR-compliant account purge engine that permanently erases personal PII, manifests S3 media deletions, and delivers transactional outbox confirmations.
Keyed Hashes
Unique visitor counts without cookies or storing raw user IPs, automatically pruned on a 6-month retention policy.
Boost Code Engine
Admins issue single- or multi-use promo codes granting sponsored placement days with expiration and redemption tracking.
Durable Account Purge
State-machine user deletion wipes PII, removes object storage files, and sends outbox emails while preserving anonymous threads.
What I'd Do Differently
Relying on manual CCP and BaridiMob receipt verification was the correct decision to launch quickly in Algeria, but it inevitably introduces administrative operational drag. Once local payment gateways (such as Chargily Pay or SATIM/CIB automated integrations) reach regulatory maturity for marketplace payouts, migrating subscriptions and boosts to automated webhooks will drastically reduce human review overhead.
On the map layer, geojson boundaries for all 69 wilayas are currently delivered from the Next.js bundle. For mobile users in southern wilayas on erratic connections, pre-rendering wilaya vector boundaries onto an edge CDN cache would shave another 150ms off initial map render time.
Interface Walkthrough
