PROMPT START

Build a complete Online Shopping Website using Next.js (App Router), TypeScript, Tailwind CSS, and shadcn/ui.

📌 Features I want
1. Authentication (Frontend Only)

Signup page

Login page

Logout button

Store logged-in user in localStorage

Protect cart page → if user is not logged in, redirect to login

Authentication logic should be client-side only (I will add backend later)

2. Pages Needed

/ → Home Page

/products → Product listing

/products/[id] → Product details page

/cart → Cart page (PRIVATE)

/login → Login

/signup → Signup

3. Add to Cart System

Only logged-in users can add items to cart

Cart data stored in localStorage

Add, remove, increase, decrease quantity

Show cart count in navbar

Sync cart on page reload

4. Components Needed
Client Components

Navbar with login/signup/logout + cart count

ProductCard

AddToCartButton

LoginForm

SignupForm

CartItems

ProtectedRoute wrapper

Server Components

HomePage

ProductList (server-fetched dummy data)

ProductDetails (server component with client-side AddToCart button)

5. UI / Styling

Tailwind CSS

Use shadcn/ui for reusable UI components

Responsive + mobile-first

Beautiful minimal design

6. Dummy Product Data

Use products.json or a simple array inside server components

Structure: id, title, description, image, price, category

📁 Folder Structure to Generate
app/
├─ layout.tsx
├─ page.tsx (Home)
├─ login/page.tsx
├─ signup/page.tsx
├─ products/page.tsx
├─ products/[id]/page.tsx
├─ cart/page.tsx
components/
├─ Navbar.tsx
├─ ProductCard.tsx
├─ AddToCartButton.tsx
├─ LoginForm.tsx
├─ SignupForm.tsx
├─ CartItems.tsx
├─ ProtectedRoute.tsx
lib/
├─ cart.ts (cart utils localStorage)
├─ auth.ts (login/signup localStorage)
data/
├─ products.ts

7. Functionality Details
🔐 Authentication

signup() saves user to localStorage

login() checks user

logout() clears currentUser

Save user as:

currentUser: { email: "", name: "" }

🛒 Cart System Logic (localStorage)
cart = [
{ id, name, price, quantity, image }
]


Functions:

addToCart()
removeFromCart()
increaseQuantity()
decreaseQuantity()
getCart()
clearCart()

8. Add Realistic UI

Modern buttons

Product grid

Mobile drawer menu for navbar

Toast notifications for add to cart, login, signup

9. Code Requirements

✔ Use client/server components correctly
✔ Use "use client" only where needed
✔ Full working components
✔ Every page design clean
✔ Functions well-commented
✔ Redirect unauthenticated users
✔ No backend → everything on localStorage

PROMPT END

README.md

@@ -1,10 +1,13 @@
 ---
-title: Shopsphere E Commerce Delight
-emoji: 👀
-colorFrom: blue
-colorTo: purple
+title: ShopSphere - E-Commerce Delight  🛍️
+colorFrom: red
+colorTo: red
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://huggingface.co/deepsite).

components/footer.js

@@ -0,0 +1,64 @@
+class CustomFooter extends HTMLElement {
+    connectedCallback() {
+        this.attachShadow({ mode: 'open' });
+        this.shadowRoot.innerHTML = `
+            <style>
+                .footer-link {
+                    transition: color 0.2s ease;
+                }
+                
+                .footer-link:hover {
+                    color: #6366f1;
+                }
+            </style>
+            <footer class="bg-gray-800 text-white py-8">
+                <div class="container mx-auto px-4">
+                    <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
+                        <div>
+                            <h3 class="text-xl font-bold mb-4">ShopSphere</h3>
+                            <p class="text-gray-400">Your one-stop shop for all your needs.</p>
+                        </div>
+                        
+                        <div>
+                            <h4 class="font-semibold mb-4">Quick Links</h4>
+                            <ul class="space-y-2">
+                                <li><a href="/" class="footer-link text-gray-400">Home</a></li>
+                                <li><a href="/products" class="footer-link text-gray-400">Products</a></li>
+                                <li><a href="/cart" class="footer-link text-gray-400">Cart</a></li>
+                            </ul>
+                        </div>
+                        
+                        <div>
+                            <h4 class="font-semibold mb-4">Help</h4>
+                            <ul class="space-y-2">
+                                <li><a href="#" class="footer-link text-gray-400">FAQs</a></li>
+                                <li><a href="#" class="footer-link text-gray-400">Shipping</a></li>
+                                <li><a href="#" class="footer-link text-gray-400">Returns</a></li>
+                            </ul>
+                        </div>
+                        
+                        <div>
+                            <h4 class="font-semibold mb-4">Contact</h4>
+                            <ul class="space-y-2">
+                                <li class="flex items-center">
+                                    <i data-feather="mail" class="mr-2"></i>
+                                    <span class="text-gray-400">support@shopsphere.com</span>
+                                </li>
+                                <li class="flex items-center">
+                                    <i data-feather="phone" class="mr-2"></i>
+                                    <span class="text-gray-400">(123) 456-7890</span>
+                                </li>
+                            </ul>
+                        </div>
+                    </div>
+                    
+                    <div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400">
+                        <p>&copy; ${new Date().getFullYear()} ShopSphere. All rights reserved.</p>
+                    </div>
+                </div>
+            </footer>
+        `;
+    }
+}
+
+customElements.define('custom-footer', CustomFooter);

