Techzy E-commerce Platform

🔥 Buy and Sell Gadgets with Ease — Full-Stack MERN E-commerce Client with Premium Responsive Layouts

---

🌈 About Techzy

A state-of-the-art MERN stack electronics and gadgets store. Tailored with a premium, sleek dark/orange styling system, mobile-first layouts, role-based dashboards, and interactive touch controls.

---

🌟 Key Features & Mobile Optimizations

📱 Premium Mobile UI/UX Overhauls

1. Interactive Top Navigation Header:
   • Removed the duplicate top-right hamburger menu.
   • Inserted a sleek Profile Avatar in the top header. Clicking the avatar displays an elegant dropdown modal containing the logged-in username (routes directly to /dashboard/profile "My Profile") and a fully functional logout trigger.
   • Built a click-outside listener to automatically close the dropdown whenever the user clicks elsewhere.
2. Collapsible Mobile Categories:
   • Redesigned the mobile menu to feature a collapsible categories list. Categories now collapse and expand via a clean plus/minus accordion switch.
3. Always-On Bottom Navigation Bar:
   • Integrated a floating navigation bar that anchors to the bottom of mobile viewports, containing dedicated quick links for Home, Shop, Cart, and Menu.
4. Perfectly Fitted Mobile Forms:
   • Re-styled the Sign-In and Sign-Up viewports. On phone screens, all illustration panels hide automatically, and layout margins shrink so that forms fit the display perfectly without scrolling.
   • Added clean "Back to Home" (← Back to Home) navigational triggers at the bottom of both authentication cards.
5. Touch-Optimized Catalogs:
   • Scaled down the massive home catalog buttons ("Show More") on mobile devices using responsive styling rules (px-6 py-3 md:px-10 md:py-5 text-sm md:text-lg).
   • Redesigned the Hot Deals section to look beautiful and fit small viewports perfectly.

⚡ Core Operations & Architecture

• Centralized Wishlist Management (useWishlist): Built a centralized wishlist synchronization hook to eliminate item duplication, manage local state, and update dynamically in real time.
• Robust Mobile Google Auth: Google Sign-In is optimized for cross-device authentication, supporting asynchronous user registration updates to MongoDB upon auth state updates.
• Stripe & SSLCommerz Checkouts: Complete payment checkout workflows supporting international credit cards (Stripe) and local electronic payment cards (SSLCommerz).
• User Dashboard Operations: Implemented account profile photo uploads (via ImgBB API integrations) and secure user password update modules.

---

👥 Dashboard Access

Feature	Regular User	System Admin
View products & categories	✅	✅
Manage Shopping Cart & Wishlist	✅	❌
Checkout with Stripe / SSLCommerz	✅	❌
Manage catalogs & products	❌	✅
View detailed dashboard analytics	❌	✅
Manage users & subscriber lists	❌	✅

---

🧪 Tech Stack

Frontend Framework:  React • Vite
Auth & Security:     Firebase Authentication • JWT Client Storage
Styling Engine:      Tailwind CSS • Vanilla CSS Custom Overrides
Icons & Assets:      Lucide React • Swiper sliders
Backend (API):       Node.js • Express.js • MongoDB

---

🚀 Getting Started

1. Clone the repository:

   git clone https://github.com/tuhin360/techzy.git
   cd techzy-client

2. Install dependencies:

   pnpm install

3. Create a .env.local configuration file:

   VITE_API_KEY=yourFirebaseApiKey
   VITE_AUTH_DOMAIN=yourFirebaseAuthDomain
   VITE_PROJECT_ID=yourFirebaseProjectId
   VITE_STORAGE_BUCKET=yourFirebaseStorageBucket
   VITE_MESSAGING_SENDER_ID=yourFirebaseMessagingSenderId
   VITE_APP_ID=yourFirebaseAppId
   VITE_API_URL=http://localhost:5000

4. Start the development server:

   pnpm dev

   Open http://localhost:5173 in your browser.