Back to Projects
E-Commerce
Amana Express E-Commerce Platform
Modern, full-stack e-commerce platform for the Moroccan market
Client
Amana Express
Year
2025
Role
Lead Full Stack Developer
Duration
12 months
Modern, full-stack e-commerce platform for the Moroccan market
Amana Express
2025
Lead Full Stack Developer
12 months
Developed a modern full-stack e-commerce platform featuring 41+ products, multilingual support with proper RTL implementation for Arabic, JWT-based secure authentication, comprehensive admin panel with product/order/contact management, AWS S3 integration for image storage, and WhatsApp integration for customer notifications.
This project demonstrates my expertise in building scalable, multilingual e-commerce platforms with modern technologies. Let's create something exceptional for your business!
41+ products across multiple categories with advanced filtering by category, price, and badges (New, Sale, Bestseller). Real-time stock management (70-130 units per product), persistent shopping cart, and multi-step checkout with address and payment selection.
Complete support for 3 languages (Arabic with RTL, French, English) with dynamic icon flipping, proper right-to-left layout, Moroccan Dirham (MAD/DH) currency formatting, and locale-specific date/number formatting.
JWT-based authentication with 24-hour token expiration, 6-digit PIN protection, comprehensive dashboard with order statistics, product metrics, contact management, and WhatsApp subscriber management.
Full CRUD operations with S3 image upload via drag-and-drop, bulk import scripts, batch stock updates, category management, and badge system (New, Sale, Bestseller). Supports multiple image galleries and feature builders.
RTL/LTR Icon Direction - Arrow icons pointing in same direction regardless of language creating confusing UX
Created useRTL() hook to detect current locale and implemented conditional rendering pattern for directional arrows. Updated 12 components with proper icon flipping and adjusted hover animations to move in correct direction per locale.
// hooks/useRTL.ts
export function useRTL() {
const locale = useLocale();
return locale === 'ar';
}
// Component usage
const isRTL = useRTL();
{isRTL ? (
<IconArrowLeft className="transition-transform group-hover:-translate-x-1" />
) : (
<IconArrowRight className="transition-transform group-hover:translate-x-1" />
)}Insecure PIN-Based Authentication - Admin API routes used simple PIN in header, anyone with PIN could access all endpoints with no session management
Continuous improvements
Across multiple categories
Arabic RTL, French, English
7 admin, 18 public
{ success: boolean, data/message }verifyAdminAuth() middleware for all admin routesuseAdminFetch(): Encapsulates authenticated requests3 Locales: Arabic (ar), French (fr), English (en)
Arabic-Specific Handling:
dir="rtl"// messages/ar.json
{
"common": {
"submit": "إرسال",
"cancel": "إلغاء",
"search": "بحث"
},
"products": {
"title": "المنتجات",
"addToCart": "أضف إلى السلة",
"inStock": "متوفر في المخزون"
}
}
// Moroccan Dirham (MAD)
export function formatPrice(price: number): string {
return new Intl.NumberFormat('fr-MA', {
style: 'currency',
currency: 'MAD'
}).format(price);
}
// Output: "250,00 MAD"
Token Generation:
Token Verification:
Protected Routes:
Sensitive data stored in .env.local:
dir="rtl"
Paginated order listing with search, 6-state order tracking (Pending, Confirmed, Processing, Shipped, Delivered, Cancelled), status updates with real-time UI, and detailed order views with customer information.
Order tracking by order number and phone, WhatsApp integration for order updates, contact form with status tracking, and comprehensive help pages (Shipping, Privacy Policy, Terms, Cookie Policy).
Tracking pixel management (Facebook, Google Analytics, GTM, TikTok, Snapchat) with active/inactive toggle, revenue statistics, product performance metrics, and contact inbox management.
Next.js Image component with S3 + CDN delivery, MongoDB indexes on frequently queried fields, pagination on all endpoints, API route caching, and Turbopack for faster builds.
Implemented complete JWT-based authentication system with token generation/verification using jose library, created reusable middleware (verifyAdminAuth) for all admin routes, built custom useAdminFetch hook, and updated 13 admin components to use secure tokens.
// lib/auth.ts
export async function generateAdminToken(): Promise<string> {
const token = await new SignJWT({ isAdmin: true })
.setProtectedHeader({ alg: 'HS256' })
.setIssuedAt()
.setExpirationTime('24h')
.sign(SECRET_KEY);
return token;
}
// lib/adminAuth.ts
export async function verifyAdminAuth(request: NextRequest) {
const authHeader = request.headers.get('Authorization');
if (!authHeader?.startsWith('Bearer ')) {
return NextResponse.json(
{ success: false, message: 'Unauthorized' },
{ status: 401 }
);
}
// ... verification logic
}Infinite API Call Loops - After JWT implementation, admin pages triggered infinite API calls freezing the browser
Wrapped useAdminFetch function with useCallback hook and proper dependencies to create stable function reference that only recreates when token changes, preventing infinite render loops.
// Before (infinite loop)
export function useAdminFetch() {
const { adminToken } = useAdminAuth();
const adminFetch = async (url, options) => {
// ...implementation
};
return adminFetch; // New instance every render!
}
// After (fixed)
export function useAdminFetch() {
const { adminToken } = useAdminAuth();
const adminFetch = useCallback(async (url, options) => {
// ...implementation
}, [adminToken]); // Only recreate when token changes
return adminFetch;
}Stock Visibility Issue - Products showed "Out of Stock" despite having stockCount values in database
Created update-stock.js script to set both stockCount and inStock boolean fields. Updated 41 products with random stock levels (70-130 units) ensuring both fields are properly synchronized.
// scripts/update-stock.js
await Product.updateOne(
{ _id: product._id },
{
$set: {
stockCount: randomStock,
inStock: true
}
}
);
// Updated 41 products successfullyStrict mode enabled
Across 3 languages
useRTL(): Centralizes RTL detection logicuseAdminAuth(): Manages admin authentication stateAdminAuthContext: Global admin auth stateCartContext: Shopping cart state managementMONGODB_URI: Database connectionAWS_ACCESS_KEY_ID & AWS_SECRET_ACCESS_KEY: S3 credentialsADMIN_PIN: Admin PIN for initial authJWT_SECRET: Token signing secretEMAIL_USER & EMAIL_PASS: Email credentialsImage Optimization:
Database Optimization:
Code Splitting:
Build Optimization:
