Building a Scalable Virtual Shopping Mall with Next.js, NestJS, Prisma, and Stripe Integration

my-virtual-mall/
├── app/                   # App Router specific folder
│   ├── (store)/           # Grouping route for store-related pages
│   │   ├── [storeId]/     # Dynamic route for individual stores
│   │   │   ├── page.tsx   # Store details page
│   │   │   ├── layout.tsx # Layout for store-specific pages
│   │   │   ├── product/   # Nested route for individual product details
│   │   │   │   ├── [productId]/
│   │   │   │   │   └── page.tsx  # Product details page
│   │   └── page.tsx       # Store listing page (browse all stores)
│   ├── cart/
│   │   ├── page.tsx       # Shopping cart page
│   ├── wishlist/
│   │   ├── page.tsx       # Wishlist page
│   ├── checkout/
│   │   ├── page.tsx       # Checkout page
│   ├── profile/           # User profile management
│   │   ├── page.tsx       # Profile main page
│   ├── auth/              # Authentication routes (login, signup)
│   │   ├── login/
│   │   │   └── page.tsx   # Login page
│   │   ├── signup/
│   │   │   └── page.tsx   # Signup page
│   ├── layout.tsx         # Global layout (header, footer)
│   ├── page.tsx           # Home page (3D mall interface)
│   └── error.tsx          # Global error page
├── components/            # Reusable components
│   ├── Header.tsx         # Header component
│   ├── Footer.tsx         # Footer component
│   ├── ProductCard.tsx    # Product card component (used in lists)
│   ├── StoreCard.tsx      # Store card component (used in store list)
│   ├── CartItem.tsx       # Cart item component (used in cart)
│   └── WishlistItem.tsx   # Wishlist item component (used in wishlist)
├── styles/                # Global and component-specific styles
│   ├── globals.css        # Global CSS (importing Tailwind styles)
│   └── components.css     # Styles for specific components
├── lib/                   # Utility functions and hooks
│   ├── fetcher.ts         # Helper for fetching data (with SWR or Fetch API)
│   ├── auth.ts            # Authentication-related helpers (JWT, cookies)
│   └── prisma.ts          # Prisma client (if needed on the frontend)
├── public/                # Public assets (images, videos, fonts)
│   ├── images/
│   │   └── logo.png       # Example logo
├── prisma/                # Prisma schema (optional if using Prisma on frontend)
│   └── schema.prisma      # Prisma schema definition
├── middleware.ts          # Middleware for handling redirects, authentication
├── tailwind.config.js     # Tailwind CSS configuration
├── postcss.config.js      # PostCSS configuration (used by Tailwind)
├── tsconfig.json          # TypeScript configuration
├── next.config.js         # Next.js configuration
├── package.json           # Dependencies and scripts
└── README.md              # Project documentation

my-virtual-mall-backend/
├── src/
│   ├── auth/                   # Authentication and Authorization logic
│   │   ├── dto/                # Data Transfer Objects (DTOs) for validation
│   │   │   ├── login.dto.ts
│   │   │   ├── signup.dto.ts
│   │   ├── auth.controller.ts  # Controller for auth endpoints
│   │   ├── auth.module.ts      # NestJS Module for auth
│   │   ├── auth.service.ts     # Service for authentication logic
│   │   ├── jwt.strategy.ts     # JWT Strategy for securing routes
│   │   ├── local.strategy.ts   # Local Strategy for login
│   │   └── auth.guard.ts       # Guards for protecting routes (e.g., RolesGuard)
│   ├── users/                  # User-related logic
│   │   ├── dto/                # DTOs for user validation
│   │   │   ├── create-user.dto.ts
│   │   │   ├── update-user.dto.ts
│   │   ├── users.controller.ts # Controller for user endpoints
│   │   ├── users.module.ts     # Users module
│   │   ├── users.service.ts    # Service for user-related logic
│   │   ├── users.entity.ts     # User entity definition (Prisma or TypeORM)
│   ├── products/               # Product management
│   │   ├── dto/                # DTOs for product validation
│   │   │   ├── create-product.dto.ts
│   │   │   ├── update-product.dto.ts
│   │   ├── products.controller.ts # Controller for product-related endpoints
│   │   ├── products.module.ts  # Products module
│   │   ├── products.service.ts # Service for product-related logic
│   │   ├── product.entity.ts   # Product entity definition (Prisma or TypeORM)
│   ├── stores/                 # Store management logic
│   │   ├── dto/                # DTOs for store validation
│   │   │   ├── create-store.dto.ts
│   │   │   ├── update-store.dto.ts
│   │   ├── stores.controller.ts # Controller for store-related endpoints
│   │   ├── stores.module.ts    # Stores module
│   │   ├── stores.service.ts   # Service for store-related logic
│   │   ├── store.entity.ts     # Store entity definition (Prisma or TypeORM)
│   ├── cart/                   # Shopping cart management
│   │   ├── dto/                # DTOs for cart validation
│   │   │   ├── add-to-cart.dto.ts
│   │   ├── cart.controller.ts  # Controller for cart management
│   │   ├── cart.module.ts      # Cart module
│   │   ├── cart.service.ts     # Cart service logic
│   │   ├── cart.entity.ts      # Cart entity definition
│   ├── orders/                 # Order processing and management
│   │   ├── dto/                # DTOs for order validation
│   │   │   ├── create-order.dto.ts
│   │   ├── orders.controller.ts # Controller for order-related endpoints
│   │   ├── orders.module.ts    # Orders module
│   │   ├── orders.service.ts   # Service for order-related logic
│   │   ├── order.entity.ts     # Order entity definition
│   ├── payments/               # Payment processing logic
│   │   ├── dto/                # DTOs for payments
│   │   ├── payments.controller.ts # Payment endpoints
│   │   ├── payments.module.ts  # Payment module
│   │   ├── payments.service.ts # Payment service logic (Stripe integration, etc.)
│   │   ├── payment.entity.ts   # Payment entity definition
│   ├── notifications/          # Notifications (Push, Email, SMS)
│   │   ├── notifications.module.ts # Notification module
│   │   ├── notifications.service.ts # Service for sending notifications
│   ├── prisma/                 # Prisma-related configuration and schema
│   │   ├── prisma.service.ts   # Prisma client service
│   │   └── schema.prisma       # Prisma schema definition
│   ├── common/                 # Common utilities and guards
│   │   ├── decorators/         # Custom decorators (e.g., Role-based access)
│   │   ├── guards/             # Global guards (e.g., AuthGuard, RoleGuard)
│   │   ├── pipes/              # Custom pipes for validation/transformation
│   │   └── filters/            # Exception filters (e.g., HttpExceptionFilter)
│   ├── app.module.ts           # Root module
│   ├── main.ts                 # Entry point for the application
├── config/                     # Configurations (for env variables, database, etc.)
│   ├── app.config.ts           # General app configuration
│   ├── database.config.ts      # Database connection configuration (PostgreSQL)
│   └── jwt.config.ts           # JWT configuration (secret, expiration)
├── test/                       # Test files for unit and integration tests
│   ├── auth.service.spec.ts    # Unit test for auth service
│   └── users.service.spec.ts   # Unit test for user service
├── node_modules/               # External libraries and dependencies
├── .env                        # Environment variables (DB credentials, JWT secret)
├── .eslintrc.js                # ESLint configuration
├── .prettierrc                 # Prettier configuration for code formatting
├── nest-cli.json               # NestJS CLI configuration
├── package.json                # Dependencies and scripts
├── tsconfig.json               # TypeScript configuration
└── README.md                   # Project documentation