components/navbar.js

@@ -0,0 +1,125 @@
+class CustomNavbar extends HTMLElement {
+    connectedCallback() {
+        this.attachShadow({ mode: 'open' });
+        this.shadowRoot.innerHTML = `
+            <style>
+                .nav-link {
+                    position: relative;
+                    padding-bottom: 4px;
+                }
+                
+                .nav-link::after {
+                    content: '';
+                    position: absolute;
+                    bottom: 0;
+                    left: 0;
+                    width: 0;
+                    height: 2px;
+                    background-color: #6366f1;
+                    transition: width 0.3s ease;
+                }
+                
+                .nav-link:hover::after {
+                    width: 100%;
+                }
+                
+                .mobile-menu {
+                    transition: all 0.3s ease;
+                }
+                
+                .cart-count {
+                    display: none;
+                    position: absolute;
+                    top: -8px;
+                    right: -8px;
+                    background-color: #f43f5e;
+                    color: white;
+                    border-radius: 50%;
+                    width: 20px;
+                    height: 20px;
+                    font-size: 12px;
+                    align-items: center;
+                    justify-content: center;
+                }
+            </style>
+            <nav class="bg-white shadow-sm">
+                <div class="container mx-auto px-4 py-4">
+                    <div class="flex justify-between items-center">
+                        <a href="/" class="text-2xl font-bold text-primary">ShopSphere</a>
+                        
+                        <div class="hidden md:flex items-center space-x-8">
+                            <a href="/" class="nav-link text-gray-700 hover:text-primary">Home</a>
+                            <a href="/products" class="nav-link text-gray-700 hover:text-primary">Products</a>
+                            <a href="/cart" class="nav-link text-gray-700 hover:text-primary relative">
+                                <i data-feather="shopping-cart"></i>
+                                <span id="cart-count" class="cart-count">0</span>
+                            </a>
+                            
+                            ${auth.isAuthenticated() ? `
+                                <div class="flex items-center space-x-4">
+                                    <span class="text-gray-700">Hi, ${auth.currentUser.name}</span>
+                                    <button onclick="auth.logout()" class="bg-secondary text-white px-4 py-2 rounded hover:bg-secondary-600 transition">
+                                        Logout
+                                    </button>
+                                </div>
+                            ` : `
+                                <div class="flex items-center space-x-4">
+                                    <a href="/login" class="text-gray-700 hover:text-primary">Login</a>
+                                    <a href="/signup" class="bg-primary text-white px-4 py-2 rounded hover:bg-primary-600 transition">
+                                        Sign Up
+                                    </a>
+                                </div>
+                            `}
+                        </div>
+                        
+                        <button id="mobile-menu-button" class="md:hidden text-gray-700">
+                            <i data-feather="menu"></i>
+                        </button>
+                    </div>
+                    
+                    <div id="mobile-menu" class="mobile-menu hidden md:hidden mt-4 pb-4">
+                        <a href="/" class="block py-2 text-gray-700 hover:text-primary">Home</a>
+                        <a href="/products" class="block py-2 text-gray-700 hover:text-primary">Products</a>
+                        <a href="/cart" class="block py-2 text-gray-700 hover:text-primary relative">
+                            <span class="flex items-center">
+                                <i data-feather="shopping-cart" class="mr-2"></i> Cart
+                                <span id="mobile-cart-count" class="cart-count ml-2">0</span>
+                            </span>
+                        </a>
+                        
+                        ${auth.isAuthenticated() ? `
+                            <div class="mt-4 pt-4 border-t border-gray-200">
+                                <p class="text-gray-700 mb-2">Hi, ${auth.currentUser.name}</p>
+                                <button onclick="auth.logout()" class="w-full bg-secondary text-white px-4 py-2 rounded hover:bg-secondary-600 transition">
+                                    Logout
+                                </button>
+                            </div>
+                        ` : `
+                            <div class="mt-4 pt-4 border-t border-gray-200 space-y-2">
+                                <a href="/login" class="block py-2 text-gray-700 hover:text-primary">Login</a>
+                                <a href="/signup" class="block bg-primary text-white px-4 py-2 rounded text-center hover:bg-primary-600 transition">
+                                    Sign Up
+                                </a>
+                            </div>
+                        `}
+                    </div>
+                </div>
+            </nav>
+            
+            <script>
+                document.addEventListener('DOMContentLoaded', () => {
+                    const menuButton = this.shadowRoot.getElementById('mobile-menu-button');
+                    const mobileMenu = this.shadowRoot.getElementById('mobile-menu');
+                    
+                    menuButton.addEventListener('click', () => {
+                        mobileMenu.classList.toggle('hidden');
+                    });
+                    
+                    feather.replace();
+                });
+            </script>
+        `;
+    }
+}
+
+customElements.define('custom-navbar', CustomNavbar);

