🏠 Roofing & Plumbing Marketplace

\n {products.map(product => (\n

{product.name}

\n {product.category === 'roofing' ? '🏠 Roofing' : '🚰 Plumbing'}\n

💰 {formatNaira(product.price)}

{product.description}

\n ))}\n

\n setNewProduct({...newProduct, name: e.target.value})}\n required\n />\n setNewProduct({...newProduct, price: e.target.value})}\n required\n />\n setNewProduct({...newProduct, category: e.target.value})}\n >\n \n \n \n

setNewProduct({...newProduct, description: e.target.value})}\n            required\n          />\n          <button type=\"submit\">List Service</button>\n        </form>\n      </div>\n      \n      <div className=\"orders-section\">\n        <h2>📦 Place an Order</h2>\n        <form onSubmit={placeOrder} className=\"order-form\">\n          <select\n            value={newOrder.productId}\n            onChange={(e) => setNewOrder({...newOrder, productId: e.target.value})}\n            required\n          >\n            <option value=\"\">Select a Product</option>\n            {products.map(product => (\n              <option key={product.id} value={product.id}>\n                {product.name} - {formatNaira(product.price)}\n              </option>\n            ))}\n          </select>\n          <input \n            type=\"number\"\n            placeholder=\"Quantity\"\n            value={newOrder.quantity}\n            onChange={(e) => setNewOrder({...newOrder, quantity: parseInt(e.target.value)})}\n            min=\"1\"\n            required\n          />\n          <input \n            placeholder=\"Your Name\"\n            value={newOrder.customerName}\n            onChange={(e) => setNewOrder({...newOrder, customerName: e.target.value})}\n            required\n          />\n          <input \n            placeholder=\"Phone Number\"\n            value={newOrder.customerPhone}\n            onChange={(e) => setNewOrder({...newOrder, customerPhone: e.target.value})}\n            required\n          />\n          <textarea \n            placeholder=\"Delivery Address\"\n            value={newOrder.customerAddress}\n            onChange={(e) => setNewOrder({...newOrder, customerAddress: e.target.value})}\n            required\n          />\n          <button type=\"submit\">Place Order</button>\n        </form>\n\n        <div className=\"orders-list\">\n          <h3>🛒 Your Orders</h3>\n          {orders.map(order => (\n            <div key={order.id} className=\"order-card\">\n              <p>Order #{order.id}</p>\n              <p>Product: {products.find(p => p.id === order.productId)?.name}</p>\n              <p>Quantity: {order.quantity}</p>\n              <p>Total: {formatNaira(order.totalPrice)}</p>\n              <p>Status: {order.status}</p>\n            </div>\n          ))}\n        </div>\n      </div>\n      \n      <div className=\"chat-section\">\n        <h2>💬 Contractor Community Chat</h2>\n        <div className=\"message-list\">\n          {messages.map(msg => (\n            <div key={msg.id} className=\"message\">\n              <strong>{msg.username}</strong>: {msg.content}\n            </div>\n          ))}\n        </div>\n        <form onSubmit={sendMessage} className=\"message-form\">\n          <input \n            placeholder=\"Type a message...\" \n            value={newMessage}\n            onChange={(e) => setNewMessage(e.target.value)}\n            disabled={!username}\n          />\n          <button type=\"submit\" disabled={!username}>Send</button>\n        </form>\n        {!username && (\n          <p className=\"username-prompt\">Please set a username to chat</p>\n        )}\n      </div>\n    </div>\n  );\n}\n\nfunction client() {\n  createRoot(document.getElementById(\"root\")).render(<App />);\n}\nif (typeof document !== \"undefined\") { client(); }\n\nexport default async function server(request: Request): Promise<Response> {\n  const { sqlite } = await import(\"https://esm.town/v/stevekrouse/sqlite\");\n  const KEY = \"createMarketplaceApp\";\n  const SCHEMA_VERSION = 8;\n\n  // Initialize Products Table with Category\n  await sqlite.execute(`\n    CREATE TABLE IF NOT EXISTS ${KEY}_products_${SCHEMA_VERSION} (\n      id INTEGER PRIMARY KEY AUTOINCREMENT,\n      name TEXT NOT NULL,\n      price REAL NOT NULL,\n      description TEXT,\n      category TEXT NOT NULL,\n      created_at DATETIME DEFAULT CURRENT_TIMESTAMP\n    )\n  `);\n\n  // Initialize Messages Table\n  await sqlite.execute(`\n    CREATE TABLE IF NOT EXISTS ${KEY}_messages_${SCHEMA_VERSION} (\n      id INTEGER PRIMARY KEY AUTOINCREMENT,\n      username TEXT NOT NULL,\n      content TEXT NOT NULL,\n      created_at DATETIME DEFAULT CURRENT_TIMESTAMP\n    )\n  `);\n\n  // Initialize Orders Table\n  await sqlite.execute(`\n    CREATE TABLE IF NOT EXISTS ${KEY}_orders_${SCHEMA_VERSION} (\n      id INTEGER PRIMARY KEY AUTOINCREMENT,\n      productId INTEGER NOT NULL,\n      quantity INTEGER NOT NULL,\n      customerName TEXT NOT NULL,\n      customerPhone TEXT NOT NULL,\n      customerAddress TEXT NOT NULL,\n      totalPrice REAL NOT NULL,\n      status TEXT NOT NULL,\n      created_at DATETIME DEFAULT CURRENT_TIMESTAMP\n    )\n  `);\n\n  // Handle Product Endpoints\n  if (request.method === 'GET' && new URL(request.url).pathname === '/products') {\n    const products = await sqlite.execute(`SELECT * FROM ${KEY}_products_${SCHEMA_VERSION}`);\n    return Response.json(products.rows);\n  }\n\n  if (request.method === 'POST' && new URL(request.url).pathname === '/products') {\n    const { name, price, description, category } = await request.json();\n    await sqlite.execute(\n      `INSERT INTO ${KEY}_products_${SCHEMA_VERSION} (name, price, description, category) VALUES (?, ?, ?, ?)`,\n      [name, price, description, category]\n    );\n    return new Response('Service Listed', { status: 200 });\n  }\n\n  // Handle Orders Endpoints\n  if (request.method === 'GET' && new URL(request.url).pathname === '/orders') {\n    const orders = await sqlite.execute(`\n      SELECT * FROM ${KEY}_orders_${SCHEMA_VERSION} \n      ORDER BY created_at DESC \n      LIMIT 50\n    `);\n    return Response.json(orders.rows);\n  }\n\n  if (request.method === 'POST' && new URL(request.url).pathname === '/orders') {\n    const { productId, quantity, customerName, customerPhone, customerAddress, totalPrice, status } = await request.json();\n    await sqlite.execute(\n      `INSERT INTO ${KEY}_orders_${SCHEMA_VERSION} \n      (productId, quantity, customerName, customerPhone, customerAddress, totalPrice, status) \n      VALUES (?, ?, ?, ?, ?, ?, ?)`,\n      [productId, quantity, customerName, customerPhone, customerAddress, totalPrice, status]\n    );\n    return new Response('Order Placed', { status: 200 });\n  }\n\n  // Handle Chat Endpoints\n  if (request.method === 'GET' && new URL(request.url).pathname === '/messages') {\n    const messages = await sqlite.execute(`\n      SELECT * FROM ${KEY}_messages_${SCHEMA_VERSION} \n      ORDER BY created_at DESC \n      LIMIT 50\n    `);\n    return Response.json(messages.rows);\n  }\n\n  if (request.method === 'POST' && new URL(request.url).pathname === '/chat') {\n    const { content, username } = await request.json();\n    if (!content || !username) {\n      return new Response('Username and content are required', { status: 400 });\n    }\n    await sqlite.execute(\n      `INSERT INTO ${KEY}_messages_${SCHEMA_VERSION} (username, content) VALUES (?, ?)`,\n      [username, content]\n    );\n    return new Response('Message Sent', { status: 200 });\n  }\n\n  return new Response(`\n    <html>\n      <head>\n        <title>Roofing & Plumbing Marketplace</title>\n        <style>${css}</style>\n      </head>\n      <body>\n        <div id=\"root\"></div>\n        <script src=\"https://esm.town/v/std/catch\"></script>\n        <script type=\"module\" src=\"${import.meta.url}\"></script>\n      </body>\n    </html>\n  `, {\n    headers: { \"content-type\": \"text/html\" }\n  });\n}\n\nconst css = `\nbody {\n  font-family: system-ui, sans-serif;\n  margin: 0;\n  padding: 20px;\n  background-color: black;\n  color: #4169E1; /* Royal Blue */\n}\n.container {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 20px;\n  position: relative;\n}\n.products-section, .chat-section, .orders-section {\n  background: #111; /* Dark gray to soften black background */\n  border-radius: 8px;\n  padding: 20px;\n  width: calc(33.33% - 20px);\n  box-shadow: 0 4px 6px rgba(65,105,225,0.2); /* Blue shadow */\n}\n.product-list, .message-list, .orders-list {\n  max-height: 400px;\n  overflow-y: auto;\n}\n.product-card, .message, .order-card {\n  background: #222; /* Slightly lighter dark background */\n  border-radius: 4px;\n  padding: 10px;\n  margin-bottom: 10px;\n  border: 1px solid #4169E1; /* Blue border */\n}\n.product-category {\n  font-size: 0.8em;\n  color: #4169E1; /* Blue color */\n  margin-bottom: 5px;\n}\ninput, textarea, select {\n  width: 100%;\n  margin-bottom: 10px;\n  padding: 8px;\n  border: 1px solid #4169E1;\n  border-radius: 4px;\n  background-color: #111;\n  color: #4169E1;\n}\nbutton {\n  background-color: #4169E1;\n  color: black;\n  border: none;\n  padding: 10px 15px;\n  border-radius: 4px;\n  cursor: pointer;\n  transition: background-color 0.3s ease;\n  width: 100%;\n}\nbutton:hover {\n  background-color: #6495ED; /* Cornflower Blue */\n}\nbutton:disabled {\n  background-color: #1E4D8C; /* Darker blue */\n  cursor: not-allowed;\n}\n.username-modal {\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background: rgba(0,0,0,0.8);\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  z-index: 1000;\n}\n.username-modal form {\n  background: #111;\n  padding: 30px;\n  border-radius: 8px;\n  width: 300px;\n  text-align: center;\n  border: 1px solid #4169E1;\n}\n.username-prompt {\n  color: #4169E1;\n  text-align: center;\n}\nh2, h3 {\n  color: #4169E1;\n}\nstrong {\n  color: #4169E1;\n}\n@media (max-width: 1024px) {\n  .products-section, .chat-section, .orders-section {\n    width: 100%;\n  }\n}\n`;","deleted","label",[98],"permalink","https://www.val.town/x/IfeomaT89/createMarketplaceApp/code/main.tsx","extension","actionData","errors"]
</article></body></html>

Enter Your Username

🏠 Roofing & Plumbing Marketplace

{product.name}