/** @jsxImportSource https://esm.sh/react@18.2.0 */ import React, { useState, useEffect, useCallback } from "https://esm.sh/react@18.2.0"; import { createRoot } from "https://esm.sh/react-dom@18.2.0/client"; // Initial product data with more details const INITIAL_PRODUCTS = [ { id: 1, name: "Wireless Headphones", price: 99.99, category: "Electronics", image: "https://maxm-imggenurl.web.val.run/wireless-headphones", description: "High-quality wireless headphones with noise cancellation", affiliateLink: "https://www.amazon.com/dp/B08N5KWB9V", affiliateProgram: "Amazon Associates" }, { id: 2, name: "Smart Watch", price: 199.99, category: "Wearables", image: "https://maxm-imggenurl.web.val.run/smart-watch", description: "Advanced smartwatch with health tracking features", affiliateLink: "https://www.amazon.com/dp/B09G9FPHY1", affiliateProgram: "Amazon Associates" }, { id: 3, name: "Laptop", price: 799.99, category: "Computers", image: "https://maxm-imggenurl.web.val.run/laptop", description: "Powerful laptop for work and entertainment", affiliateLink: "https://www.amazon.com/dp/B09JQSB4B3", affiliateProgram: "Amazon Associates" } ]; // Affiliate programs preset with common platforms const AFFILIATE_PROGRAMS = [ { name: "Amazon Associates", baseUrl: "https://www.amazon.com/dp/" }, { name: "eBay Partner Network", baseUrl: "https://www.ebay.com/itm/" }, { name: "ShareASale", baseUrl: "https://shareasale.com/r.cfm?b=" }, { name: "Rakuten Advertising", baseUrl: "" }, { name: "CJ Affiliate", baseUrl: "" }, { name: "Custom URL", baseUrl: "" } ]; // Predefined categories const CATEGORIES = [ "Electronics", "Wearables", "Computers", "Home & Kitchen", "Fashion", "Books", "Other" ]; // Error Boundary Component class ErrorBoundary extends React.Component { constructor(props) { super(props); this.state = { hasError: false, error: null }; } static getDerivedStateFromError(error) { return { hasError: true, error }; } componentDidCatch(error, errorInfo) { console.error("Uncaught error:", error, errorInfo); } render() { if (this.state.hasError) { return (

🚨 Something Went Wrong

Please refresh the page or try again later.

Error Details

