← Back to Portfolio★ Featured Project
Enterprise Platform

Al Nasser Operations Hub

The operational backbone of Al Nasser's omnichannel e-commerce across 7 markets. Eight integrated modules orchestrate the complete post-purchase journey — from order management and returns processing to delivery operations and driver dispatch. Complemented by two native mobile apps that extend the platform to warehouse floors and delivery routes.

● Production 💻 Next.js 15 App Router 👤 5 User Roles 🔒 Private Repository
8
Core Modules
20+
DB Models
5
User Roles
22
Route Directories
2
Mobile Apps

System Architecture

🌐

Web Dashboard

Next.js 15 App Router with server components. shadcn/ui component library, TipTap rich text editor, Recharts analytics, MapLibre for delivery maps. Fully responsive with dark mode support.

Next.js 15TypeScriptshadcn/uiTipTapRechartsMapLibre

API Layer

Next.js API routes with Prisma ORM on Neon PostgreSQL. NextAuth.js session management with role-based middleware. Server actions for mutations.

PrismaNeon PostgreSQLNextAuth.jsServer Actions
📃

PDF & Email Services

Puppeteer for generating delivery notes, return receipts, and invoices. Resend for transactional emails — order confirmations, return status updates, driver notifications.

PuppeteerResendReact Email
🔗

Integrations

Shopify API for order sync. External carrier APIs for shipping. Barcode generation and scanning across web and mobile. Webhook receivers for real-time updates.

Shopify APICarrier APIsWebhooksBarcode

Key Modules

Orders Management

Full order lifecycle from Shopify sync through fulfillment. Status tracking, filtering, bulk actions, order notes, and timeline view.

Returns Processing

Multi-step return workflows with approval chains. Reason categorization, refund tracking, warehouse receiving, and quality inspection logs.

Delivery Operations

Route planning with MapLibre maps. Delivery scheduling, zone management, capacity planning, and real-time shipment tracking.

Driver Management

Driver profiles, assignment engine, performance analytics, delivery history, and mobile app integration for field operations.

Helpdesk & Tickets

Internal ticketing system with TipTap rich text. Priority levels, assignment rules, SLA tracking, and resolution workflows.

Workflow Engine

Configurable approval chains and automated status transitions. Escalation rules, notification triggers, and audit logging.

RBAC & Permissions

5 distinct roles: Admin, Manager, Agent, Driver, Warehouse. Granular route-level and action-level permission guards.

Third-Party Integrations

Shopify order sync, carrier rate APIs, barcode generation, PDF document pipelines, and transactional email delivery.

Technology Stack

Next.js 15 TypeScript Prisma Neon PostgreSQL NextAuth.js Puppeteer Resend MapLibre GL TipTap Recharts shadcn/ui Tailwind CSS Shopify API React Email

Companion Mobile Apps

🚚
Al Nasser Driver
React Native · Expo 55

Mobile app for delivery drivers to manage their daily routes, scan packages, capture signatures, and update delivery statuses in real time. Built with offline-first architecture for areas with poor connectivity.

📷 Barcode scanning
📍 GPS tracking
✏️ Signature capture
📦 Offline-first queue
🔒 Biometric lock
🔔 Push notifications
🔄 Background fetch

9 screens: Login, Scan, Schedule, Orders, Order Detail, Map, Returns, Return Detail, Settings

Expo 55 React Native 0.83 React Navigation 7 TypeScript Zod 4
🏪
N InStore
React Native · Expo 55

In-store return processing app used by store and warehouse staff. Features a 4-step return wizard, barcode scanning, role-based tabs, and receipt generation in both A4 and thermal formats.

🔄 4-step return wizard
📷 Barcode scanning
📦 Offline queue
👤 Role-based tabs
🖨 Receipt generation (A4/thermal)
🔍 SKU lookup
🔃 Reanimated transitions

9 screens: Login, Order Lookup, Item Selection, Return Details, Confirmation, History List, History Detail, Scan (warehouse), Settings

Expo 55 React Native 0.83 React Navigation 7 TypeScript Zod 4 Reanimated