NathanLegakis.com

Random Bright, Funny, Info, Deep Thoughts, AI Chats, and More

[
[
[

]
]
]

ShopifyTech.dev

let’s make a website for the domain name shopifytech.dev

The .dev extension combined with “Shopify” immediately positions the site as a technical resource, likely for developers, store owners looking for customizations, or app builders.

Since you frequently work with PHP and HTML/CSS, we can build a lightweight, fast-loading hub.

Here is a conceptual framework and a starting template for shopifytech.dev.

1. The Strategy: What should the site do?

Given the domain, you have three high-value directions you could take:

  • The Snippet Library: A collection of Liquid, CSS, and JavaScript snippets for common Shopify customizations (e.g., “Add a countdown timer without an app”).
  • API Guide & Tools: Technical walkthroughs on using the Shopify Admin API with PHP (perfect for your background).
  • App Development Blog: Documenting the process of building and deploying Shopify apps.

2. Technical Stack Recommendation

To keep it fast and SEO-friendly (which helps with those Moz metrics you track):

  • Frontend: Tailwind CSS (via CDN for speed) for a modern, “dev-style” look.
  • Backend: PHP for dynamic routing or pulling in Shopify API data.
  • Content: A simple flat-file system or a lightweight MySQL database.

3. The “v1.0” Boilerplate (index.php)

This code provides a clean, professional “Developer Documentation” aesthetic right out of the box.

