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.
Results At A Glance
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.
How This Project Came Together
Discover
Understanding the real goal behind the request — the audience, the constraints, and what success has to look like for the business.
Design
Shaping the structure, flow, and visual language so every screen earns its place and nothing feels accidental.
Build
Writing clean, maintainable code with close attention to performance, responsiveness, and edge cases that get skipped under deadline pressure.
Launch & Refine
Shipping, watching how real users interact with it, and tightening the rough edges that only show up in production.
