ElectraHub – Electronics E-Commerce Website Next.js&Tailwind CSS

ElectraHub is a sleek, responsive, and high-performance electronics e-commerce website built with Next.js and Tailwind CSS.
Perfect for online gadget stores, tech retailers, and digital accessory brands — it delivers a complete shopping experience from product browsing to checkout. With optimized performance, reusable UI components, and SEO-friendly pages, ElectraHub makes it easy to launch a modern electronics store fast.

Installation & Setup

• npm install
• npm run dev

Additional Plugins & Packages

If you face any errors or missing modules, you may need to install extra libraries:

• npm install react-hot-toast
  
• npm install remixicon react-icons @fortawesome/react-fontawesome @fortawesome/free-brands-svg-icons
• npm install swiper
• npm install countup.js
• npm install bootstrap-icons
• npm install remixicon
• npm install @iconify/react

What’s Included

• Complete Next.js Source Code – App Router structure, pages, and components
• Tailwind CSS Setup – Config, purge, and theme tokens (colors, spacing)
• Reusable Components – ProductCard, Navbar, Footer, CartDrawer, Filters, Forms
• Demo Data – sample products, categories and images (local JSON / fixtures)
• Stripe Payment Scaffold – example integration (test mode)
• Responsive Layouts – mobile-first, tablet, desktop designs
• Well-Commented Code & README – setup instructions and customization notes

Tech Stack Used

• Next.js (App Router) – SSR/SSG, routing, and performance optimizations
• React – Component-driven UI (dropdowns)
• Tailwind CSS (v4) – Utility-first styling and responsive layout
• TypeScript (optional) – Type-safety (project can be JS or TS)
• Swiper.js – Product/hero sliders (optional)
• Heroicons / Remix Icon / Font Awesome / Bootstrap Icon – Iconography
• next/image – Optimized images

 Pages Included

• Index (Home Page) – Hero section, featured products, categories, and promotions.
• Shop – All products with grid/list layout and filtering options.
• Shop Details – Single product page with description, price, and add-to-cart option.
• Cart – View selected items, update quantity, and proceed to checkout.
• Wishlist – Save favorite products for later.
• Checkout – Secure order processing and payment details.
• Blog – Articles, shopping tips, and product guides.
• Blog Detail – Individual blog post with related posts.
• Account – User profile, login/register, and order history.
• Contact – Inquiry form, location map, and support details.

Key Features

• Full shopping flow — Browse, wishlist, cart, checkout, and account.
• Responsive & mobile-first — Optimized UI on phones/tablets/desktops.
• Image optimized — next/image for smaller payloads & faster LCP.
• Modular components — Reusable ProductCard, Filters, CartDrawer, etc.
• Swiper-powered sliders — Hero & featured product carousels.
• Stripe payment scaffold — Secure demo checkout integration.
• Easy to connect — Headless CMS / API-ready product data (JSON → CMS).
• Accessible basics — Keyboard focus & aria-ready patterns.

Ideal For

• Electronics & gadget stores
• Tech brands & resellers
• Subscription box startups (electronics)
• Agencies building e-commerce stores for clients

The integration of Swiper sliders, optimized images, and icon libraries ensures a visually appealing and user-friendly interface. It’s a fully responsive, SEO-optimized solution that helps businesses showcase and sell products effortlessly.