Coding Journal: Setting Up a Fast Pharmacy Catalog in 7 Days

A local family pharmacy owner named Sarah reached out to me last week with an urgent request. With cold and flu season approaching, her customers wanted a clean website where they could view wellness products, check stock levels, and upload prescription forms online. She did not have the budget for a massive Shopify setup or a heavy WooCommerce database server. She needed a fast, clean, static web catalog that could load on any phone, even with a poor 3G cell connection.

As a developer who has built websites for over ten years, I know that starting a design from scratch is a massive waste of time. I searched for a solid front-end layout that looked clean and professional. I decided to buy the MyMedi - eCommerce HTML Template. It had a clean medical layout, highly readable fonts, and pre-styled shop pages that were perfect for our pharmacy store catalog.

Below is my daily journal of how I adapted the layout, fixed a frustrating mobile navigation bug, and optimized the performance to make it fast.

---

Day 1: Audit and Removing the Extra Files

On my first day, I downloaded the template package and looked at the files. The template is built using Bootstrap 5, standard CSS styles, and basic JavaScript. This was exactly what I wanted because there were no complex dependencies, React builders, or build tools to worry about. Everything was clean, raw front-end code.

To view my changes on the fly, I configured a simple local development pipeline using Node.js and BrowserSync. I set up a quick project folder and ran this command in my terminal:

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

This command automatically refreshed my browser screen every time I saved a file. The template came packed with over thirty pre-designed pages, including advanced search forms, complex multi-step checkout processes, and multiple homepage variations. Sarah only needed a main product layout, a contact page, and an interactive upload page. I spent my afternoon deleting all the unused HTML pages and extra graphic assets to keep our Git repository small and easy to manage.

---

Day 3: Fixing the Sticky Header Scroll Lag on Mobile

On Day 3, I ran into a real technical issue while testing the shop layouts on physical mobile devices. The template has a beautiful sticky header that stays at the top of the screen when a user scrolls down. It also features a slide-out shopping cart sidebar widget.

When I tested the page on an older iPhone, I noticed a weird visual glitch. When scrolling the product grid with the mobile cart sidebar open, the background page continued to scroll behind it. Even worse, the sticky header kept flickering and overlapping with the cart slide-out overlay. It caused a broken user experience, and sometimes the navigation menu would lock up completely.

The issue was caused by a z-index conflict and the lack of an overflow lock on the body element when the slide-out menu was open. To fix this, I wrote a quick helper class in CSS and hooked it up to the template’s existing JavaScript click handlers.

Here is the exact code I wrote to fix the z-index issues and lock the scroll:

/* CSS Fix for mobile header overlap and scroll locking */
body.scroll-locked {
    overflow: hidden !important;
    position: fixed;
    width: 100%;
    height: 100%;
}

.mobile-cart-sidebar {
    z-index: 9999 !important;
    -webkit-overflow-scrolling: touch;
}

.sticky-header {
    /* Lower z-index so it doesn't overlap the active slide-out menu */
    z-index: 1050 !important;
}

// JavaScript to toggle the body scroll lock
const cartOpenButton = document.querySelector('.cart-toggle-btn');
const cartCloseButton = document.querySelector('.cart-close-btn');

if (cartOpenButton && cartCloseButton) {
    cartOpenButton.addEventListener('click', () => {
        document.body.classList.add('scroll-locked');
    });

    cartCloseButton.addEventListener('click', () => {
        document.body.classList.remove('scroll-locked');
    });
}

Adding this code stopped the background page from moving when users interacted with the shopping cart sidebar. The mobile header stopped flickering, and the entire layout felt much more stable on touchscreens.

---

Day 5: Building the Prescription Upload Feature

On Day 5, I built the prescription upload page. Sarah wanted customers to be able to safely take a photo of their paper prescription slip and send it directly to the store's email address.

Since this was a static site, I set up a modern HTML5 drag-and-drop file uploader. I connected it to a secure, serverless form processing service so Sarah would receive the patient's uploaded image directly in her inbox, without needing a dedicated SQL database setup on her hosting server.

Here is the clean markup and drag-and-drop feedback script I used for this feature:

<div class="upload-container" id="drop-zone">
    <p>Drag & drop your prescription photo here or click to browse</p>
    <input type="file" id="prescription-file" accept="image/*,application/pdf" style="display:none;" />
    <button class="btn btn-primary" onclick="document.getElementById('prescription-file').click()">Select File</button>
</div>

const dropZone = document.getElementById('drop-zone');

dropZone.addEventListener('dragover', (e) => {
    e.preventDefault();
    dropZone.classList.add('drag-over');
});

dropZone.addEventListener('dragleave', () => {
    dropZone.classList.remove('drag-over');
});

dropZone.addEventListener('drop', (e) => {
    e.preventDefault();
    dropZone.classList.remove('drag-over');
    const files = e.dataTransfer.files;
    if (files.length > 0) {
        document.getElementById('prescription-file').files = files;
        dropZone.querySelector('p').textContent = `Selected: ${files[0].name}`;
    }
});

This simple setup kept the entire web app lightweight. Patients can now submit their orders in a few seconds directly from their phones, and Sarah receives the images in her secure inbox instantly.

---

Day 7: Performance Tuning and Nginx Speed Tweaks

On the final day, I worked on page loading speed. Sarah's patients are often browsing the site while on mobile networks, so the site had to be fast.

First, I ran the original code through Google Lighthouse. The initial performance score was decent, but it highlighted minor issues with render-blocking styles and unoptimized image files. I compressed the product images and turned them into the modern WebP format. This cut down our overall asset size by almost 50% without affecting the visual quality of the product photos.

Finally, I configured the production web server to serve the static HTML files over Nginx. I added strict browser caching policies for CSS, JS, and web fonts to ensure the website loads instantly on subsequent visits.

Here is the Nginx server block I created for her hosting environment:

# Nginx cache rules for static medical catalog
server {
    listen 80;
    server_name local-pharmacy-catalog.com;
    root /var/www/pharmacy-site;

    # Gzip settings to compress text assets
    gzip on;
    gzip_types text/plain text/css application/json application/javascript text/xml;
    gzip_min_length 1000;

    # Direct browser caching for performance
    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;
    }
}

With these server changes and image optimizations, the mobile performance score reached 95, and the desktop performance score hit 99. The site now loads in under one second on standard 4G networks.

---

Objective Pros and Cons

After working inside the code of this template for seven days, here are my honest thoughts on the design:

The Pros:

• Excellent Layout: The product catalog grids are clean and clear, making it simple for patients to read the product descriptions.

• No Complex Frameworks: The template uses clean Bootstrap 5 and vanilla JavaScript, which kept our hosting costs low and avoided complex build steps.

• Great Mobile Responsiveness: Aside from the z-index issue, the mobile grid and search layout scale well on small screens.

The Cons:

• Header Z-Index Conflict: The sticky header ran into minor overlapping issues on older iOS browsers during scroll, though this was easily fixed with standard CSS modifications.

• Too Much Demo Content: The initial download bundle was very large. It takes some time to manually delete the unused pages and keep only what you need.

---

What We Learned

Starting with a solid HTML layout is a fantastic way to deliver high-quality client sites quickly on a budget. It allowed me to focus my energy on custom features like the prescription uploader and server-level speed optimizations rather than spent days drawing product boxes and navigation bars from scratch.

The client was happy with the final result. The page is fast, the mobile scroll issues are gone, and patients can now browse medical supplies easily on their phones. Taking a practical path with a good layout was the right move for this project.