UI Design
NeonTech | نيون تيك
Premium Gaming Gear Store
Overview
NeonTech is a state-of-the-art e-commerce storefront designed for competitive gamers and tech enthusiasts, built entirely with pure HTML, CSS, and vanilla JavaScript. Key features include: 1. **Bilingual Support (En/Ar)**: Seamless real-time toggle with deep localization and full RTL support. 2. **3D Holographic Showroom**: An interactive virtual staging area to preview gaming gear with custom image upload capability. 3. **Interactive Reviews**: Dynamic user reviews with persistent browser storage (localStorage) and verified buyer badges. 4. **Global RGB Theme Customizer**: Floating glassmorphism controller featuring 4 neon theme modes (Cyber Green, Arctic Cyan, Cyber Pink, Gold Elite) and Dark/Light toggles. 5. **Support Chatbot**: AI-simulated chatbot with order tracking (e.g., NT-9080), coupon codes (GAMERS10), and WhatsApp support routing. 6. **Advanced Gear Cart**: Highly reactive cart system with Supabase synchronization (sb-[user-id]-cart) for authenticated sessions. 7. **WhatsApp Checkout**: Auto-formatted digital invoice generation sent directly to WhatsApp for rapid order fulfillment. 8. **Responsive Mobile UI**: Optimized screen layout that auto-hides floating elements (chatbot/theme panel) when the cart is open on mobile. 9. **Esports & Sales Simulator**: Simulated active viewer counters per product and dynamic sales notification toasts to boost conversions.
Built With
The Challenge
Building a complex catalog UI with live filters, wishlist logic, dynamic layout toggles (grid/list), and cart state persistence using vanilla JavaScript without any library dependencies.
The Approach
Created modular CSS components with HSL variable-driven neon styling, optimized Event Listeners for cart and wishlist interactions, and implemented dynamic client-side filtering logic directly in JS.
The Outcome
A lightweight, pixel-perfect, ultra-fast gaming storefront demonstrating how highly interactive web interfaces can be achieved using core web standards.
Gallery
