OSA Optics
An online optical store for sunglasses, eyeglasses and contact lenses, with an AI virtual try-on, multi-country storefronts and a full admin dashboard.
Overview
OSA Optics sells sunglasses, prescription glasses and contact lenses from well-known brands across Egypt. Customers filter by brand, material, gender and type, pick a color variant, and try the frames on their own face before buying.
I built both front-ends: the Next.js storefront and the React admin dashboard the store team uses to run products, lenses, orders, delivery zones, doctors and the try-on settings. A teammate built the backend, the try-on processing service and the mobile apps.
The problem
Buying glasses online is hard because people want to see the frame on their face first. The store also needed one catalog for many product types, each with variants, colors and lens options.
The solution
A fast, bilingual storefront with rich filtering and variant pickers, an AI try-on that puts the selected frame on the customer's photo, and a dashboard that manages the whole catalog and every order.
Who It's For
Shoppers
Browse by category, gender and brand, compare colors, try frames on with the camera and order.
Store team
Manage products and variants, lens types, banners, doctors, delivery zones, orders, users and roles.
Key Features
AI Virtual Try-On
Take a selfie or upload a photo. The image is compressed in the browser, sent for processing, and the result is pushed back in real time.
Catalog & Variants
Products with color variants, gender and glass type, plus brand and material filters across hundreds of items.
Eyeglass Lenses
A dedicated lenses section so customers can choose the right lens for their frames.
Multi-Country Storefront
Country-and-language routes (e.g. /eg-en) with localized pricing, Arabic RTL and English.
Cart, Checkout & Orders
Cart and checkout with delivery zones, and an orders module in the dashboard with real-time updates.
Admin Dashboard
Products, categories, lenses, banners, doctors, zones, users, roles and try-on settings in one place.
SEO
Localized metadata, sitemap and robots, with Arabic-specific SEO work for Egyptian search.
Gallery
1 / 7Architecture
Storefront
Next.js with country-language routing, SEO metadata and RTL support
Admin dashboard
React + Vite SPA for catalog, orders and settings
GraphQL API
Shared backend for both apps, with queries, uploads and subscriptions
Try-on service
Processes the customer's photo with the selected frame and pushes the result back
Challenges & Solutions
A try-on that feels instant
Challenge
Processing a face photo with a frame takes several seconds. A normal request would freeze the page, and large phone photos made it even slower.
Solution
The photo from the camera or an upload is compressed to WebP in a web worker before upload. The try-on request returns right away, and the finished image comes back through a GraphQL subscription matched by request ID, so the dialog shows progress and swaps in the result the moment it's ready, with retry and download options.
Have a project like this in mind?
I'd love to help you build something great. Tell me what you're working on.
Let's talk