feat: added the docs page

4 files changed, 1217 insertions, 0 deletions

diff --git a/README.md b/README.md
new file mode 100644
index 0000000..4feb096
--- /dev/null
+++ b/README.md
@@ -0,0 +1,87 @@
+# E-Commerce Clothing Brand Website
+
+A modern e-commerce platform for a clothing brand similar to turntupfashion.com, built with Next.js, Express, and MongoDB.
+
+## Project Overview
+
+This project provides a complete e-commerce solution with the following features:
+- Responsive product catalog with filtering and search
+- User authentication and account management
+- Shopping cart and checkout process
+- Payment processing integration
+- Admin dashboard for product and order management
+- Multi-currency support
+
+## Tech Stack
+
+- **Frontend**: Next.js, React, Tailwind CSS
+- **Backend**: Node.js, Express.js
+- **Database**: MongoDB with Mongoose
+- **Authentication**: JWT
+- **Payment**: Stripe API
+
+## Getting Started
+
+### Prerequisites
+
+- Node.js (v16+)
+- MongoDB
+- Stripe account for payment processing
+
+### Installation
+
+1. Clone the repository
+```bash
+git clone https://github.com/yourusername/ecom.git
+cd ecom
+```
+
+2. Set up the frontend
+```bash
+cd frontend
+npm install
+cp .env.example .env.local
+# Edit .env.local with your environment variables
+```
+
+3. Set up the backend
+```bash
+cd ../backend
+npm install
+cp .env.example .env
+# Edit .env with your environment variables
+```
+
+4. Start development servers
+
+Frontend:
+```bash
+cd frontend
+npm run dev
+```
+
+Backend:
+```bash
+cd backend
+npm run dev
+```
+
+## Project Structure
+
+The project follows a clear separation between frontend and backend:
+
+- `/frontend`: Next.js application with pages, components, and assets
+- `/backend`: Express.js API with controllers, models, and routes
+- `/admin`: Admin dashboard (optional separate application)
+- `/shared`: Shared code and types between frontend and backend
+
+## Documentation
+
+For more detailed documentation, see:
+- [Project Plan](./docs/project-plan.md) - Complete project overview and timeline
+- [Implementation Guide](./docs/implementation.md) - Step-by-step implementation details
+- [Component Structure](./docs/components.md) - Frontend component organization
+
+## License
+
+MIT 
diff --git a/docs/components.md b/docs/components.md
new file mode 100644
index 0000000..5303dc0
--- /dev/null
+++ b/docs/components.md
@@ -0,0 +1,327 @@
+# Frontend Component Structure
+
+This document outlines the component structure for the e-commerce frontend, inspired by turntupfashion.com.
+
+## Core Components
+
+### Layout Components
+
+- `Layout.jsx` - Main layout wrapper with header and footer
+- `Header.jsx` - Site header with navigation, search, and cart
+- `Footer.jsx` - Site footer with links and newsletter signup
+- `MobileMenu.jsx` - Responsive navigation for mobile devices
+- `Breadcrumbs.jsx` - Navigation breadcrumbs component
+
+### Navigation Components
+
+- `MainNav.jsx` - Primary navigation menu
+- `CategoryMenu.jsx` - Category dropdown navigation
+- `CountrySelector.jsx` - Country and currency selector component
+- `PromoBanner.jsx` - Promotional announcement banner (e.g., "A24" discount code)
+
+### Product Components
+
+- `ProductCard.jsx` - Card display for product in listings
+- `ProductGrid.jsx` - Grid layout for product listings
+- `ProductGallery.jsx` - Image gallery for product detail page
+- `ProductDetails.jsx` - Product information display
+- `ProductVariants.jsx` - Size/color selection component
+- `AddToCartButton.jsx` - Button with quantity selector
+
+### Cart Components
+
+- `CartIcon.jsx` - Cart icon with item count indicator
+- `CartDrawer.jsx` - Slide-out cart drawer
+- `CartItem.jsx` - Individual item in cart
+- `CartSummary.jsx` - Order summary with subtotal and discounts
+
+### Checkout Components
+
+- `CheckoutForm.jsx` - Multi-step checkout form
+- `ShippingForm.jsx` - Shipping information form
+- `PaymentForm.jsx` - Payment information with Stripe integration
+- `OrderSummary.jsx` - Order review component
+
+### User Account Components
+
+- `LoginForm.jsx` - User login form
+- `RegisterForm.jsx` - New user registration
+- `AccountDashboard.jsx` - User account overview
+- `OrderHistory.jsx` - Past order display
+
+### UI Components
+
+- `Button.jsx` - Styled button component
+- `Input.jsx` - Form input field
+- `Select.jsx` - Dropdown select component
+- `Modal.jsx` - Popup modal component
+- `Spinner.jsx` - Loading spinner
+- `Toast.jsx` - Notification toast
+
+## Page Structure
+
+### Home Page (`pages/index.js`)
+```jsx
+<Layout>
+  <PromoBanner code="A24" message="Special discount on all items!" />
+  <HeroSection />
+  <FeaturedProducts />
+  <NewArrivals />
+  <CollectionShowcase />
+  <Newsletter />
+</Layout>
+```
+
+### Product Listing Page (`pages/products/index.js`)
+```jsx
+<Layout>
+  <Breadcrumbs />
+  <div className="grid grid-cols-12 gap-6">
+    <div className="col-span-3">
+      <FilterSidebar />
+    </div>
+    <div className="col-span-9">
+      <ProductSorting />
+      <ProductGrid products={products} />
+      <Pagination />
+    </div>
+  </div>
+</Layout>
+```
+
+### Product Detail Page (`pages/products/[slug].js`)
+```jsx
+<Layout>
+  <Breadcrumbs />
+  <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
+    <ProductGallery images={product.images} />
+    <div>
+      <ProductDetails product={product} />
+      <ProductVariants variants={product.variants} />
+      <AddToCartButton product={product} />
+      <ProductTabs tabs={['Description', 'Details', 'Reviews']} />
+    </div>
+  </div>
+  <RelatedProducts products={relatedProducts} />
+</Layout>
+```
+
+### Cart Page (`pages/cart.js`)
+```jsx
+<Layout>
+  <Breadcrumbs />
+  <h1>Your Cart</h1>
+  {cartItems.length > 0 ? (
+    <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
+      <div className="lg:col-span-2">
+        {cartItems.map(item => (
+          <CartItem key={item.id} item={item} />
+        ))}
+      </div>
+      <div>
+        <CartSummary />
+        <PromoCodeInput />
+        <CheckoutButton />
+      </div>
+    </div>
+  ) : (
+    <EmptyCart />
+  )}
+</Layout>
+```
+
+### Checkout Page (`pages/checkout.js`)
+```jsx
+<Layout>
+  <Breadcrumbs />
+  <CheckoutSteps currentStep={currentStep} />
+  <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
+    <div className="lg:col-span-2">
+      {currentStep === 'information' && <ShippingForm />}
+      {currentStep === 'shipping' && <ShippingMethodForm />}
+      {currentStep === 'payment' && <PaymentForm />}
+    </div>
+    <div>
+      <OrderSummary />
+    </div>
+  </div>
+</Layout>
+```
+
+## Component Examples
+
+### Promo Banner Component
+
+```jsx
+// components/PromoBanner.jsx
+import { useState } from 'react';
+
+export default function PromoBanner({ code, message }) {
+  const [isVisible, setIsVisible] = useState(true);
+  
+  if (!isVisible) return null;
+  
+  return (
+    <div className="bg-indigo-600 text-white text-center py-2 px-4 relative">
+      <span>{message} Use code <strong>{code}</strong> at checkout</span>
+      <button 
+        onClick={() => setIsVisible(false)} 
+        className="absolute right-4 top-1/2 transform -translate-y-1/2"
+        aria-label="Dismiss banner"
+      >
+        <svg className="h-4 w-4" viewBox="0 0 20 20" fill="currentColor">
+          <path fillRule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clipRule="evenodd" />
+        </svg>
+      </button>
+    </div>
+  );
+}
+```
+
+### Product Card Component
+
+```jsx
+// components/ProductCard.jsx
+import Image from 'next/image';
+import Link from 'next/link';
+
+export default function ProductCard({ product }) {
+  return (
+    <div className="group">
+      <div className="relative overflow-hidden rounded-lg">
+        <Link href={`/products/${product.slug}`}>
+          <div className="aspect-w-1 aspect-h-1 w-full">
+            <Image 
+              src={product.images[0].url} 
+              alt={product.name}
+              layout="fill"
+              objectFit="cover"
+              className="group-hover:scale-105 transition-transform duration-300"
+            />
+          </div>
+          {product.compareAtPrice && (
+            <span className="absolute top-2 left-2 bg-red-500 text-white px-2 py-1 text-xs font-medium rounded">
+              Sale
+            </span>
+          )}
+        </Link>
+      </div>
+      
+      <div className="mt-4 flex justify-between">
+        <div>
+          <h3 className="text-sm font-medium text-gray-700">
+            <Link href={`/products/${product.slug}`}>
+              {product.name}
+            </Link>
+          </h3>
+        </div>
+        <div>
+          {product.compareAtPrice ? (
+            <div className="flex space-x-2">
+              <span className="text-sm font-medium text-red-600">
+                ${product.price.toFixed(2)}
+              </span>
+              <span className="text-sm text-gray-500 line-through">
+                ${product.compareAtPrice.toFixed(2)}
+              </span>
+            </div>
+          ) : (
+            <span className="text-sm font-medium text-gray-900">
+              ${product.price.toFixed(2)}
+            </span>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
+```
+
+### Add to Cart Button 
+
+```jsx
+// components/AddToCartButton.jsx
+import { useState } from 'react';
+import { useCart } from '@/contexts/CartContext';
+
+export default function AddToCartButton({ product, selectedVariant }) {
+  const [quantity, setQuantity] = useState(1);
+  const { addItem } = useCart();
+  
+  const handleAddToCart = () => {
+    if (!selectedVariant) {
+      // Show error - need to select size/color
+      return;
+    }
+    
+    addItem(product, quantity, selectedVariant);
+    
+    // Show success toast
+  };
+  
+  return (
+    <div className="mt-6">
+      <div className="flex items-center mb-4">
+        <button 
+          onClick={() => setQuantity(Math.max(1, quantity - 1))}
+          className="w-10 h-10 border border-gray-300 flex items-center justify-center"
+        >
+          -
+        </button>
+        <input 
+          type="number" 
+          value={quantity} 
+          onChange={(e) => setQuantity(Math.max(1, parseInt(e.target.value) || 1))}
+          className="w-16 h-10 border-t border-b border-gray-300 text-center"
+        />
+        <button 
+          onClick={() => setQuantity(quantity + 1)}
+          className="w-10 h-10 border border-gray-300 flex items-center justify-center"
+        >
+          +
+        </button>
+      </div>
+      
+      <button
+        onClick={handleAddToCart}
+        className="w-full bg-black text-white py-3 px-6 hover:bg-gray-800 transition"
+      >
+        Add to Cart
+      </button>
+    </div>
+  );
+}
+```
+
+## CSS and Styling
+
+The project uses Tailwind CSS for styling with some additional custom styles where needed. Key style considerations:
+
+1. **Color Scheme**
+   - Primary: Black (#000000)
+   - Accent: Indigo (#4F46E5)
+   - Backgrounds: White/light grays
+   - Text: Dark gray for body, black for headings
+
+2. **Typography**
+   - Primary font: Inter (sans-serif)
+   - Heading sizes: h1 (2rem), h2 (1.5rem), h3 (1.25rem)
+   - Body text: 1rem (16px)
+
+3. **Spacing System**
+   - Based on Tailwind's default spacing scale
+   - Consistent padding/margins for sections (py-16, px-4)
+
+4. **Responsive Breakpoints**
+   - Mobile first approach
+   - Key breakpoints: sm (640px), md (768px), lg (1024px), xl (1280px)
+
+## Component State Management
+
+The application uses React Context for global state management:
+
+1. **CartContext** - Manages shopping cart items and operations
+2. **AuthContext** - Handles user authentication state
+3. **UIContext** - Controls UI elements like modals and notifications
+
+For complex state logic, we use the reducer pattern with the `useReducer` hook. 
\ No newline at end of file
diff --git a/docs/implementation.md b/docs/implementation.md
new file mode 100644
index 0000000..03d8c43
--- /dev/null
+++ b/docs/implementation.md
@@ -0,0 +1,708 @@
+# Implementation Guide
+
+This guide provides practical steps to implement the e-commerce platform based on the project plan.
+
+## Getting Started
+
+### 1. Development Environment Setup
+
+```bash
+# Create project directory structure
+mkdir -p ecom/{frontend,backend,admin,shared}
+
+# Initialize frontend (Next.js)
+cd ecom/frontend
+npx create-next-app . --typescript --tailwind --eslint
+
+# Initialize backend (Express.js + MongoDB)
+cd ../backend
+npm init -y
+npm install express mongoose dotenv cors helmet jsonwebtoken bcrypt stripe
+
+# Create basic directory structure for backend
+mkdir -p config controllers middleware models routes services utils
+touch server.js .env .env.example .gitignore README.md
+```
+
+### 2. Frontend Implementation Steps
+
+#### Step 1: Set up basic components
+- Create layout components (header, footer, navigation)
+- Set up routing structure
+- Implement basic styling with Tailwind CSS
+
+#### Step 2: Key pages implementation
+- Homepage with featured products and promotions
+- Product listing page with filtering
+- Product detail page
+- Cart page
+- Checkout flow
+- User account pages
+
+```jsx
+// Example: Product Card Component (frontend/src/components/ProductCard.jsx)
+import Image from 'next/image';
+import Link from 'next/link';
+
+const ProductCard = ({ product }) => {
+  return (
+    <div className="group relative">
+      <div className="aspect-h-1 aspect-w-1 w-full overflow-hidden rounded-md bg-gray-200 lg:aspect-none group-hover:opacity-75 lg:h-80">
+        <Image
+          src={product.imageSrc}
+          alt={product.imageAlt}
+          className="h-full w-full object-cover object-center lg:h-full lg:w-full"
+          width={500}
+          height={500}
+        />
+      </div>
+      <div className="mt-4 flex justify-between">
+        <div>
+          <h3 className="text-sm text-gray-700">
+            <Link href={`/products/${product.id}`}>
+              <span aria-hidden="true" className="absolute inset-0" />
+              {product.name}
+            </Link>
+          </h3>
+          <p className="mt-1 text-sm text-gray-500">{product.color}</p>
+        </div>
+        <p className="text-sm font-medium text-gray-900">{product.price}</p>
+      </div>
+    </div>
+  );
+};
+
+export default ProductCard;
+```
+
+#### Step 3: State management
+- Implement context providers for:
+  - Shopping cart
+  - User authentication
+  - Product filtering
+
+```jsx
+// Example: CartContext (frontend/src/contexts/CartContext.jsx)
+import { createContext, useContext, useReducer, useEffect } from 'react';
+
+const CartContext = createContext();
+
+const cartReducer = (state, action) => {
+  switch (action.type) {
+    case 'ADD_ITEM':
+      // Check if item exists
+      const existingItemIndex = state.items.findIndex(
+        (item) => item.id === action.payload.id && 
+                  item.selectedSize === action.payload.selectedSize
+      );
+      
+      if (existingItemIndex >= 0) {
+        // Item exists, update quantity
+        const updatedItems = [...state.items];
+        updatedItems[existingItemIndex].quantity += action.payload.quantity;
+        
+        return {
+          ...state,
+          items: updatedItems,
+        };
+      }
+      
+      // Item doesn't exist, add new
+      return {
+        ...state,
+        items: [...state.items, action.payload],
+      };
+      
+    case 'REMOVE_ITEM':
+      return {
+        ...state,
+        items: state.items.filter(
+          (item) => !(item.id === action.payload.id && 
+                     item.selectedSize === action.payload.selectedSize)
+        ),
+      };
+      
+    case 'UPDATE_QUANTITY':
+      return {
+        ...state,
+        items: state.items.map((item) => {
+          if (item.id === action.payload.id && 
+              item.selectedSize === action.payload.selectedSize) {
+            return {
+              ...item,
+              quantity: action.payload.quantity,
+            };
+          }
+          return item;
+        }),
+      };
+      
+    case 'CLEAR_CART':
+      return {
+        ...state,
+        items: [],
+      };
+      
+    default:
+      return state;
+  }
+};
+
+export const CartProvider = ({ children }) => {
+  const [state, dispatch] = useReducer(cartReducer, {
+    items: [],
+  });
+  
+  // Load cart from localStorage on mount
+  useEffect(() => {
+    try {
+      const savedCart = localStorage.getItem('cart');
+      if (savedCart) {
+        const parsedCart = JSON.parse(savedCart);
+        dispatch({ type: 'REPLACE_CART', payload: parsedCart });
+      }
+    } catch (error) {
+      console.error('Error loading cart from localStorage:', error);
+    }
+  }, []);
+  
+  // Save cart to localStorage on update
+  useEffect(() => {
+    try {
+      localStorage.setItem('cart', JSON.stringify(state.items));
+    } catch (error) {
+      console.error('Error saving cart to localStorage:', error);
+    }
+  }, [state.items]);
+  
+  const addItem = (product, quantity = 1, selectedSize) => {
+    dispatch({
+      type: 'ADD_ITEM',
+      payload: { ...product, quantity, selectedSize },
+    });
+  };
+  
+  const removeItem = (productId, selectedSize) => {
+    dispatch({
+      type: 'REMOVE_ITEM',
+      payload: { id: productId, selectedSize },
+    });
+  };
+  
+  const updateQuantity = (productId, selectedSize, quantity) => {
+    dispatch({
+      type: 'UPDATE_QUANTITY',
+      payload: { id: productId, selectedSize, quantity },
+    });
+  };
+  
+  const clearCart = () => {
+    dispatch({ type: 'CLEAR_CART' });
+  };
+  
+  const cartTotal = state.items.reduce(
+    (total, item) => total + item.price * item.quantity,
+    0
+  );
+  
+  const itemCount = state.items.reduce(
+    (count, item) => count + item.quantity,
+    0
+  );
+  
+  return (
+    <CartContext.Provider
+      value={{
+        items: state.items,
+        addItem,
+        removeItem,
+        updateQuantity,
+        clearCart,
+        cartTotal,
+        itemCount,
+      }}
+    >
+      {children}
+    </CartContext.Provider>
+  );
+};
+
+export const useCart = () => useContext(CartContext);
+```
+
+### 3. Backend Implementation Steps
+
+#### Step 1: Database models
+- Create schemas for products, users, orders
+- Set up database connection
+
+```javascript
+// Example: Product Model (backend/models/Product.js)
+const mongoose = require('mongoose');
+
+const productSchema = new mongoose.Schema({
+  name: {
+    type: String,
+    required: true,
+    trim: true
+  },
+  slug: {
+    type: String,
+    required: true,
+    unique: true,
+    lowercase: true
+  },
+  description: {
+    type: String,
+    required: true
+  },
+  price: {
+    type: Number,
+    required: true,
+    min: 0
+  },
+  compareAtPrice: {
+    type: Number,
+    min: 0
+  },
+  images: [{
+    url: String,
+    alt: String
+  }],
+  category: {
+    type: mongoose.Schema.Types.ObjectId,
+    ref: 'Category',
+    required: true
+  },
+  variants: [{
+    color: String,
+    size: String,
+    inventory: Number
+  }],
+  tags: [String],
+  featured: {
+    type: Boolean,
+    default: false
+  },
+  createdAt: {
+    type: Date,
+    default: Date.now
+  },
+  updatedAt: {
+    type: Date,
+    default: Date.now
+  }
+}, { timestamps: true });
+
+// Add index for search
+productSchema.index({ 
+  name: 'text', 
+  description: 'text',
+  tags: 'text'
+});
+
+module.exports = mongoose.model('Product', productSchema);
+```
+
+#### Step 2: API endpoints
+- Create RESTful routes for products, users, orders
+- Implement authentication middleware
+
+```javascript
+// Example: Product Routes (backend/routes/products.js)
+const express = require('express');
+const router = express.Router();
+const productController = require('../controllers/productController');
+const { authenticate, isAdmin } = require('../middleware/authMiddleware');
+
+// Public routes
+router.get('/', productController.getAllProducts);
+router.get('/featured', productController.getFeaturedProducts);
+router.get('/category/:categoryId', productController.getProductsByCategory);
+router.get('/search', productController.searchProducts);
+router.get('/:id', productController.getProductById);
+router.get('/slug/:slug', productController.getProductBySlug);
+
+// Protected routes (admin only)
+router.post('/', authenticate, isAdmin, productController.createProduct);
+router.put('/:id', authenticate, isAdmin, productController.updateProduct);
+router.delete('/:id', authenticate, isAdmin, productController.deleteProduct);
+router.post('/bulk', authenticate, isAdmin, productController.bulkImportProducts);
+
+module.exports = router;
+```
+
+#### Step 3: Payment integration
+- Set up Stripe API for payment processing
+- Implement checkout logic
+
+```javascript
+// Example: Payment Controller (backend/controllers/paymentController.js)
+const stripe = require('stripe')(process.env.STRIPE_SECRET_KEY);
+const Order = require('../models/Order');
+const Product = require('../models/Product');
+
+exports.createCheckoutSession = async (req, res) => {
+  try {
+    const { items, shippingAddress } = req.body;
+    
+    // Validate cart items and get from database to ensure price integrity
+    const productIds = items.map(item => item.id);
+    const products = await Product.find({ _id: { $in: productIds } });
+    
+    // Map products to line items for Stripe
+    const lineItems = items.map(item => {
+      const product = products.find(p => p._id.toString() === item.id);
+      
+      if (!product) {
+        throw new Error(`Product not found: ${item.id}`);
+      }
+      
+      return {
+        price_data: {
+          currency: 'inr',
+          product_data: {
+            name: product.name,
+            images: product.images.map(img => img.url),
+          },
+          unit_amount: Math.round(product.price * 100), // Stripe requires amount in cents
+        },
+        quantity: item.quantity,
+      };
+    });
+    
+    // Create a new order in pending state
+    const order = new Order({
+      user: req.user ? req.user._id : null,
+      items: items.map(item => ({
+        product: item.id,
+        quantity: item.quantity,
+        price: products.find(p => p._id.toString() === item.id).price,
+        selectedVariant: {
+          size: item.selectedSize,
+          color: item.selectedColor
+        }
+      })),
+      shippingAddress,
+      total: items.reduce((sum, item) => {
+        const product = products.find(p => p._id.toString() === item.id);
+        return sum + (product.price * item.quantity);
+      }, 0),
+      status: 'pending'
+    });
+    
+    await order.save();
+    
+    // Create Stripe checkout session
+    const session = await stripe.checkout.sessions.create({
+      payment_method_types: ['card'],
+      line_items: lineItems,
+      mode: 'payment',
+      success_url: `${process.env.FRONTEND_URL}/checkout/success?session_id={CHECKOUT_SESSION_ID}`,
+      cancel_url: `${process.env.FRONTEND_URL}/cart`,
+      metadata: {
+        orderId: order._id.toString()
+      }
+    });
+    
+    res.json({ id: session.id, url: session.url });
+  } catch (error) {
+    console.error('Payment session error:', error);
+    res.status(500).json({ error: error.message });
+  }
+};
+
+exports.handleWebhook = async (req, res) => {
+  const signature = req.headers['stripe-signature'];
+  
+  try {
+    const event = stripe.webhooks.constructEvent(
+      req.body,
+      signature,
+      process.env.STRIPE_WEBHOOK_SECRET
+    );
+    
+    if (event.type === 'checkout.session.completed') {
+      const session = event.data.object;
+      const orderId = session.metadata.orderId;
+      
+      // Update order status to paid
+      await Order.findByIdAndUpdate(orderId, {
+        status: 'paid',
+        paymentId: session.payment_intent
+      });
+      
+      // Here you would also update inventory, send confirmation emails, etc.
+    }
+    
+    res.json({ received: true });
+  } catch (error) {
+    console.error('Webhook error:', error);
+    res.status(400).send(`Webhook Error: ${error.message}`);
+  }
+};
+```
+
+### 4. Admin Dashboard Implementation
+
+- Implement pages for product, order, and user management
+- Create forms for product creation and editing
+- Develop dashboard for sales analytics
+
+### 5. Deployment Strategy
+
+#### Development Environment
+- Local development with Docker
+
+#### Staging Environment
+- AWS/Vercel deployment
+- Continuous integration with GitHub Actions
+
+#### Production Environment
+- Load-balanced setup
+- Database backups
+- CDN for static assets
+
+## Key Features Implementation Details
+
+### 1. Country/Currency Selector
+
+```jsx
+// Example component
+import { useState, useEffect } from 'react';
+import { useRouter } from 'next/router';
+
+const countryCurrencyMap = {
+  US: { currency: 'USD', symbol: '$' },
+  IN: { currency: 'INR', symbol: '₹' },
+  GB: { currency: 'GBP', symbol: '£' },
+  // Add more countries as needed
+};
+
+export default function CurrencySelector() {
+  const [selectedCountry, setSelectedCountry] = useState('IN');
+  const router = useRouter();
+  
+  // Effect to set country based on user's location or saved preference
+  useEffect(() => {
+    const savedCountry = localStorage.getItem('selectedCountry');
+    if (savedCountry) {
+      setSelectedCountry(savedCountry);
+    } else {
+      // Could add geolocation API to auto-detect
+    }
+  }, []);
+  
+  // Update when user changes selection
+  const handleCountryChange = (e) => {
+    const country = e.target.value;
+    setSelectedCountry(country);
+    localStorage.setItem('selectedCountry', country);
+    
+    // Force refresh to update prices
+    router.reload();
+  };
+  
+  return (
+    <div className="relative">
+      <select
+        value={selectedCountry}
+        onChange={handleCountryChange}
+        className="block appearance-none bg-white border border-gray-300 px-4 py-2 pr-8 rounded shadow leading-tight focus:outline-none focus:shadow-outline"
+      >
+        <option value="IN">India (₹)</option>
+        <option value="US">United States ($)</option>
+        <option value="GB">United Kingdom (£)</option>
+        {/* Add more countries */}
+      </select>
+      <div className="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700">
+        <svg className="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
+          <path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z" />
+        </svg>
+      </div>
+    </div>
+  );
+}
+```
+
+### 2. Responsive Product Gallery
+
+```jsx
+// Example implementation
+import { useState } from 'react';
+import Image from 'next/image';
+
+export default function ProductGallery({ images }) {
+  const [mainImage, setMainImage] = useState(images[0]);
+  
+  return (
+    <div className="grid gap-4">
+      <div className="relative h-96 overflow-hidden rounded-lg">
+        <Image
+          src={mainImage.url}
+          alt={mainImage.alt}
+          layout="fill"
+          objectFit="cover"
+          className="w-full h-full object-center object-cover"
+        />
+      </div>
+      <div className="grid grid-cols-5 gap-2">
+        {images.map((image, i) => (
+          <button
+            key={i}
+            onClick={() => setMainImage(image)}
+            className={`relative h-20 overflow-hidden rounded-md ${
+              mainImage.url === image.url ? 'ring-2 ring-indigo-500' : ''
+            }`}
+          >
+            <Image
+              src={image.url}
+              alt={image.alt}
+              layout="fill"
+              objectFit="cover"
+              className="w-full h-full object-center object-cover"
+            />
+          </button>
+        ))}
+      </div>
+    </div>
+  );
+}
+```
+
+### 3. Promotional Banner Component
+
+```jsx
+// Example implementation
+import { useState, useEffect } from 'react';
+
+export default function PromoBanner({ code, message, expiry }) {
+  const [isVisible, setIsVisible] = useState(true);
+  
+  // Check if banner should be shown (e.g., not dismissed recently)
+  useEffect(() => {
+    const bannerDismissed = localStorage.getItem('promoBannerDismissed');
+    if (bannerDismissed) {
+      const dismissTime = parseInt(bannerDismissed);
+      // Show again after 1 day
+      if (Date.now() - dismissTime < 24 * 60 * 60 * 1000) {
+        setIsVisible(false);
+      }
+    }
+  }, []);
+  
+  const handleDismiss = () => {
+    setIsVisible(false);
+    localStorage.setItem('promoBannerDismissed', Date.now().toString());
+  };
+  
+  if (!isVisible) return null;
+  
+  return (
+    <div className="bg-indigo-600 py-3">
+      <div className="mx-auto max-w-7xl px-3 sm:px-6 lg:px-8">
+        <div className="flex flex-wrap items-center justify-between">
+          <div className="flex w-0 flex-1 items-center">
+            <span className="flex rounded-lg bg-indigo-800 p-2">
+              <svg className="h-6 w-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M11 5.882V19.24a1.76 1.76 0 01-3.417.592l-2.147-6.15M18 13a3 3 0 100-6M5.436 13.683A4.001 4.001 0 017 6h1.832c4.1 0 7.625-1.234 9.168-3v14c-1.543-1.766-5.067-3-9.168-3H7a3.988 3.988 0 01-1.564-.317z" />
+              </svg>
+            </span>
+            <p className="ml-3 font-medium text-white">
+              <span className="md:hidden">{message}</span>
+              <span className="hidden md:inline">
+                {message} Use code <span className="font-bold">{code}</span> at checkout
+              </span>
+            </p>
+          </div>
+          <div className="order-3 mt-2 w-full flex-shrink-0 sm:order-2 sm:mt-0 sm:w-auto">
+            <a
+              href="#"
+              className="flex items-center justify-center rounded-md border border-transparent bg-white px-4 py-2 text-sm font-medium text-indigo-600 shadow-sm hover:bg-indigo-50"
+            >
+              Shop Now
+            </a>
+          </div>
+          <div className="order-2 flex-shrink-0 sm:order-3 sm:ml-3">
+            <button
+              type="button"
+              onClick={handleDismiss}
+              className="-mr-1 flex rounded-md p-2 hover:bg-indigo-500 focus:outline-none focus:ring-2 focus:ring-white sm:-mr-2"
+            >
+              <span className="sr-only">Dismiss</span>
+              <svg className="h-6 w-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M6 18L18 6M6 6l12 12" />
+              </svg>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+```
+
+## Testing and Quality Assurance
+
+### Unit Testing
+```bash
+# Frontend testing
+cd frontend
+npm test
+
+# Backend testing
+cd ../backend
+npm test
+```
+
+### End-to-End Testing
+```bash
+# Install Cypress
+cd frontend
+npm install cypress --save-dev
+
+# Run E2E tests
+npx cypress open
+```
+
+## Performance Optimization Strategies
+
+1. **Image Optimization**
+   - Use Next.js Image component
+   - Implement lazy loading
+   - Serve responsive images
+
+2. **Code Splitting**
+   - Leverage Next.js automatic code splitting
+   - Use dynamic imports for large components
+
+3. **Server-Side Rendering**
+   - Use SSR for product listings and detail pages
+   - Implement Incremental Static Regeneration for frequently updated pages
+
+4. **API Response Caching**
+   - Implement Redis for caching
+   - Add HTTP cache headers
+
+## Security Best Practices
+
+1. **Authentication**
+   - Implement JWT with refresh tokens
+   - Store tokens securely in HTTP-only cookies
+
+2. **API Security**
+   - Implement rate limiting
+   - Use CORS protection
+   - Validate all inputs
+
+3. **Payment Data**
+   - Use Stripe Elements for secure payment form
+   - Never store sensitive payment information
+
+## Ongoing Maintenance Plan
+
+1. Regular dependency updates
+2. Security patches
+3. Performance monitoring
+4. Backup strategy
+5. Scaling plan as traffic increases 
\ No newline at end of file
diff --git a/docs/project-plan.md b/docs/project-plan.md
new file mode 100644
index 0000000..5716264
--- /dev/null
+++ b/docs/project-plan.md
@@ -0,0 +1,95 @@
+# E-Commerce Project Plan
+
+## Project Overview
+This project aims to create an e-commerce platform for a clothing brand similar to turntupfashion.com, featuring modern design, seamless user experience, and robust e-commerce functionality.
+
+## Technology Stack
+- **Frontend**: React.js with Next.js
+- **Styling**: Tailwind CSS
+- **Backend**: Node.js with Express.js
+- **Database**: MongoDB with Mongoose
+- **Authentication**: JWT with OAuth
+- **Payment**: Stripe API
+- **Deployment**: Docker containers on AWS/Vercel
+
+## Core Features
+
+### User-Facing Features
+- **Homepage** - Featured products, new arrivals, promotions
+- **Product Catalog** - Filtering, sorting, search
+- **Product Detail** - Image gallery, variants, add to cart
+- **Shopping Cart** - Item management, promotions, calculations
+- **Checkout** - Guest checkout, shipping, payment
+- **User Accounts** - Order history, addresses, wishlist
+- **Country/Currency** - Multi-currency support
+
+### Admin Features
+- **Product Management** - CRUD operations, inventory
+- **Order Management** - Processing, status updates, invoicing
+- **Customer Management** - Information, support tools
+- **Content Management** - Homepage, promotions
+- **Analytics** - Sales reporting, insights
+
+## Development Phases
+
+### Phase 1: Setup (2 weeks)
+- Environment setup, repository initialization
+- Basic API endpoints and database configuration
+- Design system and component library
+
+### Phase 2: Core Functionality (4 weeks)
+- Product catalog and browsing
+- Product detail pages
+- Shopping cart functionality
+- User authentication
+- Checkout flow (without payment)
+
+### Phase 3: Payment & UX (3 weeks)
+- Payment gateway integration
+- Order management
+- User accounts and profiles
+- Country/currency selector
+- Mobile responsiveness
+
+### Phase 4: Admin & Backend (3 weeks)
+- Admin product management
+- Order processing workflows
+- Inventory management
+- Analytics dashboard
+- Content management
+
+### Phase 5: Testing & Optimization (2 weeks)
+- Comprehensive testing
+- Performance optimization
+- SEO implementation
+- Accessibility compliance
+- Security audit
+
+### Phase 6: Launch (2 weeks)
+- Final QA testing
+- Production setup
+- Data migration
+- Deployment
+- Launch preparation
+
+## Technical Requirements
+
+- **Performance**: Web Vitals optimization, image optimization, code splitting
+- **Security**: HTTPS, authentication, input validation, PCI compliance
+- **SEO**: Semantic HTML, metadata, structured data
+- **Accessibility**: WCAG 2.1 AA compliance
+
+## Timeline
+- **Week 1-2**: Project setup
+- **Week 3-6**: Core functionality
+- **Week 7-9**: Payment and UX
+- **Week 10-12**: Admin dashboard
+- **Week 13-14**: Testing and optimization
+- **Week 15-16**: Launch preparation
+
+## Team Structure
+- 1 Project Manager
+- 2 Frontend Developers
+- 2 Backend Developers
+- 1 UI/UX Designer
+- 1 QA Engineer 
\ No newline at end of file