// app/(store)/[storeId]/page.tsx
import { use } from 'react';
import { useRouter } from 'next/router';

interface Product {
  id: string;
  name: string;
  price: number;
  image: string;
}

interface Store {
  id: string;
  name: string;
  description: string;
  products: Product[];
}

const fetchStoreData = async (storeId: string): Promise<Store> => {
  const res = await fetch(`/api/stores/${storeId}`);
  if (!res.ok) {
    throw new Error('Failed to fetch store data');
  }
  return res.json();
};

const StorePage = () => {
  const router = useRouter();
  const { storeId } = router.query;

  // Fetching store data
  const storeData = use(() => fetchStoreData(storeId as string));

  if (!storeData) return <p>Loading...</p>;

  return (
    <div className="container mx-auto p-4">
      <h1 className="text-3xl font-bold mb-4">{storeData.name}</h1>
      <p className="mb-4">{storeData.description}</p>

      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
        {storeData.products.map((product) => (
          <a key={product.id} href={`/store/${storeId}/product/${product.id}`} className="block border rounded-lg p-4 hover:shadow-lg">
            <img src={product.image} alt={product.name} className="w-full h-48 object-cover rounded-lg mb-2" />
            <h2 className="text-xl font-semibold">{product.name}</h2>
            <p className="text-lg text-gray-500">${product.price.toFixed(2)}</p>
          </a>
        ))}
      </div>
    </div>
  );
};

export default StorePage;

// app/(store)/[storeId]/layout.tsx
export default function StoreLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <div>
      <header className="bg-gray-800 text-white p-4">
        <nav className="container mx-auto">
          <a href="/" className="text-2xl font-bold">Virtual Mall</a>
        </nav>
      </header>
      <main className="container mx-auto py-6">
        {children}
      </main>
      <footer className="bg-gray-800 text-white p-4 mt-6">
        <p className="text-center">&copy; 2024 Virtual Mall</p>
      </footer>
    </div>
  );
}

// app/(store)/[storeId]/product/[productId]/page.tsx
import { use } from 'react';
import { useRouter } from 'next/router';

interface Product {
  id: string;
  name: string;
  price: number;
  description: string;
  image: string;
}

const fetchProductData = async (storeId: string, productId: string): Promise<Product> => {
  const res = await fetch(`/api/stores/${storeId}/products/${productId}`);
  if (!res.ok) {
    throw new Error('Failed to fetch product data');
  }
  return res.json();
};

const ProductPage = () => {
  const router = useRouter();
  const { storeId, productId } = router.query;

  const productData = use(() => fetchProductData(storeId as string, productId as string));

  if (!productData) return <p>Loading...</p>;

  return (
    <div className="container mx-auto p-4">
      <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
        <img src={productData.image} alt={productData.name} className="w-full h-96 object-cover rounded-lg" />
        <div>
          <h1 className="text-4xl font-bold mb-4">{productData.name}</h1>
          <p className="text-2xl text-gray-500 mb-4">${productData.price.toFixed(2)}</p>
          <p className="text-lg">{productData.description}</p>
          <button className="bg-blue-500 text-white mt-6 py-2 px-4 rounded-lg hover:bg-blue-600">
            Add to Cart
          </button>
        </div>
      </div>
    </div>
  );
};

export default ProductPage;

// app/(store)/page.tsx
import { use } from 'react';

interface Store {
  id: string;
  name: string;
  description: string;
  image: string;
}

const fetchStores = async (): Promise<Store[]> => {
  const res = await fetch('/api/stores');
  if (!res.ok) {
    throw new Error('Failed to fetch stores');
  }
  return res.json();
};