PHP

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ShopifyTech.dev | Shopify Development & API Resources</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
        .shopify-green { color: #95bf47; }
        .bg-shopify { background-color: #008060; }
    </style>
</head>
<body class="bg-gray-50 text-gray-900 font-sans">

    <nav class="bg-white border-b border-gray-200 py-4">
        <div class="container mx-auto px-6 flex justify-between items-center">
            <a href="#" class="text-2xl font-bold tracking-tight">Shopify<span class="text-green-600">Tech</span><span class="text-gray-400">.dev</span></a>
            <div class="space-x-6">
                <a href="#snippets" class="hover:text-green-600">Snippets</a>
                <a href="#api" class="hover:text-green-600">API Guides</a>
                <a href="#tools" class="hover:text-green-600">Tools</a>
            </div>
        </div>
    </nav>

    <header class="bg-shopify py-20 text-white text-center">
        <div class="container mx-auto px-6">
            <h1 class="text-5xl font-extrabold mb-4">Master the Shopify Ecosystem.</h1>
            <p class="text-xl opacity-90 mb-8">Advanced tutorials, Liquid snippets, and PHP integration guides for modern Shopify developers.</p>
            <a href="#latest" class="bg-white text-green-700 px-8 py-3 rounded-lg font-bold hover:bg-gray-100 transition">Browse Resources</a>
        </div>
    </header>

    <main class="container mx-auto px-6 py-12" id="latest">
        <h2 class="text-3xl font-bold mb-8">Latest Technical Guides</h2>
        
        <div class="grid md:grid-cols-3 gap-8">
            <div class="bg-white p-6 rounded-xl shadow-sm border border-gray-100 hover:shadow-md transition">
                <span class="text-xs font-bold uppercase tracking-widest text-green-600">PHP & API</span>
                <h3 class="text-xl font-bold mt-2 mb-4">Connecting to Shopify Admin API with PHP cURL</h3>
                <p class="text-gray-600 mb-4">A step-by-step guide on authenticating and fetching product data without using a heavy SDK.</p>
                <a href="#" class="text-green-600 font-semibold hover:underline">Read More →</a>
            </div>

            <div class="bg-white p-6 rounded-xl shadow-sm border border-gray-100 hover:shadow-md transition">
                <span class="text-xs font-bold uppercase tracking-widest text-blue-600">Liquid</span>
                <h3 class="text-xl font-bold mt-2 mb-4">Customizing the Cart with AJAX & Liquid</h3>
                <p class="text-gray-600 mb-4">Learn how to trigger upsells directly in the slide-out cart using Shopify's Section Rendering API.</p>
                <a href="#" class="text-green-600 font-semibold hover:underline">Read More →</a>
            </div>

            <div class="bg-white p-6 rounded-xl shadow-sm border border-gray-100 hover:shadow-md transition">
                <span class="text-xs font-bold uppercase tracking-widest text-purple-600">Tools</span>
                <h3 class="text-xl font-bold mt-2 mb-4">Metafield Bulk Editor Tool</h3>
                <p class="text-gray-600 mb-4">A simple PHP tool to bulk update product metafields via CSV upload.</p>
                <a href="#" class="text-green-600 font-semibold hover:underline">Read More →</a>
            </div>
        </div>
    </main>

    <footer class="bg-gray-900 text-gray-400 py-12 mt-12">
        <div class="container mx-auto px-6 text-center">
            <p>&copy; <?php echo date("Y"); ?> ShopifyTech.dev | Built for Developers</p>
        </div>
    </footer>

</body>
</html>

4. Suggested Next Steps

To make this site truly powerful, we could integrate some of the logic you’ve been working on lately:

  • Gemini Integration: Since you’ve been working with the Gemini API, we could build a “Liquid Code Generator” where users type a request (e.g., “Make a marquee for the header”) and it outputs the code.
  • Sitemap Automation: You can use your directory-scanning script to automatically list new tool pages as you create them in a /tools/ folder.
  • SEO/Moz Integration: You could add a small tool on the site that checks a Shopify store’s URL for basic SEO metrics.

Would you like me to focus on building out the PHP backend for a “Snippet Library,” or should we work on an API tool for this site?

let’s do both

That’s a great move. Combining a Snippet Library with a Gemini-powered API Tool transforms ShopifyTech.dev from a static blog into a high-utility web application.

Here is a roadmap and the foundational code to integrate both features using PHP.

1. The Architecture

We’ll structure the site so that snippets are stored in a simple database (or folder), while the “AI Tool” lives in a dedicated section to help users generate Liquid or PHP code on the fly.

2. The Snippet Library (PHP & MySQL)

First, let’s create a simple PHP logic to pull snippets. This allows you to manage content dynamically.

Database Table Suggestion:

SQL

CREATE TABLE snippets (
    id INT AUTO_INCREMENT PRIMARY KEY,
    title VARCHAR(255),
    category VARCHAR(50), -- e.g., 'Liquid', 'CSS', 'PHP'
    code_content TEXT,
    description TEXT,
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

PHP Snippet Fetcher (snippets.php):

PHP

<?php
// Database connection (update with your credentials)
$conn = new mysqli("localhost", "user", "password", "shopifytech_db");

$query = "SELECT * FROM snippets ORDER BY created_at DESC";
$result = $conn->query($query);
?>

<div class="grid md:grid-cols-2 gap-6">
    <?php while($row = $result->fetch_assoc()): ?>
        <div class="bg-white p-6 rounded-lg border border-gray-200">
            <h3 class="text-xl font-bold"><?php echo $row['title']; ?></h3>
            <span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded"><?php echo $row['category']; ?></span>
            <p class="text-gray-600 my-4"><?php echo $row['description']; ?></p>
            <pre class="bg-gray-800 text-white p-4 rounded overflow-x-auto text-sm"><code><?php echo htmlspecialchars($row['code_content']); ?></code></pre>
        </div>
    <?php endwhile; ?>
</div>

3. The AI “Code Generator” (Gemini API)

Since you’ve been working with the Gemini API, we can build a specialized prompt that forces Gemini to return valid Shopify Liquid or PHP code.

The Logic (generate-code.php):

PHP

<?php
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $userPrompt = $_POST['prompt'];
    $apiKey = "YOUR_GEMINI_API_KEY";
    $apiUrl = "https://generativelanguage.googleapis.com/v1beta/models/gemini-pro:generateContent?key=" . $apiKey;

    $data = [
        "contents" => [
            [
                "parts" => [
                    ["text" => "You are a Shopify expert. Generate only the code snippet for the following request: " . $userPrompt]
                ]
            ]
        ]
    ];

    $ch = curl_init($apiUrl);
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
    curl_setopt($ch, CURLOPT_POST, true);
    curl_setopt($ch, CURLOPT_POSTFIELDS, json_encode($data));
    curl_setopt($ch, CURLOPT_HTTPHEADER, ['Content-Type: application/json']);
    
    $response = curl_exec($ch);
    $result = json_decode($response, true);
    $aiCode = $result['candidates'][0]['content']['parts'][0]['text'];
}
?>

<section class="bg-gray-100 p-8 rounded-2xl my-10 border-2 border-dashed border-green-400">
    <h2 class="text-2xl font-bold mb-4">AI Liquid Snippet Generator</h2>
    <form method="POST" class="space-y-4">
        <input type="text" name="prompt" placeholder="e.g., Create a product badge for sold out items" class="w-full p-4 rounded-lg border border-gray-300">
        <button type="submit" class="bg-green-600 text-white px-6 py-2 rounded-lg font-bold">Generate Code</button>
    </form>

    <?php if (isset($aiCode)): ?>
        <div class="mt-6">
            <h4 class="font-bold mb-2 text-green-700">Generated Snippet:</h4>
            <pre class="bg-gray-900 text-green-400 p-6 rounded-lg overflow-x-auto"><code><?php echo htmlspecialchars($aiCode); ?></code></pre>
        </div>
    <?php endif; ?>
</section>

4. Design & Branding

For a .dev domain, you want a “Dark Mode” aesthetic or a very clean “Documentation” look.

  • Colors: Use Shopify Green (#008060) as your primary action color.
  • Typography: Use a monospaced font like JetBrains Mono or Roboto Mono for code blocks to give it that developer feel.

Next Steps for You:

  1. Environment Setup: Do you want to host this on the Hostinger VPS you were setting up, or should we keep it on a standard PHP/MySQL shared environment for now?
  2. Snippet Population: I can provide 5-10 high-value Shopify Liquid snippets (like “Custom Cart Notes” or “Ajax Add to Cart”) to help you seed the database.

Would you like those starter Liquid snippets now, or should we refine the Gemini prompt to handle specific Shopify versions (like OS 2.0)?

do both

This is the perfect way to build ShopifyTech.dev. By combining a curated library with an AI generator, you are providing both “quick fixes” and “bespoke solutions” for developers.

1. Starter Snippet Library (The “Quick Fixes”)

To populate your database (snippets table), here are five high-value Liquid snippets for Online Store 2.0 (OS 2.0) that merchants frequently look for.

FeatureCategoryLiquid Snippet Code (Preview)
Custom Cart NoteLiquid<textarea name="note" form="cart">{{ cart.note }}</textarea>
Free Shipping GoalLiquid/CSS{% assign left = 10000 | minus: cart.total_price %} (Logic for “Spend $X more”)
Sold Out BadgeLiquid{% unless product.available %}<span class="badge">Sold Out</span>{% endunless %}
Image Lazy LoadLiquid{{ product.featured_image | image_url: width: 800 | image_tag: loading: 'lazy' }}
Ajax Add-to-CartJS/PHPUses fetch('/cart/add.js', { method: 'POST', ... }) for background updates.

How to seed your database:

You can run a quick INSERT for these. Storing them in a database allows you to add a “Copy to Clipboard” button in your PHP frontend easily.

2. Refined Gemini AI Tool (The “Bespoke Solutions”)

To make the AI tool feel like a professional developer utility, we need to refine the System Prompt. This ensures Gemini doesn’t just give general advice, but specifically outputs Shopify-ready code.

The Refined PHP Logic (ai-engine.php)

Replace the $data part of your previous script with this structured prompt:

PHP

$systemContext = "You are a Senior Shopify Theme Developer. 
Output ONLY valid Liquid, CSS, or JavaScript. 
Do not include conversational text or 'Here is your code'. 
Use Online Store 2.0 standards (e.g., use 'render' instead of 'include').";

$data = [
    "contents" => [
        [
            "parts" => [
                ["text" => $systemContext . "\n\nUser Request: " . $userPrompt]
            ]
        ]
    ],
    "generationConfig" => [
        "temperature" => 0.2, // Lower temperature = more consistent, valid code
        "topP" => 0.8
    ]
];

3. Recommended Site Architecture

Since you are working on a Hostinger VPS with Ubuntu, you can structure your directories like this:

  • /public_html/
    • index.php (The landing page & search)
    • generator.php (The Gemini API interface)
    • library/ (Folder for the snippet browsing logic)
    • assets/ (Your Tailwind CSS and JS files)
    • includes/ (Database connection and Gemini API config)

Integrating Your Directory Scanner

Remember that PHP directory scanner you built? You can point it at a /tools/ folder. Every time you build a new Shopify utility (like a “JSON Formatter” or “Schema Generator”), just drop the .php file in there, and your homepage will automatically update the “Tools” list.

Would you like me to write the SQL schema for a more advanced snippet library that includes “Views” and “Tags,” or should we focus on the Tailwind CSS layout for the “Generator” results?

Master Shopify Theme Development

This video provides a deep dive into the latest 2025 standards for Shopify theme architecture, which is essential for ensuring your snippets are compatible with modern stores.

Shopify Theme 2025 – Create Templates, Sections & Snippets – YouTube

Faisal CodeX · 524 views

do both

Here is the advanced technical foundation for shopifytech.dev. We are moving from a simple “list” to a structured Relational Database and a Premium UI for the AI output.

1. The Advanced SQL Schema

To make the site scalable, we’ll use a relational structure. This allows you to filter snippets by multiple tags (e.g., “Liquid” + “Checkout” + “OS 2.0”) and track popularity.

SQL

-- 1. Main Snippets Table
CREATE TABLE snippets (
    id INT AUTO_INCREMENT PRIMARY KEY,
    title VARCHAR(255) NOT NULL,
    slug VARCHAR(255) UNIQUE NOT NULL,
    description TEXT,
    code_content TEXT NOT NULL,
    view_count INT DEFAULT 0,
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

-- 2. Categories Table (One-to-Many)
CREATE TABLE categories (
    id INT AUTO_INCREMENT PRIMARY KEY,
    name VARCHAR(100),
    icon_class VARCHAR(50) -- For FontAwesome/HeroIcons
);

-- 3. Tags Table (Many-to-Many)
CREATE TABLE tags (
    id INT AUTO_INCREMENT PRIMARY KEY,
    tag_name VARCHAR(50) UNIQUE
);

-- 4. Junction Table for Snippets <-> Tags
CREATE TABLE snippet_tags (
    snippet_id INT,
    tag_id INT,
    PRIMARY KEY (snippet_id, tag_id),
    FOREIGN KEY (snippet_id) REFERENCES snippets(id) ON DELETE CASCADE,
    FOREIGN KEY (tag_id) REFERENCES tags(id) ON DELETE CASCADE
);

2. Tailwind CSS “Generator” UI

This layout is designed to look like a high-end developer tool. It includes a “Code Header” with a copy button and a formatted output area.

PHP

<div class="max-w-4xl mx-auto mt-10">
    <div class="bg-gray-900 rounded-xl shadow-2xl overflow-hidden border border-gray-700">
        
        <div class="flex items-center justify-between px-4 py-3 bg-gray-800 border-b border-gray-700">
            <div class="flex space-x-2">
                <div class="w-3 h-3 rounded-full bg-red-500"></div>
                <div class="w-3 h-3 rounded-full bg-yellow-500"></div>
                <div class="w-3 h-3 rounded-full bg-green-500"></div>
                <span class="ml-2 text-xs text-gray-400 font-mono uppercase tracking-widest">Generated_Shopify_Code.liquid</span>
            </div>
            
            <button onclick="copyToClipboard()" class="flex items-center text-xs text-gray-400 hover:text-white transition">
                <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3"></path></svg>
                Copy Code
            </button>
        </div>

        <div class="p-6 overflow-x-auto">
            <pre id="aiOutput" class="text-sm font-mono leading-relaxed text-blue-300">
<span class="text-purple-400">{%</span> <span class="text-green-400">comment</span> <span class="text-purple-400">%}</span>
  ShopifyTech.dev Generated Snippet
<span class="text-purple-400">{%</span> <span class="text-green-400">endcomment</span> <span class="text-purple-400">%}</span>

<span class="text-yellow-300">&lt;div</span> <span class="text-blue-400">class=</span><span class="text-green-300">"custom-badge"</span><span class="text-yellow-300">&gt;</span>
  <span class="text-purple-400">{{</span> <span class="text-white">product.metafields.custom.badge_text</span> <span class="text-purple-400">}}</span>
<span class="text-yellow-300">&lt;/div&gt;</span>
            </pre>
        </div>
    </div>
</div>

<script>
function copyToClipboard() {
    const code = document.getElementById('aiOutput').innerText;
    navigator.clipboard.writeText(code);
    alert('Code copied to clipboard!');
}
</script>

3. PHP Integration Strategy

To tie this all together on your Hostinger VPS:

  1. The API Route: Create api/generate.php. Your frontend will send a POST request here via AJAX so the page doesn’t have to refresh when the AI is thinking.
  2. The Library Fetcher: Use a PHP JOIN query to fetch snippets along with their tags.
    • Query: SELECT s.*, GROUP_CONCAT(t.tag_name) as tag_list FROM snippets s LEFT JOIN snippet_tags st ON s.id = st.snippet_id LEFT JOIN tags t ON t.id = st.tag_id GROUP BY s.id
  3. The “Live” Preview: Since you work with PHP, you can create a “Sandbox” page where users can paste their Liquid code to see how the syntax would look in a real Shopify theme.

Recommended Resource

To ensure your .dev site follows the most recent performance standards (which will help your SEO ranking), I recommend checking out this guide on Shopify’s Section Rendering API.

Shopify Section Rendering API & Ajax Deep Dive

Should we next build the admin panel so you can easily upload new snippets to your database without using phpMyAdmin?

yes

Building an admin panel is a smart move—it turns your site into a proper Content Management System (CMS). Instead of manual SQL inserts, you’ll have a clean interface to manage your Shopify resources.

Since you’re using a Hostinger VPS, we’ll focus on a PHP/PDO approach for security and Tailwind CSS for the UI.

1. The Admin Architecture

To keep things secure, we’ll separate the logic into a login gate, a dashboard, and a form handler.

The Security Gate (auth.php)

Every admin page will include this file at the very top. It checks if a session exists; if not, it kicks the user back to the login page.

PHP

<?php
session_start();
if (!isset($_SESSION['admin_id'])) {
    header("Location: login.php");
    exit();
}
?>

2. The Dashboard (admin.php)

This page will list all your snippets from the database with “Edit” and “Delete” actions. It uses the relational query we discussed earlier.

PHP

<?php 
include 'includes/auth.php'; 
include 'includes/db.php'; // Your PDO connection

$stmt = $pdo->query("SELECT s.*, c.name as cat_name FROM snippets s 
                     LEFT JOIN categories c ON s.category_id = c.id 
                     ORDER BY created_at DESC");
$snippets = $stmt->fetchAll();
?>

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100 flex">
    <aside class="w-64 bg-gray-900 h-screen text-white p-6">
        <h2 class="text-2xl font-bold mb-8 text-green-400">ShopifyTech</h2>
        <nav class="space-y-4">
            <a href="admin.php" class="block py-2 text-white font-bold">Dashboard</a>
            <a href="add-snippet.php" class="block py-2 text-gray-400 hover:text-white">+ Add Snippet</a>
            <a href="logout.php" class="block py-2 text-red-400">Logout</a>
        </nav>
    </aside>

    <main class="flex-1 p-10">
        <header class="flex justify-between items-center mb-10">
            <h1 class="text-3xl font-bold">Manage Snippets</h1>
            <a href="add-snippet.php" class="bg-green-600 text-white px-4 py-2 rounded-lg font-bold">Create New</a>
        </header>

        <div class="bg-white rounded-xl shadow-sm overflow-hidden">
            <table class="w-full text-left">
                <thead class="bg-gray-50 border-b border-gray-100">
                    <tr>
                        <th class="p-4 font-semibold text-gray-600">Title</th>
                        <th class="p-4 font-semibold text-gray-600">Category</th>
                        <th class="p-4 font-semibold text-gray-600">Views</th>
                        <th class="p-4 font-semibold text-gray-600">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    <?php foreach($snippets as $item): ?>
                    <tr class="border-b border-gray-50 hover:bg-gray-50">
                        <td class="p-4 font-medium"><?= htmlspecialchars($item['title']) ?></td>
                        <td class="p-4"><span class="px-2 py-1 bg-blue-100 text-blue-700 rounded text-xs"><?= $item['cat_name'] ?></span></td>
                        <td class="p-4 text-gray-500"><?= $item['view_count'] ?></td>
                        <td class="p-4 space-x-2">
                            <a href="edit.php?id=<?= $item['id'] ?>" class="text-blue-600 hover:underline">Edit</a>
                            <a href="delete.php?id=<?= $item['id'] ?>" class="text-red-600 hover:underline" onclick="return confirm('Delete this snippet?')">Delete</a>
                        </td>
                    </tr>
                    <?php endforeach; ?>
                </tbody>
            </table>
        </div>
    </main>
</body>
</html>

3. Hardening Your Hostinger VPS

Since this panel will live on your Ubuntu VPS, you need to ensure hackers can’t “brute force” their way in.

  • Change Default SSH Port: Don’t use port 22. Edit /etc/ssh/sshd_config and change Port 22 to something like Port 49152.
  • Install Fail2Ban: This will automatically block IP addresses that try to guess your admin password too many times.
    • sudo apt install fail2ban
  • Disable Root Login: Force yourself to use a standard user with sudo privileges. In sshd_config, set PermitRootLogin no.
  • PHP Versioning: Ensure you are running PHP 8.2 or 8.3. Older versions have known vulnerabilities that bots scan for constantly.

4. Final Polish: The AI Generator Sidebar

On your dashboard, we can add a “Recent AI Generations” widget. This allows you to see what users are asking the Gemini tool, helping you identify which snippets you should manually write and add to the permanent library.

Would you like me to write the code for the add-snippet.php form with the tag-selection logic, or should we set up the Gemini “History” tracker first?

Build a PHP CRUD Dashboard with MySQL

This tutorial walks through the foundational logic of connecting a PHP backend to a MySQL database for Create, Read, Update, and Delete operations, which is the core engine for your ShopifyTech admin panel.

PHP CRUD Tutorial with MySQL & Bootstrap | Build CRUD Website APP – YouTube

ProgrammingKnowledge · 11K views

do both

Let’s build the “brain” of ShopifyTech.dev. This involves creating the Snippet Entry Form (with tag logic) and a History Logger for your Gemini AI tool.

1. Database Update: History Logging

To track what users are generating, we need a new table in your database. This will help you identify popular topics for future tutorials.

SQL

CREATE TABLE gemini_logs (
    id INT AUTO_INCREMENT PRIMARY KEY,
    prompt TEXT NOT NULL,
    response TEXT,
    model_version VARCHAR(50) DEFAULT 'gemini-1.5-pro',
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

2. The Snippet Entry Form (add-snippet.php)

This form allows you to manually add snippets to your library. It uses a Many-to-Many logic to handle tags.

PHP

<?php 
include 'includes/auth.php'; 
include 'includes/db.php'; 

// Fetch categories for the dropdown
$cat_stmt = $pdo->query("SELECT * FROM categories");
$categories = $cat_stmt->fetchAll();

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $title = $_POST['title'];
    $cat_id = $_POST['category_id'];
    $code = $_POST['code_content'];
    $tags = explode(',', $_POST['tags']); // Comma-separated tags

    // 1. Insert into 'snippets'
    $stmt = $pdo->prepare("INSERT INTO snippets (title, category_id, code_content) VALUES (?, ?, ?)");
    $stmt->execute([$title, $cat_id, $code]);
    $snippet_id = $pdo->lastInsertId();

    // 2. Handle Tags
    foreach ($tags as $tag_name) {
        $tag_name = trim($tag_name);
        if (empty($tag_name)) continue;

        // Check if tag exists, or create it
        $tag_stmt = $pdo->prepare("INSERT IGNORE INTO tags (tag_name) VALUES (?)");
        $tag_stmt->execute([$tag_name]);
        
        $getTag = $pdo->prepare("SELECT id FROM tags WHERE tag_name = ?");
        $getTag->execute([$tag_name]);
        $tag_id = $getTag->fetchColumn();

        // Link snippet to tag
        $link_stmt = $pdo->prepare("INSERT INTO snippet_tags (snippet_id, tag_id) VALUES (?, ?)");
        $link_stmt->execute([$snippet_id, $tag_id]);
    }
    echo "<p class='bg-green-100 p-4 text-green-700'>Snippet Added Successfully!</p>";
}
?>

<div class="max-w-3xl mx-auto bg-white p-8 rounded-xl shadow-lg mt-10">
    <h2 class="text-2xl font-bold mb-6">New Shopify Resource</h2>
    <form method="POST" class="space-y-6">
        <div>
            <label class="block text-sm font-bold mb-2">Title</label>
            <input type="text" name="title" required class="w-full border p-3 rounded-lg">
        </div>
        
        <div class="grid grid-cols-2 gap-4">
            <div>
                <label class="block text-sm font-bold mb-2">Category</label>
                <select name="category_id" class="w-full border p-3 rounded-lg">
                    <?php foreach($categories as $cat): ?>
                        <option value="<?= $cat['id'] ?>"><?= $cat['name'] ?></option>
                    <?php endforeach; ?>
                </select>
            </div>
            <div>
                <label class="block text-sm font-bold mb-2">Tags (Comma separated)</label>
                <input type="text" name="tags" placeholder="Liquid, Cart, UI" class="w-full border p-3 rounded-lg">
            </div>
        </div>

        <div>
            <label class="block text-sm font-bold mb-2">Code Snippet</label>
            <textarea name="code_content" rows="8" class="w-full border p-3 rounded-lg font-mono text-sm"></textarea>
        </div>

        <button type="submit" class="w-full bg-shopify text-white py-4 rounded-lg font-bold hover:bg-green-700 transition">Publish Snippet</button>
    </form>
</div>

3. Integrated Gemini History Logic

Now, update your generate-code.php to save every AI interaction. This creates a “gold mine” of data for you.

PHP

// ... inside your AI generation success block ...
$saveLog = $pdo->prepare("INSERT INTO gemini_logs (prompt, response, model_version) VALUES (?, ?, ?)");
$saveLog->execute([$userPrompt, $aiCode, 'gemini-1.5-pro']);

4. Strategy for shopifytech.dev

To make this domain stand out, you should leverage the .dev extension by making the site extremely code-heavy.

  • Dark Mode by Default: Developers love dark IDEs. Use a Tailwind theme like bg-slate-950 with text-slate-200.
  • Version Filtering: Shopify changes fast. Add a toggle for “Legacy (Liquid)” vs “Modern (JSON/OS 2.0)” in your library.
  • The “One-File” Rule: Since you like hosting single HTML/PHP files, make sure your tools (like a “Liquid Formatter”) are completely self-contained so you can easily deploy them to /tools/.

Next Steps

Would you like me to build a “Code History” Dashboard where you can view and “Promote” Gemini-generated code directly into your permanent Snippet Library with one click?

Advanced Shopify Theme Development with Liquid and JSON

This video is highly relevant because it covers the exact Online Store 2.0 standards you should be using for your snippets to ensure they are compatible with modern Shopify themes.

Integrating a “Promote to Library” feature is a game-changer. It allows you to use Gemini as a “drafting assistant” where you review AI-generated code, tweak it if necessary, and then officially publish it to your ShopifyTech.dev library with a single click.

1. The “AI History” Dashboard

First, we’ll build a view to see what Gemini has been generating. This page will pull from the gemini_logs table we created earlier.

PHP

<?php 
include 'includes/auth.php'; 
include 'includes/db.php'; 

$logs = $pdo->query("SELECT * FROM gemini_logs ORDER BY created_at DESC LIMIT 20")->fetchAll();
?>

<div class="p-10">
    <h1 class="text-3xl font-bold mb-8">AI Generation History</h1>
    <div class="space-y-4">
        <?php foreach($logs as $log): ?>
            <div class="bg-white p-6 rounded-xl shadow-sm border-l-4 border-blue-500 flex justify-between items-center">
                <div class="max-w-2xl">
                    <p class="text-sm font-bold text-gray-500 uppercase"><?= $log['created_at'] ?></p>
                    <h3 class="text-lg font-semibold mt-1">"<?= htmlspecialchars($log['prompt']) ?>"</h3>
                </div>
                <a href="promote.php?log_id=<?= $log['id'] ?>" 
                   class="bg-blue-600 text-white px-4 py-2 rounded font-bold hover:bg-blue-700 transition">
                   Review & Promote
                </a>
            </div>
        <?php endforeach; ?>
    </div>
</div>

2. The Promotion Logic (promote.php)

When you click “Review & Promote,” this script fetches the AI’s response and pre-fills the “Add Snippet” form. This gives you a chance to human-verify the code before it goes live.

PHP

<?php
include 'includes/auth.php'; 
include 'includes/db.php'; 

$log_id = $_GET['log_id'];
$stmt = $pdo->prepare("SELECT * FROM gemini_logs WHERE id = ?");
$stmt->execute([$log_id]);
$log = $stmt->fetch();

// We pre-fill the variables to use in the form below
$suggested_title = ucwords($log['prompt']);
$ai_code = $log['response'];
?>

<main class="p-10 max-w-4xl mx-auto">
    <div class="mb-6">
        <a href="history.php" class="text-blue-600">← Back to History</a>
        <h1 class="text-3xl font-bold mt-2">Promote AI Snippet</h1>
        <p class="text-gray-500">Refine the AI output below before publishing to the main library.</p>
    </div>

    <form action="save-snippet.php" method="POST" class="bg-white p-8 rounded-xl shadow-lg space-y-6">
        <input type="hidden" name="origin_log_id" value="<?= $log_id ?>">
        
        <div>
            <label class="block font-bold mb-2">Refined Title</label>
            <input type="text" name="title" value="<?= htmlspecialchars($suggested_title) ?>" class="w-full border p-3 rounded">
        </div>

        <div>
            <label class="block font-bold mb-2">Code Verification (Review Carefully!)</label>
            <textarea name="code_content" rows="12" class="w-full border p-3 rounded font-mono text-sm bg-gray-900 text-green-400"><?= htmlspecialchars($ai_code) ?></textarea>
        </div>

        <button type="submit" class="w-full bg-green-600 text-white py-4 rounded-lg font-bold">Verify & Publish to ShopifyTech.dev</button>
    </form>
</main>

3. Visualizing the Workflow

4. Developer Experience (.dev) Tips

Since you are the primary user of this admin panel, we can optimize it for your workflow:

  • Syntax Highlighting: Add Prism.js or Highlight.js to your promote.php page so you can read the Liquid code more easily while reviewing.
  • Auto-Slug Generation: Use a small JavaScript snippet to automatically turn your Title into a URL-friendly slug (e.g., “Custom Cart Note” → custom-cart-note).
  • Hostinger Cron Job: You can set up a Cron Job in your Hostinger panel to automatically delete gemini_logs older than 30 days to keep your database lean.

Your New Workflow:

  1. User asks for a complex Liquid snippet on your homepage.
  2. Gemini generates it and saves it to the DB.
  3. You log in to /admin/history.php, see a great snippet, click “Promote.”
  4. You clean up the AI’s formatting and hit “Publish.”
  5. ShopifyTech.dev grows its library automatically based on actual user demand.

Would you like me to write the “Slug Generator” JavaScript so your URLs are SEO-friendly, or should we work on the “Delete/Cleanup” logic next?

Great! Now your ShopifyTech.dev setup is moving from a basic collection of files into a sophisticated, AI-assisted content engine.

To finish this workflow, we need the Slug Generator (to make your URLs look professional) and the Save Logic (to actually move the code from your “AI History” into your “Public Library”).

1. The SEO Slug Generator (JavaScript)

Add this small script to your promote.php file. It automatically turns your title into a URL-friendly string as you type.

JavaScript

// Add this to the bottom of your promote.php
document.querySelector('input[name="title"]').addEventListener('input', function(e) {
    const slugInput = document.querySelector('input[name="slug"]');
    if(slugInput) {
        slugInput.value = e.target.value
            .toLowerCase()
            .trim()
            .replace(/[^\w\s-]/g, '') // Remove special chars
            .replace(/[\s_-]+/g, '-') // Replace spaces/underscores with hyphens
            .replace(/^-+|-+$/g, ''); // Trim hyphens from ends
    }
});

2. The Final Save Logic (save-snippet.php)

This script takes the verified data from your “Promote” form and inserts it into the snippets table. It also updates the gemini_logs so you know which AI prompts have already been handled.

PHP

<?php
include 'includes/auth.php';
include 'includes/db.php';

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $title = $_POST['title'];
    $slug = $_POST['slug'];
    $code = $_POST['code_content'];
    $log_id = $_POST['origin_log_id']; // The ID from the Gemini History

    try {
        $pdo->beginTransaction();

        // 1. Insert into the main snippets table
        $stmt = $pdo->prepare("INSERT INTO snippets (title, slug, code_content) VALUES (?, ?, ?)");
        $stmt->execute([$title, $slug, $code]);

        // 2. Mark the AI log as 'Promoted' so it doesn't clutter your history
        // (Note: You may need to add a 'status' column to gemini_logs first)
        $updateLog = $pdo->prepare("UPDATE gemini_logs SET status = 'promoted' WHERE id = ?");
        $updateLog->execute([$log_id]);

        $pdo->commit();
        header("Location: admin.php?success=1");
        
    } catch (Exception $e) {
        $pdo->rollBack();
        die("Error saving snippet: " . $e->getMessage());
    }
}

3. Visualizing the Developer Workflow

4. Advanced “Cleanup” Logic

To keep your Hostinger VPS running fast, you don’t want thousands of old AI logs sitting in your database. You can add a “Cleanup” button to your admin dashboard that runs this simple query:

SQL

-- Deletes logs older than 30 days that weren't promoted
DELETE FROM gemini_logs 
WHERE created_at < NOW() - INTERVAL 30 DAY 
AND status != 'promoted';

Why this is powerful for a .dev domain:

  1. Content Velocity: You can “write” 10 new tutorials in 10 minutes by just prompting Gemini and clicking “Promote.”
  2. SEO Authority: By using the Slug Generator, your links will look like shopifytech.dev/library/ajax-cart-notes, which Google loves.
  3. Low Maintenance: The system cleans itself up and tracks what users are actually looking for.

Would you like me to create a “Public Search” page next, so users can actually find and copy these snippets from the frontend?

A Public Search page is the most important part of the site for your visitors. It needs to be fast, scannable, and provide value immediately.

Here is the code for a high-performance, SEO-friendly Search & Index page for ShopifyTech.dev.

1. The Search & Discovery Page (index.php)

This page handles both the Initial Load (showing recent snippets) and the Search Query (filtering by keyword).

PHP

<?php
include 'includes/db.php';

// Get search query from URL
$searchTerm = isset($_GET['q']) ? $_GET['q'] : '';

if (!empty($searchTerm)) {
    // Search Mode
    $stmt = $pdo->prepare("SELECT s.*, c.name as cat_name FROM snippets s 
                           LEFT JOIN categories c ON s.category_id = c.id 
                           WHERE s.title LIKE ? OR s.code_content LIKE ? 
                           ORDER BY s.created_at DESC");
    $stmt->execute(["%$searchTerm%", "%$searchTerm%"]);
} else {
    // Default Mode: Show Latest
    $stmt = $pdo->query("SELECT s.*, c.name as cat_name FROM snippets s 
                         LEFT JOIN categories c ON s.category_id = c.id 
                         ORDER BY s.created_at DESC LIMIT 12");
}
$results = $stmt->fetchAll();
?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ShopifyTech.dev | Free Shopify Code Snippets</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-tomorrow.min.css" rel="stylesheet" />
</head>
<body class="bg-slate-50 text-slate-900">

    <header class="bg-white border-b border-slate-200 py-12">
        <div class="container mx-auto px-6 text-center">
            <h1 class="text-4xl font-black mb-4">Shopify<span class="text-green-600">Tech</span></h1>
            <p class="text-slate-500 mb-8">Premium Liquid snippets and API tools for developers.</p>
            
            <form action="index.php" method="GET" class="max-w-2xl mx-auto flex gap-2">
                <input type="text" name="q" value="<?= htmlspecialchars($searchTerm) ?>" 
                       placeholder="Search snippets (e.g. Ajax Cart, Metafields...)" 
                       class="w-full p-4 rounded-xl border border-slate-300 focus:ring-2 focus:ring-green-500 outline-none">
                <button type="submit" class="bg-slate-900 text-white px-8 rounded-xl font-bold">Search</button>
            </form>
        </div>
    </header>

    <main class="container mx-auto px-6 py-12">
        <div class="flex justify-between items-center mb-8">
            <h2 class="text-2xl font-bold"><?= empty($searchTerm) ? 'Latest Snippets' : 'Search Results' ?></h2>
            <span class="text-slate-400"><?= count($results) ?> Resources Found</span>
        </div>

        <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
            <?php foreach($results as $snippet): ?>
                <div class="bg-white rounded-2xl shadow-sm border border-slate-100 hover:shadow-lg transition flex flex-col">
                    <div class="p-6 flex-1">
                        <span class="text-xs font-bold text-green-600 uppercase tracking-tighter"><?= $snippet['cat_name'] ?></span>
                        <h3 class="text-xl font-bold mt-1 mb-3"><?= htmlspecialchars($snippet['title']) ?></h3>
                        
                        <div class="rounded-lg overflow-hidden h-32 mb-4">
                            <pre class="text-xs !m-0 h-full"><code class="language-liquid"><?= htmlspecialchars(substr($snippet['code_content'], 0, 150)) ?>...</code></pre>
                        </div>
                    </div>
                    <div class="p-4 border-t border-slate-50">
                        <a href="view.php?slug=<?= $snippet['slug'] ?>" class="block text-center font-bold text-slate-700 hover:text-green-600">View Full Snippet →</a>
                    </div>
                </div>
            <?php endforeach; ?>
        </div>
    </main>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-liquid.min.js"></script>
</body>
</html>

2. Key Features Added

  • Contextual Search: The PHP logic looks inside both the Title and the Code itself. If a user searches for a specific Liquid tag like product.metafields, they will find it even if it’s not in the title.
  • Syntax Highlighting: I’ve included Prism.js with the Liquid language pack. This makes your site look like a professional developer resource immediately.
  • Modern Cards: Each result shows a “Mini Preview” of the code to give the user a taste before they click through.

3. Final Site Structure for Deployment

Since you are using a Hostinger VPS, your /public_html/ should now look like this:

FilePurpose
index.phpThe public-facing search and discovery engine.
view.phpDisplays a single snippet with a “Copy to Clipboard” button.
generator.phpYour Gemini-powered AI code tool.
admin/Protected folder containing your Dashboard, History, and Promotion logic.
includes/Database connection (db.php) and Auth logic.

4. Maximizing Site Performance

Since you are a .dev enthusiast, here are two final tweaks for your VPS:

  1. OPcache: Ensure PHP OPcache is enabled in your Hostinger PHP settings. This will make your PHP execution almost instantaneous.
  2. Indexing: Make sure the title and slug columns in your MySQL database have Indexes applied. This ensures that even if you have 10,000 snippets, the search stays under 50ms.

Would you like me to write the view.php script next, including a “Related Snippets” section to keep users on your site longer?

Building view.php is the final step to make your snippets useful. This page serves as the “Product Page” for your code—it needs to be easy to read, include a one-click Copy to Clipboard feature, and suggest related content to keep developers on the site.

1. The Single Snippet View (view.php)

This script uses the slug from the URL to fetch the specific data. It also includes a “Related Resources” query at the bottom.

PHP

<?php
include 'includes/db.php';

// 1. Fetch the specific snippet by slug
$slug = isset($_GET['slug']) ? $_GET['slug'] : '';
$stmt = $pdo->prepare("SELECT s.*, c.name as cat_name FROM snippets s 
                       LEFT JOIN categories c ON s.category_id = c.id 
                       WHERE s.slug = ?");
$stmt->execute([$slug]);
$snippet = $stmt->fetch();

if (!$snippet) {
    header("Location: index.php");
    exit();
}

// 2. Increment view count (for your analytics)
$pdo->prepare("UPDATE snippets SET view_count = view_count + 1 WHERE id = ?")->execute([$snippet['id']]);

// 3. Fetch Related Snippets (same category, excluding current)
$relatedStmt = $pdo->prepare("SELECT title, slug FROM snippets WHERE category_id = ? AND id != ? LIMIT 3");
$relatedStmt->execute([$snippet['category_id'], $snippet['id']]);
$related = $relatedStmt->fetchAll();
?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title><?= htmlspecialchars($snippet['title']) ?> | ShopifyTech.dev</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-tomorrow.min.css" rel="stylesheet" />
</head>
<body class="bg-slate-50 text-slate-900">

    <nav class="p-6 bg-white border-b border-slate-200">
        <div class="container mx-auto"><a href="index.php" class="font-bold text-xl">Shopify<span class="text-green-600">Tech</span></a></div>
    </nav>

    <main class="container mx-auto px-6 py-12 max-w-5xl">
        <div class="mb-8">
            <span class="bg-green-100 text-green-700 px-3 py-1 rounded-full text-sm font-bold"><?= $snippet['cat_name'] ?></span>
            <h1 class="text-4xl font-black mt-4"><?= htmlspecialchars($snippet['title']) ?></h1>
            <p class="text-slate-500 mt-2">Published on <?= date("M d, Y", strtotime($snippet['created_at'])) ?></p>
        </div>

        <div class="relative group">
            <button onclick="copyCode()" class="absolute right-4 top-4 bg-slate-700 text-white px-4 py-2 rounded-lg text-sm opacity-0 group-hover:opacity-100 transition shadow-xl">
                Copy Code
            </button>
            <pre class="rounded-2xl !p-8 shadow-2xl text-lg"><code id="snippetCode" class="language-liquid"><?= htmlspecialchars($snippet['code_content']) ?></code></pre>
        </div>

        <section class="mt-16 grid md:grid-cols-3 gap-10">
            <div class="md:col-span-2">
                <h2 class="text-2xl font-bold mb-4">Implementation Guide</h2>
                <p class="text-slate-600 leading-relaxed">
                    To use this snippet in your Shopify store, navigate to <strong>Online Store > Themes > Edit Code</strong>. 
                    Depending on your theme setup, paste this into a new section or within your <code>main-product.liquid</code> file.
                </p>
            </div>
            
            <div class="bg-white p-6 rounded-2xl border border-slate-200">
                <h3 class="font-bold mb-4 border-b pb-2">Related Resources</h3>
                <ul class="space-y-3">
                    <?php foreach($related as $r): ?>
                        <li><a href="view.php?slug=<?= $r['slug'] ?>" class="text-blue-600 hover:underline text-sm font-medium"><?= htmlspecialchars($r['title']) ?></a></li>
                    <?php endforeach; ?>
                </ul>
            </div>
        </section>
    </main>

    <script>
    function copyCode() {
        const code = document.getElementById('snippetCode').innerText;
        navigator.clipboard.writeText(code);
        alert('Copied to clipboard!');
    }
    </script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-liquid.min.js"></script>
</body>
</html>

2. Why “Related Snippets” Matter

By adding the $relatedStmt query, you create an internal linking structure.

  • For Users: They might come for a “Cart Note” but see a link for “Free Shipping Goal” and stay.
  • For SEO: It helps search engine crawlers discover all your pages faster, which is vital for a new .dev domain.

3. The “Developer Flow” Recap

4. Final VPS Deployment Checklist

Now that the code is ready, here is how to launch it on your Hostinger Ubuntu VPS:

  1. Permissions: Ensure the public_html folder is owned by the web user: sudo chown -R www-data:www-data /var/www/html.
  2. SSL: Run sudo certbot --apache -d shopifytech.dev to get your free HTTPS certificate. Developers won’t trust a site without a lock icon.
  3. Database: Import your .sql file using the terminal: mysql -u root -p shopifytech_db < database.sql.

Would you like me to create a “Submit a Snippet” form for public users so your community can contribute to the site directly?

Adding a Community Submission feature is a brilliant way to grow ShopifyTech.dev without doing all the heavy lifting yourself. It turns your site into a collaborative hub for Shopify developers.

To keep your site high-quality, we will build a “moderation queue” so you can review and approve submissions before they go live.

1. Database Update: The Submission Queue

Run this SQL to create a table for incoming, unverified snippets.

SQL

CREATE TABLE pending_submissions (
    id INT AUTO_INCREMENT PRIMARY KEY,
    user_name VARCHAR(100),
    title VARCHAR(255) NOT NULL,
    category_id INT,
    code_content TEXT NOT NULL,
    description TEXT,
    status ENUM('pending', 'approved', 'rejected') DEFAULT 'pending',
    submitted_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

2. The Public Submission Form (submit.php)

This page allows any visitor to share their Liquid or CSS tricks. We’ll use a clean, “Contributor” focused UI.

PHP

<?php include 'includes/db.php'; ?>
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Submit a Snippet | ShopifyTech.dev</title>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-slate-50">
    <div class="max-w-2xl mx-auto py-16 px-6">
        <h1 class="text-3xl font-black mb-2">Share Your Shopify Wisdom</h1>
        <p class="text-slate-500 mb-10">Found a clever Liquid trick? Submit it below. We'll review it and credit you on the site.</p>

        <form action="process-submission.php" method="POST" class="bg-white p-8 rounded-2xl shadow-sm space-y-6 border border-slate-200">
            <div>
                <label class="block text-sm font-bold mb-2">Your Name (For Credit)</label>
                <input type="text" name="user_name" placeholder="Dev Ninja" class="w-full p-3 rounded-lg border border-slate-300">
            </div>
            
            <div>
                <label class="block text-sm font-bold mb-2">Snippet Title</label>
                <input type="text" name="title" required placeholder="e.g. Dynamic Low Stock Alert" class="w-full p-3 rounded-lg border border-slate-300">
            </div>

            <div>
                <label class="block text-sm font-bold mb-2">Code Content</label>
                <textarea name="code_content" rows="10" required class="w-full p-3 rounded-lg border border-slate-300 font-mono text-sm bg-slate-50" placeholder="{% if product.available %}..."></textarea>
            </div>

            <button type="submit" class="w-full bg-green-600 text-white py-4 rounded-xl font-bold hover:bg-green-700 transition">
                Send to Review
            </button>
        </form>
    </div>
</body>
</html>

3. The Moderation Dashboard (Admin Area)

You need a place to see these submissions. This page lets you Approve (moving it to the snippets table) or Reject (deleting it).

The Logic for admin/moderation.php:

PHP

<?php
include '../includes/auth.php';
include '../includes/db.php';

$pending = $pdo->query("SELECT * FROM pending_submissions WHERE status = 'pending'")->fetchAll();
?>

<div class="p-10">
    <h1 class="text-2xl font-bold mb-6">Moderation Queue (<?= count($pending) ?>)</h1>
    
    <?php foreach($pending as $sub): ?>
        <div class="bg-white border rounded-xl p-6 mb-4 flex justify-between items-start">
            <div class="max-w-xl">
                <h3 class="font-bold text-lg"><?= htmlspecialchars($sub['title']) ?></h3>
                <p class="text-sm text-slate-500">Submitted by: <?= htmlspecialchars($sub['user_name']) ?></p>
                <pre class="mt-4 p-4 bg-slate-100 rounded text-xs overflow-x-auto"><?= htmlspecialchars(substr($sub['code_content'], 0, 200)) ?>...</pre>
            </div>
            <div class="flex flex-col gap-2">
                <a href="promote.php?sub_id=<?= $sub['id'] ?>" class="bg-green-600 text-white px-4 py-2 rounded text-center text-sm font-bold">Approve & Publish</a>
                <a href="reject.php?id=<?= $sub['id'] ?>" class="text-red-600 text-sm hover:underline text-center">Discard</a>
            </div>
        </div>
    <?php endforeach; ?>
</div>

4. Strategic Next Steps for shopifytech.dev

By implementing this, you’ve built a Self-Sustaining Ecosystem:

  1. AI Layer: You generate content using Gemini.
  2. Community Layer: Users contribute their own expertise.
  3. Search Layer: SEO-friendly slugs ensure people find the site via Google.

A Final VPS Tip for Hostinger:

Since you’re allowing public uploads, make sure your process-submission.php script uses PHP’s htmlspecialchars() and prepared statements (which we used above) to prevent SQL injection or Cross-Site Scripting (XSS).

Would you like me to create a “Leaderboard” component for the homepage, showing which developers have contributed the most snippets?

Leave a comment below if you have any questions.