Fallstudie

Modulärt webbplatsramverk: en arkitektur, två olika verksamheter

Roll: Fullstack-utvecklare och UX-designerVaraktighet: 8 timmar (MVP) + 3–5 timmar per driftsättningStatus: 2 webbplatser är live

Next.js 16React 19TypeScriptTailwind CSS 4SupabaseSquare PaymentsResendVercel

Översikt

Småföretag behöver ofta mer än en statisk webbplats – de behöver en webbutik, en administratörspanel, bildoptimering och automatiserad e-postkommunikation – men byråernas priser är för höga och plattformar för att bygga själv, som Squarespace eller Shopify, är antingen för begränsade eller för dyra när verksamheten växer.

Jag har utvecklat en återanvändbar arkitektur som gör det möjligt att driftsätta en helt anpassad företagswebbplats med eget varumärke på 3–5 timmar. Två aktiva företag – en tillverkare av kigurumi och en marknadsplats för hantverksprodukter – drivs på samma ramverk, men ser helt olika ut och fungerar på helt olika sätt.

Skala

8 hrs

Första MVP-versionen

3-5 hrs

Implementering per anläggning

95+

Lighthouse-prestanda

40%

Paketrabatt

94.7%

Bildkomprimering

WebP pipeline

Example: 902KB -> 48KB

<500ms

Mål för databasfråga

Månatlig infrastrukturkostnad (referensvärde)

Teknisk arkitektur

FrameworkNext.js 16.1.6 (App Router), React 19, TypeScript

StylingTailwind CSS 4 – ett tematiskt system med CSS-variabler för anpassning av varumärkesidentitet vid varje implementering

DatabaseSupabase PostgreSQL med säkerhet på radnivå och bakåtkompatibelt schema med flera bilder

PaymentsDatabasdesign som är oberoende av betalningsleverantör – Square i den ena miljön, Stripe-kompatibel i den andra

EmailResend

HostingVercel

ImagesAutomatiserad process för konvertering och optimering till WebP – 90–95 % minskning av filstorleken

AccessibilityAutomatisk efterlevnad av WCAG AA-kontrastkraven via ett system med CSS-variabler

PerformanceDynamiska importer ger 40 % lägre kostnad för paketet och sökningar på under 500 ms

Systemet med CSS-variabler för teman är nyckeln till att särskilja varumärken utan att behöva underhålla separata kodbaser. Varje distribution får en temafil som definierar färger, typsnitt och avstånd – layouten och komponentlogiken är gemensam. Automatisk WCAG AA-kontrastkontroll utförs mot temavariablerna vid kompilering.

Vad som byggdes

DesignsByADino

designsbyadino.com->

E-handel med handgjorda kigurumi

·Produktkatalog med stöd för varianter
·Kassan i Square Payments
·Panel för orderhantering
·Bildgalleri med WebP-optimering
·Automatiserad lagerstatus

Amy's Hen House

amyshenhouse.com->

Marknadsplats för hantverksprodukter

·Produktbläddring i flera kategorier
·Anpassad produktvariantmatris
·Spårning av leveransstatus
·E-postmeddelanden till kunder
·Säljarens administratörspanel

DesignsByADino

Amy's Hen House

Verksamhetstyp

E-handel med handgjorda kigurumi

Marknadsplats för hantverksprodukter

Katalogstruktur

Produktkatalog med produkter från en enda hantverkare – varje artikel är handgjord, begränsat antal

Butik med flera varugrupper – hantverk, heminredning, säsongskollektioner

Kassa

Integration av Square Payments med orderhanteringen

Kassafunktion med Stripe-integration och anpassad variantmatris

Leverans

Administrationsfunktion per beställning med anpassad statusuppföljning

Spårning av leveranser med statusmeddelanden till kunderna

Administrationsverktyg

Produktadministration, bilduppladdning, orderhantering

Säljarens administratörspanel, hantering av flera produkter samtidigt, verktyg för kategorier

Visuell identitet

Varm hantverksmässig estetik. Varumärket med den röda draken. En mysig och kreativ ton.

En glad stug- och marknadsatmosfär. En blå husikon. Varm och inbjudande.

Skärmdumpar

Tekniska höjdpunkter

->CSS-variabler är den rätta abstraktionsnivån för temahantering med flera varumärken – inte separata kodbaser, inte CSS-i-JS och inte temaväxling under körning.
->Genom att utforma databasschemat så att det är oberoende av betalningsleverantör redan från början kan de två miljöerna använda olika betalningsleverantörer utan att det uppstår några skillnader i schemat.
->En prestandaförbättring på 40–60 % redan efter den första implementeringen gör att den initiala investeringen i ramverket snabbt betalar sig.
->Två företag som ser helt olika ut och ger ett helt annat intryck kan dela 95 % av sin infrastruktur – det är temasystemet som sköter det tunga arbetet.