const StoreListPage = () => {
  const stores = use(() => fetchStores());

  if (!stores) return <p>Loading...</p>;

  return (
    <div className="container mx-auto p-4">
      <h1 className="text-3xl font-bold mb-4">Browse Stores</h1>
      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
        {stores.map((store) => (
          <a key={store.id} href={`/store/${store.id}`} className="block border rounded-lg p-4 hover:shadow-lg">
            <img src={store.image} alt={store.name} className="w-full h-48 object-cover rounded-lg mb-2" />
            <h2 className="text-xl font-semibold">{store.name}</h2>
            <p className="text-gray-500">{store.description}</p>
          </a>
        ))}
      </div>
    </div>
  );
};

export default StoreListPage;

// app/cart/page.tsx
import { use } from 'react';

interface CartItem {
  id: string;
  name: string;
  price: number;
  quantity: number;
  image: string;
}

const fetchCartItems = async (): Promise<CartItem[]> => {
  const res = await fetch('/api/cart');
  if (!res.ok) {
    throw new Error('Failed to fetch cart items');
  }
  return res.json();
};

const CartPage = () => {
  const cartItems = use(fetchCartItems);

  if (!cartItems || cartItems.length === 0) {
    return <p>Your cart is empty</p>;
  }

  const total = cartItems.reduce((acc, item) => acc + item.price * item.quantity, 0);

  return (
    <div className="container mx-auto p-4">
      <h1 className="text-3xl font-bold mb-4">Shopping Cart</h1>
      <div className="grid grid-cols-1 gap-4">
        {cartItems.map((item) => (
          <div key={item.id} className="flex items-center border-b pb-4">
            <img src={item.image} alt={item.name} className="w-24 h-24 object-cover rounded-lg" />
            <div className="ml-4">
              <h2 className="text-xl font-semibold">{item.name}</h2>
              <p className="text-gray-500">${item.price.toFixed(2)} x {item.quantity}</p>
            </div>
          </div>
        ))}
      </div>
      <div className="mt-6">
        <h2 className="text-2xl font-semibold">Total: ${total.toFixed(2)}</h2>
        <button className="bg-green-500 text-white py-2 px-4 rounded-lg mt-4 hover:bg-green-600">
          Proceed to Checkout
        </button>
      </div>
    </div>
  );
};

export default CartPage;

# Install Tailwind CSS
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

