Wrapped Wishes
An expressive gifting storefront designed around curated collections, product discovery, occasion-based browsing, and WhatsApp ordering.
01. PURPOSE & OVERVIEW
Wrapped Wishes was designed as an online gifting storefront where customers can explore curated products and collections, browse by occasion or category, and place orders directly through WhatsApp.
Positioned around personalized gifting and local delivery in Mumbai, the storefront presents products under warm, expressive branding ("Gifts That Feel Like a Hug 🎀"). It serves as a direct bridge between artisanal gift presentation and immediate customer contact.
Core Positioning
A responsive gifting storefront with dynamic product discovery, category filtering, Supabase-backed content management, and WhatsApp-based ordering.
02. VISUAL SHOWCASE
Real screenshots captured directly from the deployed storefront showcasing responsive layouts across desktop and mobile devices.
// MOBILE STOREFRONT (390 × 844)
// SHOP COLLECTION GRID (/shop/)
// SEARCH & CATEGORY FILTERING UI
// MOBILE SHOP GRID (390 × 844)
// ABOUT PAGE & BRAND STORY (/about/)
// CONTACT PAGE & ENQUIRY FORM (/contact/)
03. KEY STOREFRONT FEATURES
Curated Gift Collections
Organized browsing across collections including For Her, For Him, Bouquets, Frames, Greeting Cards, Festive Specials, Baby Gifts, Corporate Gifts, Keychains, and Chocolate Hampers.
Occasion-Based Navigation
Quick links for high-intent event shopping, covering Birthdays, Anniversaries, Weddings, Diwali / Festive Specials, Christmas, Corporate events, and Baby celebrations.
Dynamic Product Search & Filter
Client-side JavaScript filtering in shop.js supporting real-time product search, category filtering, and URL query parameter state sync.
WhatsApp-Based Ordering
Direct conversion pipeline replacing traditional checkout complexity. Product CTAs generate pre-formatted WhatsApp messages containing product names, categories, and prices.
Supabase Content Layer
Cloud database integration in storage.js managing product catalog items, featured products, categories, hero settings, and customer testimonials.
Supabase Storage & Admin
Supabase Storage buckets for product imagery, paired with a custom administrative dashboard (/admin/dashboard.html) for product CRUD and hero configuration.
04. TECHNICAL IMPLEMENTATION & ARCHITECTURE
Wrapped Wishes uses a lightweight frontend architecture built with semantic HTML5, custom CSS3, and vanilla JavaScript modules. JavaScript modules handle storefront rendering, product discovery, search and category filter interactions, WhatsApp ordering, and administrative functionality. Supabase provides the backing data layer and image storage, while the project is deployed on Vercel.
Frontend Module Boundaries
- • main.js: Homepage interactions, featured product grid rendering, floating WhatsApp CTA button, and testimonials.
- • shop.js: Product grid lifecycle, live keyword search, category filters, and URL parameter parser (
?category=...). - • storage.js: Supabase database queries, product CRUD operations, image upload interfaces, and site settings.
- • config.js: Environment configuration and Supabase REST client initialization.
- • admin.js: Authentication flow, dashboard state, product inventory management, and live hero preview.
Zero-Friction Conversion Pipeline
Instead of requiring users to register accounts or navigate payment gateways, every product card and hero banner incorporates direct WhatsApp integration. Clicking "Order on WhatsApp" encodes the product title, category, and unit price into a pre-filled WhatsApp chat link, establishing instant direct communication with the merchant.
05. TECHNICAL CHALLENGE
Building a Dynamic Storefront Without a Heavy Frontend Framework
Modern storefront projects are frequently built with heavy JavaScript frameworks like React or Next.js. The engineering challenge in Wrapped Wishes was delivering dynamic product discovery, search indexing, URL-driven category filtering, Supabase database synchronization, image bucket uploads, admin inventory management, and WhatsApp message formatting while keeping the application codebase purely inside traditional HTML, CSS, and vanilla JavaScript.
By maintaining strict module separation and leveraging modern ES6 features alongside Supabase REST APIs, the storefront achieves instant page loads, zero framework bundle overhead, and complete administrative flexibility.
06. VISUAL DESIGN & TECHNOLOGY STACK
Brand Visual Identity
The design utilizes Playfair Display for elegant, luxury serif titles paired with Poppins for highly legible body copy. A soft pink and gold accent palette creates a welcoming, gift-focused aesthetic across desktop and mobile screens.
Technologies Utilized
NEED A SIMILAR STOREFRONT OR WEBSITE?
I design and develop responsive business storefronts, e-commerce landing pages, and web applications tailored for fast customer conversion and clear brand presentation.