{this.state.error?.toString()}

); } return this.props.children; } } function AffiliateGuideModal({ isOpen, onClose }) { if (!isOpen) return null; return (

🔗 Affiliate Link Guide

Choose an Affiliate Program (Amazon, eBay, etc.)

Get your unique product tracking link

Paste the link in the Affiliate Link field

💡 Quick Tips:

Use direct product page links
Ensure link includes your tracking ID
Test the link before saving

); } function AffiliateModal({ isOpen, onClose, product, onSaveAffiliate }) { const [affiliateProgram, setAffiliateProgram] = useState(''); const [affiliateLink, setAffiliateLink] = useState(''); const [isGuideOpen, setIsGuideOpen] = useState(false); useEffect(() => { if (product) { setAffiliateProgram(product.affiliateProgram || ''); setAffiliateLink(product.affiliateLink || ''); } }, [product]); const handleSave = () => { if (!product) return; // Enhanced validation if (!affiliateProgram.trim()) { alert('Please select an Affiliate Program'); return; } if (!affiliateLink.trim()) { alert('Please enter an affiliate link'); return; } try { // Validate URL new URL(affiliateLink); onSaveAffiliate(product.id, { affiliateProgram, affiliateLink: affiliateLink.trim() }); onClose(); } catch (error) { alert('Please enter a valid URL'); } }; if (!isOpen) return null; return ( <>

Add Affiliate Link for {product?.name}

setAffiliateLink(e.target.value)} required />

setIsGuideOpen(false)} /> ); } function ProductCard({ product, onEditAffiliate }) { return (

{ e.target.src = `https://maxm-imggenurl.web.val.run/${product.name.toLowerCase().replace(/\s+/g, '-')}`; }} />

{product.name}

{product.description}

${product.price.toFixed(2)} {product.category} {product.affiliateLink ? ( 🛒 Buy Now ) : (

Help customers buy this product!

)}

); } function WelcomeScreen() { const [animationClass, setAnimationClass] = useState(''); useEffect(() => { const timer = setTimeout(() => { setAnimationClass('fade-out'); }, 1800); return () => clearTimeout(timer); }, []); const welcomePhrases = [ "🚀 Discover Amazing Deals!", "💡 Smart Shopping Starts Here", "🌟 Your Affiliate Marketplace", "💸 Savings at Your Fingertips" ]; const randomPhrase = welcomePhrases[Math.floor(Math.random() * welcomePhrases.length)]; return (

🛍️ Affiliate Marketplace

{randomPhrase}

); } function App() { const [products, setProducts] = useState([]); const [showWelcome, setShowWelcome] = useState(true); const [isAddProductModalOpen, setIsAddProductModalOpen] = useState(false); const [isAffiliateModalOpen, setIsAffiliateModalOpen] = useState(false); const [selectedProduct, setSelectedProduct] = useState(null); const [searchTerm, setSearchTerm] = useState(''); const [selectedCategory, setSelectedCategory] = useState('All'); useEffect(() => { try { const savedProducts = localStorage.getItem('affiliateProducts'); setProducts(savedProducts ? JSON.parse(savedProducts) : INITIAL_PRODUCTS); const welcomeTimer = setTimeout(() => { setShowWelcome(false); }, 2000); return () => clearTimeout(welcomeTimer); } catch (error) { console.error('Error loading products:', error); setProducts(INITIAL_PRODUCTS); } }, []); const saveProductsToLocalStorage = useCallback((updatedProducts) => { try { localStorage.setItem('affiliateProducts', JSON.stringify(updatedProducts)); setProducts(updatedProducts); } catch (error) { console.error('Error saving products:', error); alert('Unable to save products. Please check your browser settings.'); } }, []); const handleAddProduct = useCallback((newProduct) => { const updatedProducts = [...products, newProduct]; saveProductsToLocalStorage(updatedProducts); }, [products, saveProductsToLocalStorage]); const handleSaveAffiliate = useCallback((productId, affiliateData) => { const updatedProducts = products.map(product => product.id === productId ? { ...product, ...affiliateData } : product ); saveProductsToLocalStorage(updatedProducts); }, [products, saveProductsToLocalStorage]); const openAffiliateModal = useCallback((product) => { setSelectedProduct(product); setIsAffiliateModalOpen(true); }, []); const filteredProducts = products.filter(product => (selectedCategory === 'All' || product.category === selectedCategory) && product.name.toLowerCase().includes(searchTerm.toLowerCase()) ); const categories = ['All', ...new Set(products.map(p => p.category))]; if (showWelcome) { return ; } return (

🛍️ Affiliate Marketplace

setSearchTerm(e.target.value)} className="search-input" />

{filteredProducts.map(product => ( ))}

{isAddProductModalOpen && ( setIsAddProductModalOpen(false)} onAddProduct={handleAddProduct} /> )} {isAffiliateModalOpen && ( setIsAffiliateModalOpen(false)} product={selectedProduct} onSaveAffiliate={handleSaveAffiliate} /> )}

); } function AddProductModal({ isOpen, onClose, onAddProduct }) { const [name, setName] = useState(''); const [price, setPrice] = useState(''); const [category, setCategory] = useState(''); const [description, setDescription] = useState(''); const [image, setImage] = useState(''); const handleSubmit = useCallback(() => { // Enhanced validation if (!name.trim()) { alert('Product name is required'); return; } if (!price || parseFloat(price) <= 0) { alert('Please enter a valid price'); return; } if (!category) { alert('Please select a category'); return; } const newProduct = { id: Date.now(), name: name.trim(), price: parseFloat(price), category, description: description.trim(), image: image.trim() || `https://maxm-imggenurl.web.val.run/${name.toLowerCase().replace(/\s+/g, '-')}`, affiliateLink: "", affiliateProgram: "" }; onAddProduct(newProduct); onClose(); // Reset form setName(''); setPrice(''); setCategory(''); setDescription(''); setImage(''); }, [name, price, category, description, image, onAddProduct, onClose]); if (!isOpen) return null; return (

Add New Product

setName(e.target.value)} required /> setPrice(e.target.value)} required step="0.01" min="0" />

setDescription(e.target.value)}
        />
        <input 
          type="text" 
          placeholder="Image URL (Optional)" 
          value={image}
          onChange={(e) => setImage(e.target.value)}
        />
        <div className="modal-actions">
          <button onClick={handleSubmit}>Add Product</button>
          <button onClick={onClose}>Cancel</button>
        </div>
      </div>
    </div>
  );
}

function client() {
  createRoot(document.getElementById("root")).render(
    <React.StrictMode>
      <App />
    </React.StrictMode>
  );
}