module.exports = {
  content: [
    './app/**/*.{js,ts,jsx,tsx}', 
    './components/**/*.{js,ts,jsx,tsx}',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

// app/cart/page.tsx
import { use } from 'react';

interface CartItem {
  id: string;
  name: string;
  price: number;
  quantity: number;
  image: string;
}

const fetchCartItems = async (): Promise<CartItem[]> => {
  const res = await fetch('/api/cart');
  if (!res.ok) {
    throw new Error('Failed to fetch cart items');
  }
  return res.json();
};

const CartPage = () => {
  const cartItems = use(fetchCartItems);

  if (!cartItems || cartItems.length === 0) {
    return <p>Your cart is empty</p>;
  }

  const total = cartItems.reduce((acc, item) => acc + item.price * item.quantity, 0);

  return (
    <div className="container mx-auto p-4">
      <h1 className="text-3xl font-bold mb-4">Shopping Cart</h1>
      <div className="grid grid-cols-1 gap-4">
        {cartItems.map((item) => (
          <div key={item.id} className="flex items-center border-b pb-4">
            <img src={item.image} alt={item.name} className="w-24 h-24 object-cover rounded-lg" />
            <div className="ml-4">
              <h2 className="text-xl font-semibold">{item.name}</h2>
              <p className="text-gray-500">${item.price.toFixed(2)} x {item.quantity}</p>
            </div>
          </div>
        ))}
      </div>
      <div className="mt-6">
        <h2 className="text-2xl font-semibold">Total: ${total.toFixed(2)}</h2>
        <button className="bg-green-500 text-white py-2 px-4 rounded-lg mt-4 hover:bg-green-600">
          Proceed to Checkout
        </button>
      </div>
    </div>
  );
};

export default CartPage;

// app/wishlist/page.tsx
import { use } from 'react';

interface WishlistItem {
  id: string;
  name: string;
  price: number;
  image: string;
}

const fetchWishlistItems = async (): Promise<WishlistItem[]> => {
  const res = await fetch('/api/wishlist');
  if (!res.ok) {
    throw new Error('Failed to fetch wishlist items');
  }
  return res.json();
};

const WishlistPage = () => {
  const wishlistItems = use(fetchWishlistItems);

  if (!wishlistItems || wishlistItems.length === 0) {
    return <p>Your wishlist is empty</p>;
  }

  return (
    <div className="container mx-auto p-4">
      <h1 className="text-3xl font-bold mb-4">Wishlist</h1>
      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
        {wishlistItems.map((item) => (
          <div key={item.id} className="block border rounded-lg p-4 hover:shadow-lg">
            <img src={item.image} alt={item.name} className="w-full h-48 object-cover rounded-lg mb-2" />
            <h2 className="text-xl font-semibold">{item.name}</h2>
            <p className="text-lg text-gray-500">${item.price.toFixed(2)}</p>
          </div>
        ))}
      </div>
    </div>
  );
};

export default WishlistPage;

// app/checkout/page.tsx
import { use } from 'react';

interface CartItem {
  id: string;
  name: string;
  price: number;
  quantity: number;
  image: string;
}

const fetchCartItems = async (): Promise<CartItem[]> => {
  const res = await fetch('/api/cart');
  if (!res.ok) {
    throw new Error('Failed to fetch cart items');
  }
  return res.json();
};

const CheckoutPage = () => {
  const cartItems = use(fetchCartItems);

  if (!cartItems || cartItems.length === 0) {
    return <p>No items in cart to checkout</p>;
  }

  const total = cartItems.reduce((acc, item) => acc + item.price * item.quantity, 0);

  return (
    <div className="container mx-auto p-4">
      <h1 className="text-3xl font-bold mb-4">Checkout</h1>
      <div className="grid grid-cols-1 gap-4">
        {cartItems.map((item) => (
          <div key={item.id} className="flex items-center border-b pb-4">
            <img src={item.image} alt={item.name} className="w-24 h-24 object-cover rounded-lg" />
            <div className="ml-4">
              <h2 className="text-xl font-semibold">{item.name}</h2>
              <p className="text-gray-500">${item.price.toFixed(2)} x {item.quantity}</p>
            </div>
          </div>
        ))}
      </div>
      <div className="mt-6">
        <h2 className="text-2xl font-semibold">Total: ${total.toFixed(2)}</h2>
        <button className="bg-green-500 text-white py-2 px-4 rounded-lg mt-4 hover:bg-green-600">
          Confirm Payment
        </button>
      </div>
    </div>
  );
};

export default CheckoutPage;

// app/profile/page.tsx
import { use } from 'react';

interface UserProfile {
  name: string;
  email: string;
  address: string;
}

const fetchProfile = async (): Promise<UserProfile> => {
  const res = await fetch('/api/profile');
  if (!res.ok) {
    throw new Error('Failed to fetch profile data');
  }
  return res.json();
};

const ProfilePage = () => {
  const profile = use(fetchProfile);

  if (!profile) return <p>Loading...</p>;

  return (
    <div className="container mx-auto p-4">
      <h1 className="text-3xl font-bold mb-4">Profile</h1>
      <div className="bg-white p-6 rounded-lg shadow-md">
        <p className="text-lg"><strong>Name:</strong> {profile.name}</p>
        <p className="text-lg"><strong>Email:</strong> {profile.email}</p>
        <p className="text-lg"><strong>Address:</strong> {profile.address}</p>
        <button className="bg-blue-500 text-white py-2 px-4 rounded-lg mt-4 hover:bg-blue-600">
          Edit Profile
        </button>
      </div>
    </div>
  );
};

export default ProfilePage;

// app/auth/login/page.tsx
import { useState } from 'react';

const LoginPage = () => {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

  const handleLogin = async () => {
    const res = await fetch('/api/auth/login', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ email, password }),
    });

    if (res.ok) {
      // Handle successful login
      alert('Logged in successfully!');
    } else {
      // Handle login failure
      alert('Failed to login');
    }
  };

  return (
    <div className="container mx-auto p-4">
      <h1 className="text-3xl font-bold mb-4">Login</h1>
      <div className="bg-white p-6 rounded-lg shadow-md max-w-md mx-auto">
        <input
          type="email"
          placeholder="Email"
          className="w-full border p-2 mb-4 rounded-lg"
          value={email}
          onChange={(e) => setEmail(e.target.value)}
        />
        <input
          type="password"
          placeholder="Password"
          className="w-full border p-2 mb-4 rounded-lg"
          value={password}
          onChange={(e) => setPassword(e.target.value)}
        />
        <button
          className="bg-blue-500 text-white py-2 px-4 rounded-lg w-full hover:bg-blue-600"


          onClick={handleLogin}
        >
          Login
        </button>
      </div>
    </div>
  );
};

export default LoginPage;

// app/auth/signup/page.tsx
import { useState } from 'react';

const SignupPage = () => {
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

  const handleSignup = async () => {
    const res = await fetch('/api/auth/signup', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ name, email, password }),
    });

    if (res.ok) {
      // Handle successful signup
      alert('Account created successfully!');
    } else {
      // Handle signup failure
      alert('Failed to create account');
    }
  };

  return (
    <div className="container mx-auto p-4">
      <h1 className="text-3xl font-bold mb-4">Sign Up</h1>
      <div className="bg-white p-6 rounded-lg shadow-md max-w-md mx-auto">
        <input
          type="text"
          placeholder="Name"
          className="w-full border p-2 mb-4 rounded-lg"
          value={name}
          onChange={(e) => setName(e.target.value)}
        />
        <input
          type="email"
          placeholder="Email"
          className="w-full border p-2 mb-4 rounded-lg"
          value={email}
          onChange={(e) => setEmail(e.target.value)}
        />
        <input
          type="password"
          placeholder="Password"
          className="w-full border p-2 mb-4 rounded-lg"
          value={password}
          onChange={(e) => setPassword(e.target.value)}
        />
        <button
          className="bg-green-500 text-white py-2 px-4 rounded-lg w-full hover:bg-green-600"
          onClick={handleSignup}
        >
          Sign Up
        </button>
      </div>
    </div>
  );
};

export default SignupPage;

# Install Tailwind CSS and initialize the config file
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

module.exports = {
  content: [
    './app/**/*.{js,ts,jsx,tsx}', 
    './components/**/*.{js,ts,jsx,tsx}',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

// app/layout.tsx
import Header from '../components/Header';
import Footer from '../components/Footer';
import '../styles/globals.css';

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body className="bg-gray-100">
        <Header />
        <main className="container mx-auto py-8">
          {children}
        </main>
        <Footer />
      </body>
    </html>
  );
}

// app/page.tsx
import React, { useEffect } from 'react';
import { Canvas } from '@react-three/fiber';
import { OrbitControls } from '@react-three/drei';

const MallScene = () => {
  // You can add custom 3D objects here using Three.js or react-three/fiber
  return (
    <mesh>
      <boxGeometry args={[3, 3, 3]} />
      <meshStandardMaterial color="lightblue" />
    </mesh>
  );
};

