E-Store

A modern, professional e-commerce web app built with React and Material-UI (MUI).

Features

• Beautiful, Responsive UI: Inspired by top e-commerce sites (Apple, Amazon, Shopify)
• Dark/Light Mode: Toggle between dark and light themes
• Modern Navbar: Glassmorphism, animated icons, and search with icon
• Product Grid: Responsive, card-based layout with image zoom and hover effects
• Cart & Checkout:
  • Professional, table-based cart with perfect alignment and modern controls
  • Order summary and payment details in a glassy, centered card
  • Fake credit card preview and payment method selector
  • Animated, gradient "Pay Now" button (demo only)
  • Payment success animation
• Accessibility: Theme-aware colors, keyboard navigation, and mobile-friendly
• Google Analytics Integration: Track user visits and engagement
• Tidio Live Chat Integration: Real-time customer support/chat widget
• SEO-Ready: Semantic HTML, meta tags, and fast performance
• Easy Customization: Swap out images, colors, and branding for your own store

Integrations

• Google Analytics: Integrated for real-time traffic and user behavior tracking. Easily monitor your site's performance and user engagement.
• Tidio Live Chat: Third-party chat widget for instant customer support and engagement. Users can chat with support directly from any page.

Tech Stack

• Frontend: React, Material-UI (MUI v5)
• State Management: React Context API
• Routing: React Router
• Analytics: Google Analytics (gtag.js)
• Chat: Tidio Live Chat

Getting Started

1. Install dependencies:

   npm install

2. Start the development server:

   npm start

3. Open in your browser: Visit http://localhost:3000

Usage

• Browse products, add to cart, and experience a premium checkout flow.
• Toggle dark/light mode from the navbar.
• The payment section is a demo—no real payment is processed.
• Chat with support using the Tidio widget in the bottom right corner.

---

Customization & Extending

• Easily connect to a backend or add AI features (recommendations, chatbots, etc.)
• Swap out images and branding for your own store
• Integrate additional analytics or chat services as needed

---

Docker Containerization

You can run this app in a production-ready Docker container using Nginx.

Build the Docker Image

docker build -t store .

Run the Docker Container

docker run -p 80:80 store

Then open http://localhost in your browser.

• The Dockerfile uses multi-stage builds for optimized image size.
• Static files are served via Nginx for best performance.

---