Super Al-Balad
Bilingual Arabic/English grocery e-commerce platform with a full admin CMS, real-time order notifications, and RTL-first design — built for conversion and speed. Year: 2025
Year
2025
Role
Full-Stack Developer
Platform
Web
Status
Live
Stack
Technologies used
| Technology | Category | Purpose |
|---|
| Next.js 16 | Framework | App Router, API routes, server components, and ISR for the storefront |
| TypeScript | Language | Type-safe development across the full stack |
| Tailwind CSS v4 | UI/UX | Utility-first styling with custom @theme design tokens |
| Shadcn/UI | UI/UX | Accessible Radix-based component primitives (dialogs, dropdowns…) |
| Motion | UI/UX | Page transitions, hero overlays, and micro-interaction animations |
| GSAP | UI/UX | Advanced scroll-linked and timeline animations |
| Swiper | Frontend | Vertical hero carousel and horizontal category/product sliders |
| Lucide React | UI/UX | Consistent SVG icon set across all UI elements |
| Prisma ORM | Backend | Type-safe MongoDB client, schema management, and seeding |
| MongoDB | Database | NoSQL document store for products, categories, orders, and config |
| next-intl | Frontend | i18n routing, translation strings, and RTL layout activation |
| Zustand | Frontend | Lightweight global cart state with persistence |
| Socket.io | Backend | Real-time bi-directional channel for live order notifications |
| UploadThing | Cloud | Managed file upload service for product and hero images |
| Sharp | Backend | Server-side image resizing and optimization in the /api/images proxy |
| bcryptjs | Auth | Password hashing for admin credentials |
| jose | Auth | JWT signing and verification for admin session tokens |
| Nodemailer | API | Transactional email for order confirmations |
| EJS | Backend | HTML email template rendering |
| PM2 | DevOps | Process manager keeping the Node.js server alive in production |
| react-hot-toast | UI/UX | Non-blocking toast notification feedback throughout the UI |
| react-quill-new | UI/UX | Rich-text editor for CMS content fields (legal pages, descriptions) |
What was built
Key features
Fully bilingual Arabic/English storefront with automatic RTL layout switching powered by next-intl locale routing.
Comprehensive admin CMS to manage products, categories, hero images, and all site content without touching code.
Real-time order push notifications delivered to the admin dashboard via Socket.io.
Mobile-first cart experience with persistent state management via Zustand and an animated slide-in drawer.
VerticalSwiper hero section with cinematic motion overlays, supporting separate mobile and desktop image variants per slide.
Image proxy API with sharp-based server-side optimization for fast, layout-shift-free product photo delivery.
Secure JWT authentication for admin access using jose + bcryptjs with HTTP-only cookie sessions.
UploadThing media management for product images, hero slides, and logo assets — all manageable from the admin dashboard.
More work
Related projects
M1720 – Shop Center
A production-grade multi-vendor e-commerce platform with real-time chat, AI-powered recommendations, Stripe payments, and a full microservices backend — all in one Nx monorepo.
Hirfa Barber — حِرفة
A cinematic, bilingual luxury barbershop website for a 15-year-old Bethlehem institution — built with animated page transitions, scroll-driven storytelling, and a full AR/EN experience.
Cancer Reports Management System
A secure, role-based medical portal for Khaled Al-Hassan Cancer Hospital — enabling staff to manage research reports, categories, and events with granular access control.