const HomePage = () => {
  return (
    <div className="flex flex-col items-center justify-center min-h-screen">
      <h1 className="text-4xl font-bold mb-6">Welcome to the Virtual Mall</h1>
      <div className="w-full h-96">
        <Canvas>
          <ambientLight />
          <pointLight position={[10, 10, 10]} />
          <MallScene />
          <OrbitControls />
        </Canvas>
      </div>
    </div>
  );
};

export default HomePage;

npm install @react-three/fiber @react-three/drei

// app/error.tsx
const ErrorPage = () => {
  return (
    <div className="flex items-center justify-center min-h-screen bg-red-100">
      <h1 className="text-5xl font-bold text-red-600">Oops! Something went wrong.</h1>
    </div>
  );
};

export default ErrorPage;

// components/Header.tsx
const Header = () => {
  return (
    <header className="bg-blue-600 text-white p-4 shadow-lg">
      <div className="container mx-auto flex justify-between items-center">
        <h1 className="text-2xl font-bold">Virtual Mall</h1>
        <nav>
          <a href="/" className="mr-4 hover:underline">Home</a>
          <a href="/cart" className="mr-4 hover:underline">Cart</a>
          <a href="/wishlist" className="mr-4 hover:underline">Wishlist</a>
          <a href="/profile" className="hover:underline">Profile</a>
        </nav>
      </div>
    </header>
  );
};

export default Header;

// components/Footer.tsx
const Footer = () => {
  return (
    <footer className="bg-gray-800 text-white p-4">
      <div className="container mx-auto text-center">
        <p>&copy; {new Date().getFullYear()} Virtual Mall. All rights reserved.</p>
      </div>
    </footer>
  );
};

export default Footer;

// components/ProductCard.tsx
interface ProductProps {
  id: string;
  name: string;
  price: number;
  image: string;
}

const ProductCard: React.FC<ProductProps> = ({ id, name, price, image }) => {
  return (
    <div className="border p-4 rounded-lg hover:shadow-lg">
      <img src={image} alt={name} className="w-full h-48 object-cover rounded-lg mb-2" />
      <h2 className="text-lg font-bold">{name}</h2>
      <p className="text-gray-500">${price.toFixed(2)}</p>
      <a href={`/product/${id}`} className="text-blue-500 hover:underline mt-2 block">View Details</a>
    </div>
  );
};

export default ProductCard;

// components/StoreCard.tsx
interface StoreProps {
  id: string;
  name: string;
  description: string;
  image: string;
}

const StoreCard: React.FC<StoreProps> = ({ id, name, description, image }) => {
  return (
    <div className="border p-4 rounded-lg hover:shadow-lg">
      <img src={image} alt={name} className="w-full h-48 object-cover rounded-lg mb-2" />
      <h2 className="text-lg font-bold">{name}</h2>
      <p className="text-gray-500">{description}</p>
      <a href={`/store/${id}`} className="text-blue-500 hover:underline mt-2 block">Visit Store</a>
    </div>
  );
};

export default StoreCard;

// components/CartItem.tsx
interface CartItemProps {
  id: string;
  name: string;
  price: number;
  quantity: number;
  image: string;
}

const CartItem: React.FC<CartItemProps> = ({ id, name, price, quantity, image }) => {
  return (
    <div className="flex items-center border-b py-4">
      <img src={image} alt={name} className="w-24 h-24 object-cover rounded-lg" />
      <div className="ml-4">
        <h2 className="text-xl font-semibold">{name}</h2>
        <p className="text-gray-500">${price.toFixed(2)} x {quantity}</p>
      </div>
    </div>
  );
};

export default CartItem;

// components/WishlistItem.tsx
interface WishlistItemProps {
  id: string;
  name: string;
  price: number;
  image: string;
}

const WishlistItem: React.FC<WishlistItemProps> = ({ id, name, price, image }) => {
  return (
    <div className="border p-4 rounded-lg hover:shadow-lg">
      <img src={image} alt={name} className="w-full h-48 object-cover rounded-lg mb-2" />
      <h2 className="text-lg font-bold">{name}</h2>
      <p className="text-gray-500">${price.toFixed(2)}</p>
      <a href={`/product/${id}`} className="text-blue-500 hover:underline mt-2 block">View Details</a>
    </div>
  );
};

export default WishlistItem;

/* styles/globals.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

body {
  @apply font-sans;
}

/* styles/components.css */
/* Add custom styles for components if needed */

// lib/fetcher.ts
export const fetcher = (url: string) => fetch(url).then((res) => res.json());

// lib/auth.ts
export const setToken = (token: string) => {
  document.cookie =

 `token=${token}; path=/`;
};

export const getToken = () => {
  const cookie = document.cookie
    .split('; ')
    .find((row) => row.startsWith('token='));
  return cookie ? cookie.split('=')[1] : null;
};

export const removeToken = () => {
  document.cookie = 'token=; Max-Age=-99999999;';
};

// lib/prisma.ts
import { PrismaClient } from '@prisma/client';

const globalForPrisma = global as unknown as { prisma: PrismaClient };

export const prisma = globalForPrisma.prisma || new PrismaClient();

if (process.env.NODE_ENV !== 'production') globalForPrisma.prisma = prisma;

// src/auth/dto/login.dto.ts
import { IsEmail, IsString } from 'class-validator';

export class LoginDto {
  @IsEmail()
  email: string;

  @IsString()
  password: string;
}

// src/auth/dto/signup.dto.ts
import { IsEmail, IsString, MinLength } from 'class-validator';

