hexawulf · hexawulf · May 26, 2025 · May 31, 2025 · May 31, 2025 · May 31, 2025
diff --git a/.env.example b/.env.example
@@ -1,6 +1,7 @@
 # Port Configuration
 PORT=3001
 # PostgreSQL Configuration
+# Replace with the connection string for your database
 DATABASE_URL=postgresql://username:password@localhost:5432/codepatchwork
 PGDATABASE=codepatchwork
 PGUSER=username

diff --git a/README.md b/README.md
@@ -1,22 +1,72 @@
 # CodePatchwork 🧩
+<div align="center">
 
-A visual code snippet manager that combines the visual appeal of Pinterest with the functionality of GitHub Gists. CodePatchwork transforms how developers manage code snippets by replacing scattered text files and notes with a visually appealing, searchable repository.
+[![GitHub stars](https://img.shields.io/github/stars/hexawulf/CodePatchwork?style=social)](https://github.com/hexawulf/CodePatchwork/stargazers)
+[![Live Demo](https://img.shields.io/badge/🚀_Demo-Live-success?style=flat-square)](https://www.codepatchwork.com)
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg?style=flat-square)](https://opensource.org/licenses/MIT)
+
+**Transform your scattered code snippets into a beautiful, searchable visual library**
+
+*A visual code snippet manager that combines the visual appeal of Pinterest with the functionality of GitHub Gists.*
 
 ![CodePatchwork Banner](codepatchwork-banner.png)
 
+</div>
+
+## 🌟 **Try CodePatchwork Live!**
+
+<div align="center">
+
+### **👉 [🚀 EXPERIENCE THE DEMO](https://www.codepatchwork.com) 👈**
+
+*See CodePatchwork in action - no installation required!*
+
+[![Live Demo](https://img.shields.io/badge/🚀_Live_Demo-CodePatchwork.com-blue?style=for-the-badge&logoColor=white)](https://www.codepatchwork.com)
+
+</div>
+
+---
+
+## 📋 Table of Contents
+- [🌟 Live Demo](#-try-codepatchwork-live)
+- [✨ Features](#-features)
+- [🚀 Getting Started](#-getting-started)
+- [🔧 Usage](#-usage)
+- [🛠️ Technologies](#️-technologies-used)
+- [🤝 Contributing](#-contributing)
+
+## ⚡ Quick Start
+
+Want to jump right in? **[Try the live demo](https://www.codepatchwork.com)** - no installation needed!
+
+For local development, you'll need Node.js 18+ and PostgreSQL. See detailed setup below ⬇️
+
 ## ✨ Features
 
-- **Visual Organization**: Manage code snippets with a Pinterest-style visual interface
-- **Syntax Highlighting**: Automatic code highlighting for 100+ programming languages
-- **Powerful Search & Filtering**: Find snippets by language, tags, or full-text search
-- **Collections**: Organize snippets into custom collections for better categorization
-- **Tags & Metadata**: Add tags and descriptions to make snippets more discoverable
-- **Authentication**: Secure sign-in with Google OAuth or email/password
-- **Responsive Design**: Works on desktop, tablet, and mobile devices
-- **Sharing**: Share snippets publicly with customizable links
-- **Import/Export**: Easily backup or migrate your snippets
-- **Dark/Light Themes**: Choose your preferred visual theme for better readability
-- **Comment System**: Collaborate and discuss code with other users
+### 🎨 **Visual Experience**
+- **Pinterest-Style Interface** - Visually appealing snippet organization
+- **Syntax Highlighting** - Beautiful code display for 100+ languages
+- **Dark/Light Themes** - Customizable visual experience
+- **Responsive Design** - Perfect on desktop, tablet, and mobile
+
+### 🔍 **Organization & Discovery**
+- **Smart Search & Filtering** - Find snippets by language, tags, or content
+- **Custom Collections** - Organize snippets into themed groups
+- **Tags & Metadata** - Rich categorization and discovery
+- **Import/Export** - Easy backup and migration
+
+### 🤝 **Collaboration & Sharing**
+- **Public Sharing** - Share snippets with customizable links
+- **Comment System** - Collaborate and discuss code
+- **Secure Authentication** - Google OAuth or email/password
+
+## 📸 Screenshots
+
+![Main Interface](screenshots/main-interface.png)
+*Beautiful Pinterest-style code snippet organization*
+
+![Dark Mode](screenshots/dark-mode.png)
+*Elegant dark theme for comfortable coding*
 
 ## 🚀 Getting Started
 
@@ -139,9 +189,16 @@ A visual code snippet manager that combines the visual appeal of Pinterest with
 
 - `npm run dev` - Start development server
 - `npm run build` - Build for production
+- `npm run test:logger` - Verify Winston file logging in `dist`
 - `npm run db:push` - Push schema changes to database
 - `npm run db:studio` - Open Drizzle Studio to manage database
 
+### Quick Logger Test
+
+After running `npm run build`, execute `npm run test:logger` to verify that
+`/home/zk/logs/codepatchwork.log` is created. The test script writes a few
+messages using the bundled logger to ensure file logging works in production.
+
 ## 📝 License
 
 This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
@@ -154,6 +211,18 @@ Contributions are welcome! Please see [CONTRIBUTING.md](CONTRIBUTING.md) for det
 
 For questions or support, please open an issue on the GitHub repository.
 
+## 🌟 **Ready to Transform Your Code Snippets?**
+
+<div align="center">
+
+### **[🚀 Try CodePatchwork Now](https://www.codepatchwork.com)**
+
+[![Star this repo](https://img.shields.io/badge/⭐_Star_this_repo-black?style=for-the-badge&logo=github)](https://github.com/hexawulf/CodePatchwork)
+[![Report Bug](https://img.shields.io/badge/🐛_Report_Bug-red?style=for-the-badge)](https://github.com/hexawulf/CodePatchwork/issues)
+[![Request Feature](https://img.shields.io/badge/💡_Request_Feature-blue?style=for-the-badge)](https://github.com/hexawulf/CodePatchwork/issues)
+
+</div>
+
 ---
 
 Made with ❤️ by [hexawulf](https://github.com/hexawulf)
diff --git a/client/index.html b/client/index.html
@@ -11,6 +11,13 @@
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Fira+Code:wght@400;500&display=swap" rel="stylesheet">
+
+    <!-- Favicon links - order matters for browser compatibility -->
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg">
+    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
+    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
+    <link rel="shortcut icon" href="/favicon.ico">
   </head>
   <body>
     <div id="root"></div>

diff --git a/client/src/components/Logo.tsx b/client/src/components/Logo.tsx
@@ -0,0 +1,46 @@
+// src/components/Logo.tsx
+import React from 'react';
+
+interface LogoProps {
+  size?: number;
+  className?: string;
+}
+
+export const CodePatchworkLogo: React.FC<LogoProps> = ({ 
+  size = 32, 
+  className = "" 
+}) => {
+  return (
+    <svg 
+      viewBox="0 0 256 256" 
+      xmlns="http://www.w3.org/2000/svg" 
+      role="img" 
+      aria-label="CodePatchwork Icon Logo"
+      width={size}
+      height={size}
+      className={className}
+    >
+      <style>
+        {`
+          .bg { fill: hsl(207, 90%, 54%); }
+          .stitch { stroke: hsl(240, 3.7%, 15.9%); stroke-width: 2; stroke-dasharray: 6, 6; fill: none; }
+          .symbol { fill: hsl(0, 0%, 98%); font-family: 'Courier New', monospace; font-weight: bold; font-size: 24px; dominant-baseline: middle; text-anchor: middle; }
+        `}
+      </style>
+      <rect className="bg" width="256" height="256" rx="16" ry="16"/>
+      <line className="stitch" x1="85.3" y1="0" x2="85.3" y2="256"/>
+      <line className="stitch" x1="170.6" y1="0" x2="170.6" y2="256"/>
+      <line className="stitch" x1="0" y1="85.3" x2="256" y2="85.3"/>
+      <line className="stitch" x1="0" y1="170.6" x2="256" y2="170.6"/>
+      <text className="symbol" x="42.6" y="42.6">{"{}"}</text>
+      <text className="symbol" x="128" y="42.6">{"<>"}</text>
+      <text className="symbol" x="213.3" y="42.6">//</text>
+      <text className="symbol" x="42.6" y="128">[]</text>
+      <text className="symbol" x="128" y="128">JS</text>
+      <text className="symbol" x="213.3" y="128">PY</text>
+      <text className="symbol" x="42.6" y="213.3">01</text>
+      <text className="symbol" x="128" y="213.3">.PY</text>
+      <text className="symbol" x="213.3" y="213.3">{"⎇"}</text>
+    </svg>
+  );
+};
diff --git a/client/src/main.tsx b/client/src/main.tsx
@@ -7,6 +7,11 @@ import { AuthProvider } from "./contexts/AuthContext";
 import { QueryClientProvider } from "@tanstack/react-query";
 import { queryClient } from "@/lib/queryClient";
 
+// Disable console.log in production to avoid verbose output
+if (process.env.NODE_ENV === "production") {
+  console.log = () => {};
+}
+
 const root = createRoot(document.getElementById("root")!);
 root.render(
   <QueryClientProvider client={queryClient}>

diff --git a/codepatchwork-db-export.zip b/codepatchwork-db-export.zip
diff --git a/db-export/README.md b/db-export/README.md
diff --git a/db-export/complete_dump.dump b/db-export/complete_dump.dump
diff --git a/db-export/data.sql b/db-export/data.sql
diff --git a/db-export/schema.sql b/db-export/schema.sql
diff --git a/db-test.js b/db-test.js
diff --git a/ecosystem.config.cjs b/ecosystem.config.cjs
@@ -1,16 +1,12 @@
 module.exports = {
-  apps: [{
-    name: "codepatchwork",
-    script: "npm",
-    args: "start",
-    cwd: "/home/zk/projects/CodePatchwork",
-    env: {
-      NODE_ENV: "production",
-      PORT: 3001  // Add this line
-    },
-    instances: 1,
-    autorestart: true,
-    watch: false,
-    max_memory_restart: "1G"
-  }]
+  apps: [
+    {
+      name: "codepatchwork",
+      script: "dist/index.js",
+      node_args: "-r dotenv/config",
+      env: {
+        NODE_ENV: "production"
+      }
+    }
+  ]
 };