index.html

@@ -1,19 +1,50 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>ShopSphere - E-Commerce Delight</title>
+    <link rel="stylesheet" href="style.css">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <script>
+        tailwind.config = {
+            theme: {
+                extend: {
+                    colors: {
+                        primary: '#6366f1',
+                        secondary: '#f43f5e',
+                    }
+                }
+            }
+        }
+    </script>
+</head>
+<body class="bg-gray-50">
+    <custom-navbar></custom-navbar>
+    <main class="container mx-auto px-4 py-8">
+        <section class="hero-section mb-12">
+            <div class="bg-gradient-to-r from-primary to-secondary rounded-2xl p-8 text-white">
+                <h1 class="text-4xl md:text-5xl font-bold mb-4">Welcome to ShopSphere</h1>
+                <p class="text-xl mb-6">Discover amazing products at unbeatable prices</p>
+                <a href="/products" class="bg-white text-primary px-6 py-3 rounded-lg font-medium hover:bg-opacity-90 transition">Shop Now</a>
+            </div>
+        </section>
+
+        <section class="featured-products mb-12">
+            <h2 class="text-2xl font-bold mb-6">Featured Products</h2>
+            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6" id="featured-products">
+                <!-- Products will be loaded via JavaScript -->
+            </div>
+        </section>
+    </main>
+    <custom-footer></custom-footer>
+
+    <script src="components/navbar.js"></script>
+    <script src="components/footer.js"></script>
+    <script src="script.js"></script>
+    <script>feather.replace();</script>
+<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
+</body>
+</html>

script.js