export class SignupDto {
  @IsString()
  name: string;

  @IsEmail()
  email: string;

  @IsString()
  @MinLength(6)
  password: string;
}

// src/auth/auth.controller.ts
import { Controller, Post, Body, HttpCode, HttpStatus } from '@nestjs/common';
import { AuthService } from './auth.service';
import { LoginDto } from './dto/login.dto';
import { SignupDto } from './dto/signup.dto';

@Controller('auth')
export class AuthController {
  constructor(private readonly authService: AuthService) {}

  @Post('login')
  @HttpCode(HttpStatus.OK)
  async login(@Body() loginDto: LoginDto) {
    return this.authService.login(loginDto);
  }

  @Post('signup')
  async signup(@Body() signupDto: SignupDto) {
    return this.authService.signup(signupDto);
  }
}

// src/auth/auth.module.ts
import { Module } from '@nestjs/common';
import { AuthService } from './auth.service';
import { AuthController } from './auth.controller';
import { UsersModule } from '../users/users.module';
import { JwtModule } from '@nestjs/jwt';
import { PassportModule } from '@nestjs/passport';
import { JwtStrategy } from './jwt.strategy';
import { LocalStrategy } from './local.strategy';

@Module({
  imports: [
    UsersModule,
    PassportModule,
    JwtModule.register({
      secret: process.env.JWT_SECRET || 'default_secret',
      signOptions: { expiresIn: '60m' },
    }),
  ],
  controllers: [AuthController],
  providers: [AuthService, JwtStrategy, LocalStrategy],
})
export class AuthModule {}

// src/auth/auth.service.ts
import { Injectable, UnauthorizedException } from '@nestjs/common';
import { JwtService } from '@nestjs/jwt';
import { UsersService } from '../users/users.service';
import { LoginDto } from './dto/login.dto';
import { SignupDto } from './dto/signup.dto';
import * as bcrypt from 'bcrypt';

@Injectable()
export class AuthService {
  constructor(
    private readonly usersService: UsersService,
    private readonly jwtService: JwtService,
  ) {}

  async validateUser(email: string, password: string): Promise<any> {
    const user = await this.usersService.findByEmail(email);
    if (user && (await bcrypt.compare(password, user.password))) {
      return user;
    }
    return null;
  }

  async login(loginDto: LoginDto) {
    const user = await this.usersService.findByEmail(loginDto.email);
    if (!user || !(await bcrypt.compare(loginDto.password, user.password))) {
      throw new UnauthorizedException('Invalid credentials');
    }

    const payload = { sub: user.id, email: user.email };
    return {
      access_token: this.jwtService.sign(payload),
    };
  }

  async signup(signupDto: SignupDto) {
    const hashedPassword = await bcrypt.hash(signupDto.password, 10);
    const user = await this.usersService.create({
      ...signupDto,
      password: hashedPassword,
    });
    const payload = { sub: user.id, email: user.email };
    return {
      access_token: this.jwtService.sign(payload),
    };
  }
}

// src/auth/jwt.strategy.ts
import { Injectable } from '@nestjs/common';
import { PassportStrategy } from '@nestjs/passport';
import { ExtractJwt, Strategy } from 'passport-jwt';

@Injectable()
export class JwtStrategy extends PassportStrategy(Strategy) {
  constructor() {
    super({
      jwtFromRequest: ExtractJwt.fromAuthHeaderAsBearerToken(),
      ignoreExpiration: false,
      secretOrKey: process.env.JWT_SECRET || 'default_secret',
    });
  }

  async validate(payload: any) {
    return { userId: payload.sub, email: payload.email };
  }
}

// src/auth/local.strategy.ts
import { Injectable, UnauthorizedException } from '@nestjs/common';
import { PassportStrategy } from '@nestjs/passport';
import { Strategy } from 'passport-local';
import { AuthService } from './auth.service';

@Injectable()
export class LocalStrategy extends PassportStrategy(Strategy) {
  constructor(private authService: AuthService) {
    super({ usernameField: 'email' });
  }

  async validate(email: string, password: string): Promise<any> {
    const user = await this.authService.validateUser(email, password);
    if (!user) {
      throw new UnauthorizedException();
    }
    return user;
  }
}

// src/auth/auth.guard.ts
import { Injectable } from '@nestjs/common';
import { AuthGuard } from '@nestjs/passport';

@Injectable()
export class JwtAuthGuard extends AuthGuard('jwt') {}

// src/users/dto/create-user.dto.ts
import { IsEmail, IsString, MinLength } from 'class-validator';

export class CreateUserDto {
  @IsString()
  name: string;

  @IsEmail()
  email: string;

  @IsString()
  @MinLength(6)
  password: string;
}

// src/users/dto/update-user.dto.ts
import { IsEmail, IsOptional, IsString, MinLength } from 'class-validator';

export class UpdateUserDto {
  @IsString()
  @IsOptional()
  name?: string;

  @IsEmail()
  @IsOptional()
  email?: string;

  @IsString()
  @MinLength(6)
  @IsOptional()
  password?: string;
}

// src/users/users.controller.ts
import { Controller, Get, Param, Patch, Body, UseGuards } from '@nestjs/common';
import { UsersService } from './users.service';
import { UpdateUserDto } from './dto/update-user.dto';
import { JwtAuthGuard } from '../auth/auth.guard';

@Controller('users')
export class UsersController {
  constructor(private readonly usersService: UsersService) {}

  @UseGuards(JwtAuthGuard)
  @Get(':id')
  async getUserById(@Param('id') id: string) {
    return this.usersService.findById(id);
  }

