🚀 Project Update: CloudPuff Sanctuary (Phase 2) Project: CloudPuff Plushies — E-Commerce Experie...🚀 Project Update: CloudPuff Sanctuary (Phase 2) Project: CloudPuff Plushies — E-Commerce Experie...
The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started
Back to feedPost
Arsalan's avatar
Neo Gen Technologies logo
Arsalan Abbas
pro
• Sep 14
🚀 Project Update: CloudPuff Sanctuary (Phase 2)
Project: CloudPuff Plushies — E-Commerce Experience Role: Lead Full-Stack Engineer & UI/UX Product Architect Milestone: Platform Release v1.2 Status: Completed & Live in Development Stack: Next.js 15 · React 19 · TypeScript · Vanilla CSS · Web Audio API
📣 Milestone Overview
This milestone evolved CloudPuff Sanctuary from a visually engaging storefront into a more complete e-commerce experience with interactive shopping features, role-based dashboards, and seamless guest-to-account data synchronization.
The primary focus was on improving customer engagement, account architecture, security, personalization, and overall UX while keeping the codebase modular and performant.
Key Deliverables
Interactive storefront and custom plushie experience
Customer and administrator dashboard separation
Guest wishlist functionality with account synchronization
Enhanced authentication and admin security
Interactive shopping and personalization features
Responsive, lightweight frontend architecture
🧸 1. Interactive Storefront Experience
Built a highly interactive storefront designed around the brand's playful customer experience.
Key features include:
Interactive Plushie Customizer: Real-time customization of fur colors, aromas, accessories, and engraved tags.
Mood Matcher: Recommends plush companions based on the visitor's selected mood.
Size & Hug Comparison: Interactive visual comparisons to help customers understand product dimensions.
Cloud Hop Arcade: HTML5 Canvas mini-game with reward-based shopping incentives.
Adoption Certificates: Generates personalized post-purchase certificates with registry information and print/PDF-friendly formatting.
Web Audio Interactions: Custom audio feedback for selected UI interactions, product actions, and ambient experiences.
🛡️ 2. Dual-Persona Dashboard Architecture
The dashboard was restructured around two distinct experiences:
Customer Cuddle Hub
Profile and identity management
Orders and adoption registry
Wishlist
Billing and saved payment information
Notifications
Account/session management
Sanctuary Shop Command Center
Inventory management
Fulfillment and dispatch
Revenue and operational KPIs
Store governance
Administrative security
Customer-facing preview
Security & UX Improvements
Strict role-based access controls
Administrative features isolated from customer accounts
Dedicated TOTP/2FA management for administrators
Independent billing and notification sections
Device/session management
Cleaner navigation with deep-linked dashboard tabs
This keeps the customer experience simple while providing administrators with the tools they need to operate the platform.
💖 3. Guest-to-Account Wishlist Sync
A major focus of this milestone was removing friction from wishlist functionality.
Visitors can save products without creating an account first.
The system then:
Stores guest wishlist selections locally.
Preserves selections through registration/login.
Merges guest and account wishlists automatically.
Removes duplicate products during synchronization.
Updates open browser tabs through cross-tab events.
The authenticated dashboard then provides a dedicated wishlist experience with:
Saved products
Bulk "Adopt Whole Squad" cart action
Wishlist sharing
Product ratings
Direct shopping navigation
🛠️ Technical Architecture
Layer Technology Implementation Framework Next.js 15 App Router, dynamic routes, client components Frontend React 19 Modular component architecture Language TypeScript Strict typing across models, contexts and components Styling Vanilla CSS Semantic tokens, responsive layouts, themes Audio Web Audio API Custom UI sound synthesis State React Context Auth, Cart, Theme and Sound contexts Sync Browser Storage/Events Guest persistence and cross-tab synchronization
The implementation prioritizes modularity, type safety, performance, and minimal frontend overhead.
📊 Results
Improved Customer Experience
Guests can immediately save products without encountering an authentication barrier.
Better Operational Separation
Customers and administrators receive purpose-built interfaces with appropriate permissions and workflows.
Stronger Account Continuity
Wishlist data is preserved when users transition from guest browsing to registered accounts.
Lightweight Frontend
The custom CSS architecture avoids unnecessary UI-library overhead while maintaining responsive layouts and rich interactions.
Maintainable Codebase
Features are organized into reusable components, typed models, context providers, and isolated functionality to support continued development.
🔮 Next Development Opportunities
Planned enhancements include:
Automated SMS delivery notifications
Multi-currency support
AR-based plushie previews using WebXR
Further personalization and engagement features
This milestone establishes a stronger foundation for CloudPuff Sanctuary to evolve from an e-commerce storefront into a more personalized and interactive digital shopping platform.
UX DesignGitHubReactWeb DevelopmentcrmdashboardNext.jsFull Stack Development
Back to feed
The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started