Wicked Smokes
A premium Next.js-based e-commerce platform and management ecosystem for Wicked Smokes, a high-end specialty smoke and vape retailer. The codebase is fully optimized for performance, visual quality, and state-of-the-art interactive micro-animations under a sleek, dark glassmorphic design system.
Project Details
Project Case Study: Wicked Smokes
Premium Next.js E-Commerce Platform & Admin Suite
An immersive, premium e-commerce platform and administrative ecosystem tailored for a modern specialty smoke and vape retailer. Built with performance, accessibility, and sleek design aesthetics in mind, this project showcases a fully functional storefront, robust user accounts, interactive order tracking, and a comprehensive admin analytics suite.
🚀 Tech Stack
Frontend Framework: Next.js 16+ (App Router), React 19, TypeScript
Styling & Animation: Vanilla CSS Modules, custom CSS variables, CSS Keyframes (Glassmorphism & dark-mode optimized)
Database & ORM: Prisma ORM, PostgreSQL (highly query-optimized schema)
Analytics & Data Vis: Recharts (responsive charting library)
State & Context: React Context API (Cart, Authentication, Custom Toast Notifications)
SEO & Metadata: Dynamic Metadata API, JSON-LD Structured Data integration
💎 Core Features
1. Interactive & Immersive Storefront
Advanced Catalog Filtering: Real-time multi-tag filtering, price range boundary control, and min-rating sliders matching a Category Sidebar.
Premium Product Detail Pages:
Smooth CSS-based hover zoom effect on high-resolution product imagery.
Dynamic Related Products grid querying items in matching categories.
Seamless client-side cart integrations backed by global state context.
2. User Accounts & Visual Order Tracking
Detailed Account Dashboard: Allows customers to manage profiles, view purchase history, and inspect pending/completed orders.
Interactive Status Tracker: An engaging visual step indicator tracking order progress (Pending ➔ Processing ➔ Shipped ➔ Delivered) in real time, featuring CSS glow-pulse states.
Expandable Order Records: Interactive accordion rows detailing individual item breakdowns, prices, coupon discounts applied, and full shipping details.
3. Comprehensive Administrative Control Center
Sales & Inventory Analytics: A data-heavy landing page featuring a dual-chart layout powered by Recharts (Daily Revenue trends + Top 5 Selling Products by quantity).
Inventory & Tag Management: A streamlined creation/edition system allowing admins to assign tags (e.g., Glass, Percolator, Silicone) and special promotional badges (Best Seller, Premium, New).
Cart Recovery Operations: Dedicated panel to view and audit abandoned carts to assist with customer outreach and retention.
Coupon & User Audits: Full access controls to create discount codes and manage customer user roles (User vs. Admin status).
4. Application Polish & Micro-Interactions
Toast Notification System: A lightweight, non-blocking notification context displaying success, info, and error alerts with slide-in CSS keyframe animations.
Age Verification Gate: A strict modal dialog ensuring legal compliance (21+ requirements) with persistent session storage checks.
Newsletter Signup & Subscriptions: A footer-integrated client-side sign-up component that interfaces with server actions and checks database duplication states.
Floating Ambient Elements: Subtle drifting canvas elements reflecting the brand's aesthetic without impacting accessibility or performance.
🛠️ Architecture & Performance Highlights
Server vs. Client Component Split: Optimized the component tree by keeping data-fetching operations (e.g. database lookups, SEO metadata generation) on the server, while utilizing client-side hydration strictly for interactive UI elements.
JSON-LD Schema Integration: Automated structured data embedding (application/ld+json) on product pages, significantly boosting search engine visibility and rich snippet results.
Clean Code & Strict Typing: Leveraged full TypeScript safety across Prisma database schemas, API routes, and front-end props, preventing run-time errors.
Atomic CSS Systems: Avoided bloated UI libraries in favor of optimized Vanilla CSS Modules, guaranteeing lightning-fast load times and unique, premium brand styles.