  @UseGuards(JwtAuthGuard)
  @Patch(':id')
  async updateUser(@Param('id') id: string, @Body() updateUserDto: UpdateUserDto) {
    return this.usersService.update(id, updateUserDto);
  }
}

// src/users/users.module.ts
import { Module } from '@nestjs/common';
import { UsersService } from './users.service';
import { UsersController } from './users.controller';
import { PrismaService } from '../prisma/prisma.service';

@Module({
  providers: [UsersService, PrismaService],
  controllers: [UsersController],
  exports: [UsersService],
})
export class UsersModule {}

// src/users/users.service.ts
import { Injectable } from '@nestjs/common';
import { PrismaService } from '../prisma/prisma.service';
import { CreateUserDto } from './dto/create-user.dto';
import { UpdateUserDto } from './dto/update-user.dto';

@Injectable()
export class UsersService {
  constructor(private prisma: PrismaService) {}

  async create(data: CreateUserDto) {
    return this.prisma.user

.create({ data });
  }

  async findById(id: string) {
    return this.prisma.user.findUnique({ where: { id } });
  }

  async findByEmail(email: string) {
    return this.prisma.user.findUnique({ where: { email } });
  }

  async update(id: string, data: UpdateUserDto) {
    return this.prisma.user.update({
      where: { id },
      data,
    });
  }
}

// schema.prisma
model User {
  id       String  @id @default(uuid())
  name     String
  email    String  @unique
  password String
  createdAt DateTime @default(now())
}

// src/users/users.entity.ts
import { Entity, Column, PrimaryGeneratedColumn, CreateDateColumn } from 'typeorm';

@Entity('users')
export class User {
  @PrimaryGeneratedColumn('uuid')
  id: string;

  @Column()
  name: string;

  @Column({ unique: true })
  email: string;

  @Column()
  password: string;

  @CreateDateColumn()
  createdAt: Date;
}

// src/products/dto/create-product.dto.ts
import { IsString, IsNumber, IsOptional } from 'class-validator';

export class CreateProductDto {
  @IsString()
  name: string;

  @IsString()
  description: string;

  @IsNumber()
  price: number;

  @IsString()
  @IsOptional()
  imageUrl?: string;
}

// src/products/dto/update-product.dto.ts
import { IsString, IsNumber, IsOptional } from 'class-validator';

export class UpdateProductDto {
  @IsString()
  @IsOptional()
  name?: string;

  @IsString()
  @IsOptional()
  description?: string;

  @IsNumber()
  @IsOptional()
  price?: number;

  @IsString()
  @IsOptional()
  imageUrl?: string;
}

// src/products/products.controller.ts
import { Controller, Get, Post, Patch, Param, Body, Delete } from '@nestjs/common';
import { ProductsService } from './products.service';
import { CreateProductDto } from './dto/create-product.dto';
import { UpdateProductDto } from './dto/update-product.dto';

@Controller('products')
export class ProductsController {
  constructor(private readonly productsService: ProductsService) {}

  @Get()
  async getAllProducts() {
    return this.productsService.findAll();
  }

  @Get(':id')
  async getProductById(@Param('id') id: string) {
    return this.productsService.findById(id);
  }

  @Post()
  async createProduct(@Body() createProductDto: CreateProductDto) {
    return this.productsService.create(createProductDto);
  }

  @Patch(':id')
  async updateProduct(
    @Param('id') id: string,
    @Body() updateProductDto: UpdateProductDto,
  ) {
    return this.productsService.update(id, updateProductDto);
  }

  @Delete(':id')
  async deleteProduct(@Param('id') id: string) {
    return this.productsService.delete(id);
  }
}

// src/products/products.module.ts
import { Module } from '@nestjs/common';
import { ProductsService } from './products.service';
import { ProductsController } from './products.controller';
import { PrismaService } from '../prisma/prisma.service';

@Module({
  providers: [ProductsService, PrismaService],
  controllers: [ProductsController],
})
export class ProductsModule {}

// src/products/products.service.ts
import { Injectable } from '@nestjs/common';
import { PrismaService } from '../prisma/prisma.service';
import { CreateProductDto } from './dto/create-product.dto';
import { UpdateProductDto } from './dto/update-product.dto';

@Injectable()
export class ProductsService {
  constructor(private prisma: PrismaService) {}

  async findAll() {
    return this.prisma.product.findMany();
  }

  async findById(id: string) {
    return this.prisma.product.findUnique({ where: { id } });
  }

  async create(data: CreateProductDto) {
    return this.prisma.product.create({ data });
  }

  async update(id: string, data: UpdateProductDto) {
    return this.prisma.product.update({
      where: { id },
      data,
    });
  }

  async delete(id: string) {
    return this.prisma.product.delete({ where: { id } });
  }
}

// schema.prisma
model Product {
  id          String   @id @default(uuid())
  name        String
  description String
  price       Float
  imageUrl    String?
  createdAt   DateTime @default(now())
}

// src/products/product.entity.ts
import { Entity, Column, PrimaryGeneratedColumn, CreateDateColumn } from 'typeorm';

@Entity('products')
export class Product {
  @PrimaryGeneratedColumn('uuid')
  id: string;

  @Column()
  name: string;

  @Column()
  description: string;

  @Column('decimal')
  price: number;

  @Column({ nullable: true })
  imageUrl: string;

  @CreateDateColumn()
  createdAt: Date;
}

// src/stores/dto/create-store.dto.ts
import { IsString, IsOptional, IsUrl } from 'class-validator';

export class CreateStoreDto {
  @IsString()
  name: string;

  @IsString()
  description: string;

  @IsUrl()
  @IsOptional()
  logoUrl?: string;
}

