General
Share and discuss tech, products, business, startups, or product recommendations
Start new thread

Coding Diary: Building a Static Digital Art Marketplace in 7 Days

by•

Coding Diary: Building a Static Digital Art Marketplace in 7 Days

Last week, a local digital artist and 3D designer named Tyler called me. He had just finished a massive collection of custom 3D game models, textures, and user interface kits. He wanted to sell them directly to developers and creators online. He wanted to avoid high platform fees, but he also did not want the high monthly cost and security headaches of running a heavy WordPress or WooCommerce database server.

Since Tyler only had about twenty digital products to sell and does not update his inventory often, I recommended building a static website. It is incredibly secure, loads instantly, and can be hosted for free on a cloud service. I suggested we use a premium, pre-built to save days of UI design. We decided to buy the . Its dark sci-fi look and gaming-style product grids fit his 3D art aesthetic perfectly.

Here is my daily developer journal of how I built this digital shopfront, solved a mobile rendering bug, and optimized it for fast loading times.

---

Day 1: Auditing and Cleaning the Assets

On Day 1, I unzipped the template files and inspected the code structure. It is built using Bootstrap 5, standard CSS custom properties, and vanilla JavaScript. Having no heavy React structures meant I could easily host it directly without setting up complex build pipelines.

To view my changes in real-time as I worked, I set up a local development server using Node.js and BrowserSync. I navigated to my project directory in the terminal and ran this command:

browser-sync start --server --files "*.html, css/*.css, js/*.js"

The template came with over twenty-five pages, including complex forum styles, community profiles, chat rooms, and bid checkout modals. Tyler does not run a public forum; he just wanted to display his assets and link them directly to a payment checkout page. I spent the afternoon deleting the extra pages, removing unused JavaScript libraries, and cleaning up the assets folder. This kept our code repository lightweight and easy to manage.

---

Day 3: Fixing the Safari Mobile SVG Stretching Bug

On Day 3, I ran into my first real technical friction point while testing the main item gallery page on my mobile devices. The template has beautifully designed card overlays, using custom SVGs as borders and background frames to give them a futuristic, gaming-styled look.

On desktop, the grids looked flawless. But on older versions of iOS Safari, we faced an annoying layout bug. The absolute-positioned SVGs inside the product cards failed to scale. Instead of fitting inside their card containers, the SVGs stretched infinitely downwards. This pushed the actual product text and images out of alignment, making the cards look broken and messy.

The problem happened because Safari’s rendering engine handles SVG aspect ratios differently when percentage widths are placed inside absolute-positioned flexbox containers. To fix this, I rewrote the card styling, wrapping the inline SVGs inside a wrapper div with a defined aspect ratio and adding modern CSS properties to force correct scaling.

Here is the CSS and updated HTML class structure I added to the custom stylesheet:

/* CSS Fix for SVG border rendering on mobile Safari */
.nft-svg-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    pointer-events: none;
}

.nft-svg-container svg {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: fill; /* Force SVG vectors to scale correctly without clipping */
    vector-effect: non-scaling-stroke; /* Ensure border lines do not thicken when resized */
}
<!-- Updated HTML card structure -->
<div class="product-item-card">
    <div class="nft-svg-container">
        <svg viewBox="0 0 100 100" preserveAspectRatio="none">
            <!-- Decorative SVG paths -->
        </svg>
    </div>
    <div class="product-item-content">
        <!-- Product image, title and link -->
    </div>
</div>

Implementing this CSS wrapper and adding preserveAspectRatio="none" to the SVGs completely resolved our mobile layout issues. The product cards now scale down and align perfectly on all screens I tested, including older mobile devices.

---

Day 5: Creating a Dynamic JSON Product Catalog

On Day 5, I wanted to make the website easier for Tyler to maintain in the future. I did not want him to have to manually open HTML files, write tags, and copy-paste rows of code every time he finished a new 3D model.

