Storefront & Admin Dashboard
E-Commerce Platform
A server-side rendered storefront with Paymob checkout and Arabic/English RTL, plus a companion admin dashboard for products, orders, returns, banners and sales reports.
Overview
An online store made of two applications: a customer storefront rendered on the server for fast first loads and search visibility, and an admin dashboard for running the store. The storefront works in Arabic and English with RTL.
My role
Frontend developer at AI Cloud. I built both the storefront and the admin dashboard.
Key features
- Server-side rendered home, product list, product details and category pages.
- Customer accounts: email sign-up with verification code, password reset and Google sign-in, with cookie-based sessions.
- Cart, favorites, checkout with address and shipping, order history and order details.
- Cash on delivery or online payment through Paymob, with a payment-result page.
- A returns flow: customers request a return and follow its status.
- A theme driven by the admin: three brand colors set in the dashboard become the storefront palette at runtime.
- Store settings that switch features on or off: guest checkout, orders, reviews and notifications.
- An admin dashboard for products, categories, brands, banners, discounts, coupons, orders, returns, inventory, users and roles, with six report pages built with charts.
Screens
Technical deep dive
Server-side rendering with mixed render modes
Catalogue pages are rendered per request, informational pages are prerendered, and account pages render in the browser, so each page type uses the cheapest suitable strategy.
Admin-driven theming
The storefront computes a full color palette from the colors saved in the admin and applies it as CSS variables, so a store can be re-branded without a code change.
Payments and monitoring
Online payments are handled on Paymob’s hosted page and the customer returns to a result page. Sentry captures authentication errors in production.
Permission-based admin
Admin routes declare the permission they need (34 distinct permissions), managed through a roles screen.