// src/stores/dto/update-store.dto.ts
import { IsString, IsOptional, IsUrl } from 'class-validator';

export class UpdateStoreDto {
  @IsString()
  @IsOptional()
  name?: string;

  @IsString()
  @IsOptional()
  description?: string;

  @IsUrl()
  @IsOptional()
  logoUrl?: string;
}

// src/stores/stores.controller.ts
import { Controller, Get, Post, Patch, Param, Delete, Body } from '@nestjs/common';
import { StoresService } from './stores.service';
import { CreateStoreDto } from './dto/create-store.dto';
import { UpdateStoreDto } from './dto/update-store.dto';

@Controller('stores')
export class StoresController {
  constructor(private readonly storesService: StoresService) {}

  @Get()
  async getAllStores() {
    return this.storesService.findAll();
  }

  @Get(':id')
  async getStoreById(@Param('id') id: string) {
    return this.storesService.findById(id);
  }

  @Post()
  async createStore(@Body() createStoreDto: CreateStoreDto) {
    return this.storesService.create(createStoreDto);
  }

  @Patch(':id')
  async updateStore(@Param('id') id: string, @Body() updateStoreDto: UpdateStoreDto) {
    return this.storesService.update(id, updateStoreDto);
  }

  @Delete(':id')
  async deleteStore(@Param('id') id: string) {
    return this.storesService.delete(id);
  }
}

// src/stores/stores.module.ts
import { Module } from '@nestjs/common';
import { StoresService } from './stores.service';
import { StoresController } from './stores.controller';
import { PrismaService } from '../prisma/prisma.service';

@Module({
  providers: [StoresService, PrismaService],
  controllers: [StoresController],
})
export class StoresModule {}

// src/stores/stores.service.ts
import { Injectable } from '@nestjs/common';
import { PrismaService } from '../prisma/prisma.service';
import { CreateStoreDto } from './dto/create-store.dto';
import { UpdateStoreDto } from './dto/update-store.dto';

@Injectable()
export class StoresService {
  constructor(private readonly prisma: PrismaService) {}

  async findAll() {
    return this.prisma.store.findMany();
  }

  async findById(id: string) {
    return this.prisma.store.findUnique({ where: { id } });
  }

  async create(data: CreateStoreDto) {
    return this.prisma.store.create({ data });
  }

  async update(id: string, data: UpdateStoreDto) {
    return this.prisma.store.update({
      where: { id },
      data,
    });
  }

  async delete(id: string) {
    return this.prisma.store.delete({ where: { id } });
  }
}

// schema.prisma
model Store {
  id          String   @id @default(uuid())
  name        String
  description String
  logoUrl     String?
  createdAt   DateTime @default(now())
}

// src/stores/store.entity.ts
import { Entity, Column, PrimaryGeneratedColumn, CreateDateColumn } from 'typeorm';

@Entity('stores')
export class Store {
  @PrimaryGeneratedColumn('uuid')
  id: string;

  @Column()
  name: string;

  @Column()
  description: string;

  @Column({ nullable: true })
  logoUrl: string;

  @CreateDateColumn()
  createdAt: Date;
}

// src/cart/dto/add-to-cart.dto.ts
import { IsString, IsNumber } from 'class-validator';

export class AddToCartDto {
  @IsString()
  productId: string;

  @IsNumber()
  quantity: number;
}

// src/cart/cart.controller.ts
import { Controller, Get, Post, Patch, Delete, Param, Body } from '@nestjs/common';
import { CartService } from './cart.service';
import { AddToCartDto } from './dto/add-to-cart.dto';

@Controller('cart')
export class CartController {
  constructor(private readonly cartService: CartService) {}

  @Get(':userId')
  async getCart(@Param('userId') userId: string) {
    return this.cartService.findByUserId(userId);
  }

  @Post()
  async addToCart(@Body() addToCartDto: AddToCartDto) {
    return this.cartService.addToCart(addToCartDto);
  }

  @Patch(':userId/:productId')
  async updateCartItem(
    @Param('userId') userId: string,
    @Param('productId') productId: string,
    @Body('quantity') quantity: number,
  ) {
    return this.cartService.updateCartItem(userId, productId, quantity);
  }

  @Delete(':userId/:productId')
  async removeFromCart(@Param('userId') userId: string, @Param('productId') productId: string) {
    return this.cartService.removeFromCart(userId, productId);
  }
}

// src/cart/cart.module.ts
import { Module } from '@nestjs/common';
import { CartService } from './cart.service';
import { CartController } from './cart.controller';
import { PrismaService } from '../prisma/prisma.service';

@Module({
  providers: [CartService, PrismaService],
  controllers: [CartController],
})
export class CartModule {}

// src/cart/cart.service.ts
import { Injectable } from '@nestjs/common';
import { PrismaService } from '../prisma/prisma.service';
import { AddToCartDto } from './dto/add-to-cart.dto';

@Injectable()
export class CartService {
  constructor(private readonly prisma: PrismaService) {}

  async findByUserId(userId: string) {
    return this.prisma.cartItem.findMany({
      where: { userId },
      include: { product: true },
    });
  }

  async addToCart(data: AddToCartDto) {
    return this.prisma.cartItem.create({
      data: {
        productId: data.productId,
        quantity: data.quantity,
        userId: 'some-user-id', // This would typically come from the authenticated user context.
      },
    });
  }

  async updateCartItem(userId: string, productId: string, quantity: number) {
    return this.prisma.cartItem.updateMany({
      where: { userId, productId },
      data: { quantity },
    });
  }

  async removeFromCart(userId: string, productId: string) {
    return this.prisma.cartItem.deleteMany({
      where: { userId, productId },
    });
  }
}