if (typeof document !== "undefined") { client(); }

export default async function server(request: Request): Promise<Response> {
  return new Response(`
    <html>
      <head>
        <title>Affiliate Marketplace</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <style>${css}</style>
      </head>
      <body>
        <div id="root"></div>
        <script src="https://esm.town/v/std/catch"></script>
        <script type="module" src="${import.meta.url}"></script>
      </body>
    </html>
  `, {
    headers: {
      "Content-Type": "text/html",
    },
  });
}

const css = `
body {
  margin: 0;
  font-family: system-ui, sans-serif;
  background-color: #f4f4f4;
  line-height: 1.6;
}

.app-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

header {
  text-align: center;
  margin-bottom: 20px;
}

.header-actions {
  display: flex;
  justify-content: space-between;
  margin-bottom: 15px;
}

.search-input {
  flex-grow: 1;
  margin-right: 10px;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.add-product-btn {
  background-color: #4CAF50;
  color: white;
  border: none;
  padding: 10px 15px;
  border-radius: 4px;
  cursor: pointer;
}

nav {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 20px;
}

nav button {
  background-color: #f1f1f1;
  border: none;
  padding: 10px 15px;
  border-radius: 4px;
  cursor: pointer;
}

nav button.active {
  background-color: #4CAF50;
  color: white;
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
}

.product-card {
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  transition: transform 0.3s;
}

.product-card:hover {
  transform: scale(1.03);
}

.product-image {
  width: 100%;
  height: 250px;
  object-fit: cover;
}

.product-details {
  padding: 15px;
}

.product-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
}

.price {
  font-weight: bold;
  color: #4CAF50;
}

.category {
  background-color: #f1f1f1;
  padding: 5px 10px;
  border-radius: 15px;
  font-size: 0.8em;
}

.buy-now-btn, .add-affiliate-btn {
  background-color: #2196F3;
  color: white;
  border: none;
  padding: 5px 10px;
  border-radius: 4px;
  cursor: pointer;
  text-decoration: none;
}

.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.modal-content {
  background: white;
  padding: 20px;
  border-radius: 8px;
  width: 400px;
  max-width: 90%;
}

.modal-content input,
.modal-content select,
.modal-content textarea {
  width: 100%;
  margin-bottom: 10px;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.modal-actions {
  display: flex;
  justify-content: space-between;
}

.affiliate-action-group {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.affiliate-hint {
  font-size: 0.7em;
  color: #888;
  margin-top: 5px;
}

.affiliate-help {
  text-align: right;
  margin-bottom: 10px;
}

.help-button {
  background-color: #f1f1f1;
  border: none;
  padding: 5px 10px;
  border-radius: 4px;
  cursor: pointer;
}

.affiliate-guide {
  text-align: center;
}

.guide-steps {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

.guide-step {
  flex: 1;
  margin: 0 10px;
  padding: 10px;
  background-color: #f1f1f1;
  border-radius: 8px;
}

.step-number {
  display: inline-block;
  width: 30px;
  height: 30px;
  background-color: #4CAF50;
  color: white;
  border-radius: 50%;
  text-align: center;
  line-height: 30px;
  margin-bottom: 10px;
}

.guide-tips {
  background-color: #e8f5e9;
  padding: 15px;
  border-radius: 8px;
}

.guide-tips ul {
  list-style-type: none;
  padding: 0;
}

.guide-tips li {
  margin-bottom: 10px;
  position: relative;
  padding-left: 20px;
}

.guide-tips li::before {
  content: "✅";
  position: absolute;
  left: 0;
}

.welcome-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  color: white;
  text-align: center;
  transition: opacity 0.5s ease-out;
}

.welcome-screen.fade-out {
  opacity: 0;
  pointer-events: none;
}

.welcome-content {
  text-align: center;
  animation: pulse 1.5s infinite alternate;
}

.dynamic-phrase {
  font-size: 1.2em;
  margin-top: 10px;
  opacity: 0.8;
}

.welcome-spinner {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

.spinner {
  border: 4px solid rgba(255, 255, 255, 0.3);
  border-top: 4px solid white;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  animation: spin 1s linear infinite;
}

@keyframes pulse {
  from { transform: scale(1); }
  to { transform: scale(1.05); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.error-screen {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
  text-align: center;
  background-color: #ffebee;
  color: #d32f2f;
}

footer {
  text-align: center;
  margin-top: 20px;
  padding: 10px;
  background-color: #f1f1f1;
}
`;</article></body></html>

Rajaram

Version 1