@@ -0,0 +1,170 @@
+// Auth functions
+const auth = {
+    currentUser: JSON.parse(localStorage.getItem('currentUser')) || null,
+
+    signup: (name, email, password) => {
+        const user = { name, email };
+        localStorage.setItem('currentUser', JSON.stringify(user));
+        auth.currentUser = user;
+        showToast('Account created successfully!');
+        window.location.href = '/';
+    },
+
+    login: (email, password) => {
+        // In a real app, this would verify against a backend
+        const user = { name: 'Demo User', email };
+        localStorage.setItem('currentUser', JSON.stringify(user));
+        auth.currentUser = user;
+        showToast('Logged in successfully!');
+        window.location.href = '/';
+    },
+
+    logout: () => {
+        localStorage.removeItem('currentUser');
+        auth.currentUser = null;
+        showToast('Logged out successfully!');
+        window.location.href = '/';
+    },
+
+    isAuthenticated: () => {
+        return auth.currentUser !== null;
+    }
+};
+
+// Cart functions
+const cart = {
+    getCart: () => {
+        return JSON.parse(localStorage.getItem('cart')) || [];
+    },
+
+    addToCart: (product) => {
+        if (!auth.isAuthenticated()) {
+            window.location.href = '/login';
+            return;
+        }
+
+        const cartItems = cart.getCart();
+        const existingItem = cartItems.find(item => item.id === product.id);
+
+        if (existingItem) {
+            existingItem.quantity += 1;
+        } else {
+            cartItems.push({
+                ...product,
+                quantity: 1
+            });
+        }
+
+        localStorage.setItem('cart', JSON.stringify(cartItems));
+        updateCartCount();
+        showToast(`${product.name} added to cart!`);
+    },
+
+    removeFromCart: (productId) => {
+        const cartItems = cart.getCart().filter(item => item.id !== productId);
+        localStorage.setItem('cart', JSON.stringify(cartItems));
+        updateCartCount();
+    },
+
+    updateQuantity: (productId, newQuantity) => {
+        const cartItems = cart.getCart();
+        const item = cartItems.find(item => item.id === productId);
+        
+        if (item) {
+            if (newQuantity <= 0) {
+                cart.removeFromCart(productId);
+            } else {
+                item.quantity = newQuantity;
+                localStorage.setItem('cart', JSON.stringify(cartItems));
+            }
+        }
+        
+        updateCartCount();
+    },
+
+    clearCart: () => {
+        localStorage.removeItem('cart');
+        updateCartCount();
+    }
+};
+
+// Helper functions
+function updateCartCount() {
+    const cartCount = document.getElementById('cart-count');
+    if (cartCount) {
+        const count = cart.getCart().reduce((sum, item) => sum + item.quantity, 0);
+        cartCount.textContent = count;
+        cartCount.style.display = count > 0 ? 'flex' : 'none';
+    }
+}
+
+function showToast(message) {
+    const toast = document.createElement('div');
+    toast.className = 'toast';
+    toast.textContent = message;
+    document.body.appendChild(toast);
+    
+    setTimeout(() => {
+        toast.remove();
+    }, 3000);
+}
+
+// Load featured products
+document.addEventListener('DOMContentLoaded', () => {
+    const featuredContainer = document.getElementById('featured-products');
+    
+    if (featuredContainer) {
+        const products = [
+            {
+                id: 1,
+                name: 'Wireless Headphones',
+                price: 99.99,
+                image: 'http://static.photos/technology/320x240/1',
+                description: 'Premium wireless headphones with noise cancellation'
+            },
+            {
+                id: 2,
+                name: 'Smart Watch',
+                price: 199.99,
+                image: 'http://static.photos/technology/320x240/2',
+                description: 'Track your fitness and stay connected'
+            },
+            {
+                id: 3,
+                name: 'Bluetooth Speaker',
+                price: 79.99,
+                image: 'http://static.photos/technology/320x240/3',
+                description: 'Portable speaker with crystal clear sound'
+            },
+            {
+                id: 4,
+                name: 'Wireless Charger',
+                price: 29.99,
+                image: 'http://static.photos/technology/320x240/4',
+                description: 'Fast charging for all Qi-enabled devices'
+            }
+        ];
+
+        products.forEach(product => {
+            const productCard = document.createElement('div');
+            productCard.className = 'product-card bg-white rounded-lg overflow-hidden shadow-md';
+            productCard.innerHTML = `
+                <img src="${product.image}" alt="${product.name}" class="w-full h-48 object-cover">
+                <div class="p-4">
+                    <h3 class="font-semibold text-lg mb-1">${product.name}</h3>
+                    <p class="text-gray-600 text-sm mb-2">${product.description}</p>
+                    <div class="flex justify-between items-center mt-4">
+                        <span class="font-bold text-primary">$${product.price.toFixed(2)}</span>
+                        <button onclick="cart.addToCart(${JSON.stringify(product).replace(/"/g, '&quot;')})" 
+                                class="bg-primary text-white px-4 py-2 rounded hover:bg-primary-600 transition">
+                            Add to Cart
+                        </button>
+                    </div>
+                </div>
+            `;
+            featuredContainer.appendChild(productCard);
+        });
+    }
+
+    updateCartCount();
+});

style.css

@@ -1,28 +1,39 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
+
 body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
+    font-family: 'Inter', sans-serif;
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
 }
 
-h1 {
-	font-size: 16px;
-	margin-top: 0;
+main {
+    flex: 1;
 }
 
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
+.product-card {
+    transition: transform 0.3s ease, box-shadow 0.3s ease;
 }
 
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
+.product-card:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
 }
 
-.card p:last-child {
-	margin-bottom: 0;
+/* Toast notification styles */
+.toast {
+    position: fixed;
+    bottom: 20px;
+    right: 20px;
+    background: #4CAF50;
+    color: white;
+    padding: 16px;
+    border-radius: 8px;
+    z-index: 1000;
+    animation: slideIn 0.5s forwards;
 }
+
+@keyframes slideIn {
+    from { transform: translateX(100%); }
+    to { transform: translateX(0); }
+}