Harvest Sun combines a company profile, a blog, and a full product catalog into a single website, browsable the way an online store would be, with search, category filters, sorting, and a related-products section, minus the checkout. Ordering happens directly over WhatsApp instead. It's built flexible enough to fit almost any retail business, from groceries and clothing to food, electronics, furniture, and home goods, so a new business can launch on the same proven foundation instead of starting from scratch. The products shown on the demo are placeholders, but every feature and flow behind them is already complete, so swapping in real products is all it takes to go live.
A scrollable look at the finished site, exactly as a visitor would browse it.
Desktop
Mobile
The tools and technologies that came together to bring this project to life.
Each project draws on a mix of disciplines: here's how they came together on this one.
A closer look at what the finished product offers, the problems solved during development, and the results.
A Filter Selection That Silently Returned Nothing
WooCommerce's category archive page doesn't add its own category to the query's filter conditions at the point custom code can hook in, so a custom category filter ended up stacking a second, unrelated condition on top instead of replacing it. Picking any category from the sidebar while already on a category page returned an empty grid with no error to explain why, fixed by explicitly clearing the archive's own condition before the custom filter runs.
A Refactor That Silently Deleted a Section's Spacing
A shared PHP helper that wraps every section with consistent vertical spacing was moved into a new folder during a cleanup, but the build tool that scans for Tailwind classes wasn't told to look there, since it reads files as text rather than running PHP. Its classes dropped out of the compiled CSS with no error anywhere, and the spacing between every section on every page quietly collapsed until it was caught.
A Single Plugin Away From Taking the Whole Site Down
All six pages read their content through one plugin's field function, called directly across dozens of places with no fallback. If that plugin were ever deactivated or failed to load, every page would fail with a fatal error at once instead of degrading, closed by wrapping every call behind a compatibility layer and verifying the site stayed up with the plugin disabled live.
How this project changes things for the business and the customers it serves.
Information that stays findable, not buried
Built for this business, not copied from a template
Images compressed automatically, every time
Security considered from day one
A real place to learn who they're buying from
Browse everything, no scrolling required
Everything needed to decide, in one page
A clear guide before the first question
Every way to reach the business, one place
SEO reach beyond just the product pages
Before
Most businesses today rely only on social media, Instagram, Facebook, TikTok, to share information, but a feed is built to bury old posts under new ones, so anything specific gets harder to find the moment something newer gets posted.
After
A website organizes every piece of information by page and section instead of by post date, so specific details always stay exactly where a customer expects to find them.
Before
A site generated in minutes by an AI tool or built from a generic template tends to look and feel like thousands of other sites built the exact same way, with just a logo swapped in.
After
This site was designed and built specifically for the business's own branding, not a generic look. A clear visual hierarchy, properly sized typography, and consistent spacing keep every page feeling clean and professional. It also works the same way smoothly across desktop, tablet, and phone, making it just as easy for customers to browse the catalog as it is for the team to manage it.
Before
A catalog site built without performance in mind, with unoptimized photos, loads slowly, and most visitors give up within seconds, especially on mobile, often before they've even seen a single product.
After
Every image is automatically compressed to WebP and kept under 200KB the moment it's uploaded. The site is also built on a lightweight, efficient foundation instead of being weighed down with unnecessary extras, so pages stay fast without anyone having to remember to optimize anything by hand.
Before
A site thrown together quickly with an AI website builder or a generic template usually has no real security behind it, leaving it wide open to being hacked or having its data stolen, something a business only discovers once the damage is already done.
After
Security was part of the process from the start, not an afterthought, keeping the entire system updated, avoiding common misconfigurations, and writing every custom line of code with security in mind, so the business's reputation and customer data stay protected.
Before
A business known only through scattered social posts gives a customer no real place to learn who's actually behind it.
After
A company profile page shows who's behind the business, a testimonials section shows real feedback from past customers, a recent-deliveries section proves the business is still active, and a gallery shows the workspace and process behind it, giving customers everything they need to trust it before they even ask.
Before
Without a catalog page, a customer has no single place to see everything for sale, only a feed of old posts to scroll back through, hoping to spot every product that was ever shared.
After
A searchable, filterable product catalog lets a customer see everything available at a glance and narrow it down instantly, instead of scrolling through months of posts.
Before
Even after spotting something on social media, a customer usually can't see every angle, read a full description, or place an order without a back-and-forth of comments and DMs first.
After
Every product page has a full photo carousel, a complete description, and a one-tap WhatsApp button, everything needed to see it, understand it, and order it without ever leaving the page.
Before
A visitor who's never ordered from a WhatsApp-based store may hesitate, unsure whether it's safe or how the process works.
After
A step-by-step how-to-order page walks a first-time visitor through the exact process before they ever have to ask.
Before
Phone number, address, email, social links, a customer needing to reach the business has to hunt for whichever one they can find.
After
A dedicated contact page puts every way to reach the business in one place, and an FAQ section answers the questions that come up again and again, so customers get instant answers without hunting, and the team isn't stuck repeating the same replies all day.
Before
A business with no articles or guides is hard to find in search results, and has nothing to offer a customer besides the products themselves.
After
A blog gives space for SEO-friendly articles and practical tips for customers, building organic reach and giving them a reason to come back beyond just buying.
The technical problems fixed while building this project.
Filtering always returns the right products
Zero single point of failure across all 6 pages
Images under 200KB
Automatic compression on every future upload
One shared source for section spacing sitewide
Before
Picking a second category from the sidebar filter while already viewing a category archive returned zero products, with no error to explain why.
After
The archive's own category condition is explicitly cleared before the custom filter runs, so filtering always reflects what the shopper actually picked.
Before
All six pages read their content through one plugin's field function with no fallback, so a disabled or failing plugin would fatal-error the entire site at once.
After
A compatibility shim wraps every call and returns safely when the plugin is unavailable, verified by disabling it live with the site staying fully up.
Before
Uncompressed images on an image-heavy catalog would have made every page slow to load, especially on a customer's mobile connection.
After
Every image is compressed to WebP before upload, keeping pages fast everywhere they're viewed.
Before
Compression only happened as a one-time manual pass, so any photo the client uploads later would arrive at full, uncompressed size.
After
A custom pipeline now compresses and converts every future upload automatically, so pages stay fast without relying on anyone remembering to optimize an image by hand.
Before
Vertical rhythm between sections could silently drift if the build tool ever lost track of the helper function defining it, as it briefly did during a refactor.
After
The gotcha is documented and guarded against, and every page's section spacing stays consistent by construction from one shared helper.
