Al-Hafeth Stone & Marble Co
A trilingual e-commerce and showcase platform for a Palestinian stone manufacturer established in 1990 — featuring a product catalog, CNC decor gallery, and admin dashboard.
Year
2024
Role
Full-Stack Developer
Platform
Web
Status
Live
Stack
Technologies used
| Technology | Category | Purpose |
|---|
| Next.js 14 | Framework | App router, SSR/SSG pages, API routes, image optimization |
| TypeScript | Language | Type-safe codebase across frontend and backend |
| Tailwind CSS 3 | UI/UX | Utility-first styling with custom dark/yellow/light brand palette |
| Framer Motion | Frontend | Page transitions, parallax hero, scroll-triggered animations |
| Lenis | Frontend | Smooth inertia scrolling for cinematic feel |
| shadcn/ui | UI/UX | Accessible component primitives (dialogs, dropdowns, tables) |
| Radix UI | UI/UX | Headless primitives powering the shadcn/ui layer |
| Flowbite React | UI/UX | Additional pre-built components for admin panel tables |
| React Hook Form | Frontend | Performant form state management with minimal re-renders |
| Zod | Backend | Runtime schema validation for all form and API payloads |
| MongoDB | Database | Document store for products, decorations, categories, and users |
| NextAuth.js 4 | Auth | JWT-based session management and admin login flow |
| bcrypt | Auth | Secure password hashing for admin user credentials |
| next-intl 3 | Tools | i18n routing, translations, and RTL support for AR/EN/HE |
| Redux Toolkit | Frontend | Global client-side state (cart, UI flags, language preferences) |
| Uploadthing | Cloud | Managed file uploads with S3-backed storage for product images |
| React DnD | Frontend | Drag-and-drop image reordering in the admin product editor |
| Embla Carousel | Frontend | Touch-friendly image carousels on product and home pages |
| Leaflet | Frontend | Interactive map showing factory location in Hebron, Palestine |
| EmailJS | API | Client-side email delivery for the public contact form |
| Lucide React | UI/UX | Consistent icon set across navigation and admin actions |
| React Hot Toast | UI/UX | Non-blocking success/error notification toasts |
| Vercel | DevOps | Hosting, CI/CD pipeline, and edge network delivery |
| Vercel Analytics | Tools | Real-time visitor analytics and page-level tracking |
| Vercel Speed Insights | Tools | Core Web Vitals monitoring and performance regression alerts |
What was built
Key features
Full trilingual support (Arabic, English, Hebrew) with RTL layout and next-intl routing, defaulting to Arabic for the target market.
Browsable product catalog spanning Marble, Granite, and Natural Stone categories with subcategory filtering, search, and pagination.
Pinterest-style decorations gallery showcasing CNC-crafted stone pieces (columns, stairs, windows) with animated category filters.
Secure admin dashboard with NextAuth.js JWT sessions for managing products, decor items, and categories in all three languages.
Cloud image uploads via Uploadthing with drag-and-drop reordering using React DnD across product and decor management forms.
Smooth cinematic scrolling experience powered by Lenis and Framer Motion parallax, delivering an editorial-quality presentation.
Integrated contact section with EmailJS form submission, an interactive Leaflet map pinpointing the Hebron factory location.
Vercel Analytics and Speed Insights baked in for real-time performance monitoring and visitor behavior tracking.
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.