A multi-vendor flower marketplace for Saudi Arabia that connects customers with the nearest available flower shop and provides a complete shopping experience, from ready-made bouquets to AI-assisted custom bouquet creation.
A closer look at the responsive storefront, location-aware shopping, bouquet customization, AI-generated previews, checkout, account features, and other key customer journeys.
Shams Flowers
Shams Flowers
Shams Flowers
Shams Flowers
Shams Flowers
Shams Flowers
Shams Flowers
Shams Flowers
Shams Flowers
Shams Flowers
Shams Flowers was designed as more than a traditional online flower store. The platform brings multiple flower shops into a unified marketplace while preserving location-based product availability and delivery coverage. Customers begin by selecting their location through search, a map pin, or their current location. The coordinates are sent to the backend, which determines the nearest eligible flower shop. If the selected location falls outside the configured service coverage, the customer receives clear feedback before continuing. From there, customers can browse ready-made bouquets, use dynamic filters, save favorites, customize products with optional add-ons, create personalized bouquets, submit event coordination requests, complete payments, and track their orders. The storefront is also highly dynamic. Administrators can manage a significant amount of customer-facing content, including promotional material, images, sections, filters, offers, and header and footer content without requiring frontend code changes.
As the Frontend Developer, I owned the complete customer-facing frontend implementation and API integration. I worked alongside the backend developer, translated the provided Figma designs into production interfaces, and implemented additional UI improvements requested by the client throughout development. I was also responsible for responsive behavior across the platform and performed comprehensive QA across both the customer-facing application and the Laravel Blade dashboards used by administrators and flower-shop owners.
The platform combines location-aware discovery, personalized bouquet creation, commerce, payments, rewards, and post-purchase services within one connected customer journey.
Customers can search for an address, select a point directly on Google Maps, or use their current location. Coordinates are validated through the backend to connect the customer with the nearest eligible flower shop and prevent orders outside configured delivery coverage.
A guided multi-step experience lets customers choose flower types, colors, bouquet size and quantity, wrapping, occasion, and an optional greeting card. An AI-generated image previews the configured bouquet before the customer proceeds to delivery and checkout.
I performed end-to-end QA across the platform, testing customer journeys, responsive behavior, API integrations, authentication, location validation, bouquet customization, cart operations, checkout and payment states, discounts, wallet and loyalty flows, notifications, and order tracking. Testing also covered the Laravel Blade dashboards. Issues were identified and coordinated with the backend developer, followed by retesting to verify the affected flows after fixes.
Customers can browse bouquets, select optional add-ons, manage cart items, apply discount codes, enter delivery details, and complete purchases through Moyasar or their platform wallet.
Dedicated wallet and loyalty interfaces provide balances and detailed transaction histories. Customers can convert accumulated loyalty points into wallet credit according to an administrator-defined conversion rate.
Customers can follow their orders through review, confirmation, preparation, delivery, and completion while receiving notifications for order updates, wallet activity, loyalty points, offers, and platform announcements.
A large portion of the public storefront is driven by administration-managed data, including hero content, images, promotional sections, filters, offers, and header and footer content.
Customers can filter products by criteria such as type, price, recipient, and occasion, while filter definitions and available values can be dynamically managed through the administration system.
Customers looking for flower and event coordination services can submit their requirements through a dedicated request flow for follow-up by the business.
Technologies
The frontend combines Next.js and TypeScript with centralized state management, REST API integration, Google Maps, online payments, responsive interfaces, and AI-assisted bouquet visualization.
01 / 01
