Case StudyVercel - Production

PharmaFlow

A bilingual pharmacy Progressive Web App connecting customers and pharmacists. I built installable shopping flows, RTL/LTR commerce UI, catalog filtering, prescription review, and mobile-first dashboards that make everyday pharmacy work faster and easier to use.

Live Preview Source Code

Frontend Stack

Next.js
React
TypeScript
Tailwind CSS

Performance

Server Components where they reduce client JavaScript
Cloudinary and Next.js Image for product assets
Prefetching for common shopping paths
Streaming UI with Suspense for slower data
Lazy loading for non-critical dashboard widgets

Quality & Reliability

Separate customer and pharmacist views
Clear authenticated interface states
Client-side validation for forms and catalog inputs
Consistent layout behavior across shopping flows

Key Features

Arabic and English pharmacy interface with RTL/LTR support

Installable Progressive Web App for mobile users

Catalog browsing with price, form, and availability filters

Fuzzy product search for large pharmacy catalogs

Pharmacist dashboard for orders and stock visibility

Digital prescription review interface

Customer consultation and cart flows

Product images served through Cloudinary

Frontend Architecture

Customer shopping routes and localized layouts
Pharmacist dashboard screens
Shared product, cart, and consultation components
PWA presentation and notification layer
Optimized product imagery

UI Engineering Strategies

Keep customer and pharmacist screens clearly separated
Build a PWA-first mobile experience for pharmacy work
Reusable React components for catalog and dashboard patterns
Cloudinary with Next.js Image for responsive product photos
Bilingual metadata and routes so the product is easier to find
Client-side validation for forms and key inputs

Visual Interface