Since this is a static website, I wrote a small, lightweight vanilla JavaScript script. The script reads product details (like model titles, images, categories, and payment links) from a simple JSON file and dynamically generates the item cards inside our responsive grid. This way, Tyler only has to update a simple text file to add new products.

Here is the JSON structure and the script I created:

[
    {
        "id": "model_01",
        "title": "Sci-Fi Heavy Mech 3D Model",
        "category": "3D Models",
        "price": "$29.00",
        "image": "assets/img/mech-preview.webp",
        "link": ""
    },
    {
        "id": "ui_01",
        "title": "Cyberpunk Game UI Kit",
        "category": "UI Kits",
        "price": "$15.00",
        "image": "assets/img/ui-preview.webp",
        "link": ""
    }
]
// Dynamic catalog loader script
document.addEventListener('DOMContentLoaded', () => {
    const catalogGrid = document.getElementById('market-display-grid');
    if (!catalogGrid) return;

    fetch('assets/data/products.json')
        .then(response => response.json())
        .then(products => {
            catalogGrid.innerHTML = products.map(item => `
${item.title}

${item.title}

${item.category}

${item.price}Buy Now



`).join('');
})
.catch(err => console.error('Error loading product data:', err));
});

This simple JavaScript setup keeps our site completely static and secure, while giving Tyler an easy, no-code way to update his digital products without accidentally breaking the HTML formatting.



---

Day 7: Performance Polish and Server Setup

On the final day, I focused on speed optimization and publishing the site. Because Tyler’s target audience is mobile game developers who frequently browse from shared workplace Wi-Fi or cellular connections, having a fast loading time was critical.

I compressed his 3D model preview renders, converting them into the WebP format. This reduced the total page weight by over 70% without sacrificing any visual detail of the texturing. I then deployed the site to an Nginx static host and wrote custom configuration rules to compress the files and enforce strict browser caching.

Here is the Nginx server block I created for his hosting setup:

# Nginx server configuration for static asset delivery
server {
    listen 80;
    server_name tyler-3d-market.com;
    root /var/www/digital-marketplace;

    # Enable compression to shrink files before sending over networks
    gzip on;
    gzip_types text/plain text/css application/javascript application/json image/svg+xml;
    gzip_min_length 1024;

    # Enforce strict browser caching for static resources
    location ~* \.(?:css|js|woff2?|png|jpg|jpeg|webp|gif|svg|ico)$ {
        expires 1y;
        add_header Cache-Control "public, no-transform";
        access_log off;
    }

    location / {
        try_files $uri $uri/ =404;
    }
}

When I ran the site through Google PageSpeed Insights, the performance score was 96 on mobile devices and 99 on desktop. The homepage loads in under 0.7 seconds. It is fast, smooth, and highly responsive.



---

Objective Pros and Cons

After working closely with this template for a full week, here is my honest take on this product:

The Pros:

  • Excellent Gaming Visuals: The sci-fi aesthetic, detailed cards, and dark theme fit the digital asset market niche perfectly.

  • Clean Code Foundations: Built on standard Bootstrap 5, making it simple to write custom overrides and color variables.

  • Fully Responsive: The grids resize cleanly, keeping text readable and layouts clean on mobile phones.

The Negatives:

  • Mobile SVG Stretching: The decorative SVG card borders ran into rendering issues on iOS Safari, requiring a manual CSS patch to force scaling.

  • Bloated Default Package: It includes many extra pages like forums and chat interfaces that you have to manually prune out to keep files lightweight.



---

The Result

Using a pre-made design was a great decision for this project. Instead of spending my time drawing basic card grids and headers from scratch, I was able to focus on resolving mobile rendering issues, building the JSON loader, and configuring the server for speed.

Tyler’s digital asset shop is now fully live and running. The pages load instantly, the mobile styling is clean, and he can easily add new 3D assets to his catalog with a simple text file. It is a highly practical, low-maintenance solution that will save him money for years to come.

4 views

Add a comment

Replies

Be the first to comment