Template2024

SoapBizz

Role

Full-Stack Developer

Platform

Web (Astro + Keystatic CMS)

View Live Project

The Overview

Building a world-class experience.

SoapBizz is a modern e-commerce website designed for artisan soap makers to showcase and sell their handcrafted products online. Built with Astro and Keystatic CMS, the platform combines blazing-fast performance with an intuitive content management system that empowers non-technical users to manage their product catalog effortlessly.

The project was conceived to address the needs of small artisan businesses that require a professional online presence without the complexity and overhead of traditional e-commerce platforms. SoapBizz delivers a lightweight, SEO-optimized solution that loads instantly and converts visitors into customers.

By leveraging Astro's static site generation capabilities and Keystatic's Git-based CMS, SoapBizz achieves near-perfect Lighthouse scores while providing a content editing experience that rivals traditional database-backed systems—all without the need for expensive hosting or complex infrastructure.

The Stack

Astro

Keystatic CMS

Tailwind CSS

TypeScript

React

The Impact

By the
Numbers.

// Lighthouse Performance

100

Perfect score across all performance metrics

// Page Load Time

<1s

Average time to interactive on 3G connection

// Monthly Hosting Cost

Free hosting on Netlify/Vercel with generous limits

// SEO Score

98/100

Near-perfect SEO optimization

The Problem

What we were up against.

Small artisan soap businesses face a dilemma: they need professional e-commerce websites to compete online, but traditional platforms like Shopify or WooCommerce come with monthly fees, performance overhead, and complexity that's overkill for their needs. Additionally, many artisan business owners lack technical skills to manage complex content management systems, leading to dependence on developers for simple product updates.

The Solution

How we fixed it.

SoapBizz was developed as a modern, static-first e-commerce solution that combines Astro's exceptional performance with Keystatic's user-friendly, Git-based CMS. The result is a website that loads in milliseconds, ranks well in search engines, costs pennies to host, and allows business owners to manage products, images, and content through an intuitive visual interface—no coding required.

Key
Features.

// 01

Seamless Shopping Experience

Intuitive product browsing and checkout flow designed to maximize conversions while maintaining the artisan brand aesthetic.

Product catalog with filtering and sortingQuick view modal for product detailsShopping cart with real-time updatesGuest checkout with minimal frictionOrder confirmation and email notifications

// 02

Visual Content Management

Keystatic CMS integration providing a WordPress-like editing experience without the performance penalties of a traditional CMS.

Visual product editor with live previewDrag-and-drop image uploads with automatic optimizationRich text editor for product descriptionsCategory and tag managementBulk product operations

// 03

Beautiful Product Galleries

Stunning image galleries that showcase the artisan quality of handcrafted soaps with zoom, lightbox, and multiple view options.

High-resolution image support with lazy loadingLightbox gallery with keyboard navigationProduct image zoom on hoverMultiple product images per itemAutomatic image optimization and responsive sizing

// 04

SEO-Optimized Structure

Built from the ground up with search engine optimization in mind, ensuring maximum visibility in search results.

Semantic HTML5 markupStructured data (JSON-LD) for rich snippetsOptimized meta tags and Open GraphXML sitemap generationFast page loads (Core Web Vitals optimized)

// 05

Lightning-Fast Performance

Astro's static generation delivers instant page loads and exceptional user experience across all devices and network conditions.

Sub-second page load timesMinimal JavaScript bundle sizeOptimized asset delivery with CDNProgressive image loadingOffline-ready with service worker

// 06

Secure Checkout Integration

Integration with trusted payment processors ensuring secure transactions without storing sensitive payment data.

Stripe payment integrationPCI-compliant checkout flowSSL encryption throughoutFraud detection and preventionMultiple payment method support

Project
Gallery.

Hover to focus

SoapBizz

Building a world-class experience.

By the
Numbers.

What we were up against.

How we fixed it.