Building a Custom E-commerce from Scratch with a 100/100
Project Overview Type: Concept Project / High-Performance Engineering Challenge Role: WordPress & Frontend Specialist Tech Stack: WordPress, WooCommerce, PHP, Semantic HTML5, Vanilla CSS (clamp()), Vanilla JavaScript Live Demo: simustore.allysonbelo.com Key...
Destaques da Arquitetura:
- PageSpeed 100/100
- LCP
Project Overview
- Type: Concept Project / High-Performance Engineering Challenge
- Role: WordPress & Frontend Specialist
- Tech Stack: WordPress, WooCommerce, PHP, Semantic HTML5, Vanilla CSS (
clamp()), Vanilla JavaScript - Live Demo: simustore.allysonbelo.com
- Key Achievement: 100/100 in Performance, Accessibility, Best Practices, and SEO on Google PageSpeed Insights.
The Challenge: Setting a High Engineering Bar
Self-initiated projects frequently fall into the trap of looking nice on the surface while relying on bloated pre-made themes and heavy page builders that destroy performance and accessibility under the hood.
For SimuStore, I chose a different path. I treated the project as a rigorous technical assessment for a high-bar engineering role. The goal wasn’t merely to display products, but to design and build an online store that meets the strictest modern web engineering standards:
- True Mobile-First Design: Built around thumb ergonomics and small-screen usability.
- Strict Accessibility (WCAG Compliance): Clear contrast ratios, intentional touch targets, and seamless keyboard/screen-reader navigation.
- Extreme Speed & Efficiency: Zero redundant libraries or third-party bloat, relying on modern HTML, CSS, and PHP.
Common Pitfalls in Traditional E-Commerce
Many online stores suffer from three major issues that directly hurt conversion rates and organic ranking:
- Frustrating Touch Targets: Tiny, closely packed links on mobile screens that cause misclicks and user frustration.
- Inaccessible Color Contrast: Low-contrast pricing, faint gray subtitles, or washed-out sale badges that exclude users with visual impairments.
- Code Bloat & Sluggish Load Times: Heavy multi-purpose themes that ruin Core Web Vitals (LCP, INP, CLS) and push bounce rates up.
Technical Solutions & Architecture
To solve these problems, I engineered a bespoke WooCommerce theme (targetlink-woo-pro) centered on native web standards and sustainable code:
1. Restructuring Product Cards (Touch Targets & A11y)
Standard WooCommerce setups often produce 2 to 3 competing links to the same product within a single card (image link, category link, and title link). This creates touch collisions on mobile and duplicate-link warnings in Lighthouse.
- Unified Primary Link: Re-engineered the card structure so a single semantic link encapsulates the image, title, and key product info, delivering a touch area greater than 300px in vertical height.
- Categories as Labels: Converted redundant category links in listings into descriptive
<span>labels, eliminating target collisions. - Isolated Add-to-Cart Button: Preserved a clear visual separation with guaranteed minimum button dimensions of 48px to prevent accidental taps.
2. AAA Color Contrast Standards
Every color token was audited and calibrated to exceed WCAG requirements:
- Trend & Sale Badges: Engineered high-contrast palettes achieving an 8.3:1 ratio against white backgrounds (surpassing the WCAG AAA threshold of 7.0:1).
- Price Strikethrough & Discounts: Removed standard WooCommerce opacity filters on original prices, achieving crisp contrast ratios up to 10.3:1.
- Micro-Copy & Footer Links: Adjusted font weights and contrast levels to guarantee readability in bright sunlight and on low-spec displays.
3. Fluid Layouts via CSS clamp()
Rather than stacking dozens of rigid media queries, I used modern CSS clamp() functions across typography, paddings, and grid gaps. This creates smooth, continuous scaling from 320px mobile screens up to 4K desktop monitors with zero layout shifts.
4. Critical Path Optimization & Zero Heavy Dependencies
- No Framework Overhead: Built entirely with native CSS and Vanilla JS, keeping the transfer bundle lightweight.
- Inlined Critical CSS: Fundamental layout and accessibility rules are delivered directly in the initial HTML payload (
<head>), eliminating render-blocking roundtrips. - Self-Hosted Fonts & Smart Cache-Busting: Typography is hosted locally to enhance user privacy and speed up DNS resolution, paired with timestamp-based asset versioning (
filemtime) to invalidate CDN caches reliably upon deployment.
Measurable Results
The final validation was conducted using Google’s official auditing tool (PageSpeed Insights) directly against the live production server:
- 🟢 Performance: 100/100
- 🟢 Accessibility: 100/100
- 🟢 Best Practices: 100/100
- 🟢 SEO: 100/100
Beyond the perfect score, SimuStore demonstrates that performance, accessibility, and clean architecture can live hand-in-hand with an engaging commercial UI.
Let’s Connect
SimuStore reinforced my belief that the difference between code that “merely works” and a top-tier digital product lies in disciplined engineering and deep empathy for the end user.
- 🚀 Explore the live store: simustore.allysonbelo.com
- 💬 Interested in working together? Feel free to reach out via LinkedIn or through my portfolio contact form.