Siirry sisältöön

Tapaustutkimus

Modulaarinen verkkosivustorakenne: yksi arkkitehtuuri, kaksi erillistä liiketoimintaa

Rooli: Full-stack-kehittäjä ja käyttökokemussuunnittelijaKesto: 8 tuntia (MVP) + 3–5 tuntia käyttöönottoa kohtiTila: 2 sivustoa on julkaistu
Next.js 16React 19TypeScriptTailwind CSS 4SupabaseSquare PaymentsResendVercel

Yleiskatsaus

Pienyrityksille riittää harvoin pelkkä staattinen verkkosivusto – ne tarvitsevat verkkokaupan, hallintapaneelin, kuvien optimointia ja sähköpostiautomaatiota –, mutta toimistojen hinnat ovat liian korkeita, ja Squarespace- tai Shopify-kaltaiset itsepalvelualustat ovat joko liian rajoittuneita tai liian kalliita, kun toiminta laajenee.

Olen kehittänyt uudelleenkäytettävän arkkitehtuurin, jonka avulla täysin räätälöity ja brändätty yrityssivusto saadaan käyttöön 3–5 tunnissa. Kaksi toimivaa yritystä – kigurumi-vaatteita valmistava käsityöläinen ja käsintehtyjen tuotteiden verkkokauppa – toimivat samalla alustalla, mutta niiden ulkoasu ja toiminnallisuus eroavat toisistaan täysin.

Laajuus

8 hrs

Alustava MVP-versio

3-5 hrs

Kohdekohtainen käyttöönotto

95+

Lighthouse-suorituskyky

40%

Pakettialennus

94.7%

Kuvien pakkaus

WebP pipeline

Example: 902KB -> 48KB

<500ms

DB-kyselyn kohde

$0

Kuukausittaiset infrastruktuurikustannukset (perustaso)

Tekninen arkkitehtuuri

FrameworkNext.js 16.1.6 (App Router), React 19, TypeScript
StylingTailwind CSS 4 – CSS-muuttujapohjainen teemajärjestelmä, joka mahdollistaa brändi-ilmeen mukauttamisen kussakin käyttöönotossa
DatabaseSupabase PostgreSQL, jossa on rivitason tietoturva ja taaksepäin yhteensopiva monikuvamalli
PaymentsMaksupalveluntarjoajasta riippumaton tietokantasuunnittelu – Square-yhteensopiva yhdessä ympäristössä, Stripe-valmis toisessa
EmailResend
HostingVercel
ImagesAutomatisoitu WebP-muunnos- ja optimointiprosessi – tiedostokoon pienentyminen 90–95 %
AccessibilityWCAG AA -kontrastivaatimusten automaattinen noudattaminen CSS-muuttujajärjestelmän avulla
PerformanceDynaamiset tuonnit: 40 %:n pakettikokoa pienentävä vaikutus, alle 500 ms:n kyselyajat

CSS-muuttujapohjainen teemajärjestelmä on avain brändin erottumiseen ilman erillisten koodikantojen ylläpitoa. Jokainen julkaisu saa teematiedoston, jossa määritellään värit, fontit ja välit – ulkoasu ja komponenttien logiikka ovat yhteisiä. WCAG AA -kontrastitarkistus suoritetaan automaattisesti teemamuuttujille rakennusvaiheessa.

Mitä rakennettiin

DesignsByADino logo

DesignsByADino

designsbyadino.com->

Käsintehtyjen kigurumien verkkokauppa

  • ·Tuoteluettelo, jossa on tuotevaihtoehtojen tuki
  • ·Square Payments -maksuprosessi
  • ·Tilaushallintapaneeli
  • ·Kuvagalleria, jossa on WebP-optimointi
  • ·Automaattinen varastotilanne
Amy's Hen House logo

Amy's Hen House

amyshenhouse.com->

Käsityötuotteiden verkkokauppa

  • ·Tuotteiden selaaminen useissa kategorioissa
  • ·Mukautettu tuotevarianttitaulukko
  • ·Tilauksen toimitustilan seuranta
  • ·Asiakkaille lähetettävät ilmoitussähköpostit
  • ·Myyjän hallintapaneeli
DesignsByADino
Amy's Hen House
Yritystyyppi
Käsintehtyjen kigurumien verkkokauppa
Käsityötuotteiden verkkokauppa
Luettelon rakenne
Yhden käsityöläisen tuotevalikoima – jokainen tuote on käsintehty, rajoitettuja määriä
Monialainen kauppa – käsityöt, kodintuotteet, kausikokoelmat
Kassalle
Square Payments -integraatio tilausten hallintaan
Stripe-yhteensopiva kassatoiminto mukautetulla tuotevaihtoehtomatriisilla
Toteutus
Tilauskohtainen hallinta ja mukautettu tilaseuranta
Tilauksen seuranta ja asiakastilannetiedotteet
Hallintatyökalut
Tuotehallinta, kuvien lataaminen, tilausten käsittely
Myyjän hallintapaneeli, tuotteiden joukkohallinta, luokkatoiminnot
Visuaalinen ilme
Lämmin käsityöläishenkinen tyyli. Punainen lohikäärmeen logo. Kodikas ja luova tunnelma.
Iloinen maalaismarkkinatunnelma. Sininen talokuvake. Lämminhenkinen ja ystävällinen.

Kuvakaappaukset

DesignsByADino homepage
Amy's Hen House homepage
DesignsByADino - product view
Amy's Hen House - contact page

Tekniset kohokohdat

  • ->CSS-muuttujat ovat oikea ratkaisu monen brändin teemojen hallintaan – ei erillisiä koodikantoja, ei CSS-in-JS:ää eikä teeman vaihtamista suorituksen aikana.
  • ->Tietokantarakenteen suunnittelu alusta alkaen maksupalveluntarjoajasta riippumattomaksi tarkoitti, että molemmissa käyttöönotoissa voidaan käyttää eri maksupalveluntarjoajia ilman minkäänlaisia eroja tietokantarakenteessa.
  • ->40–60 prosentin suorituskyvyn parannus ensimmäisen käyttöönoton jälkeen kattaa kehysratkaisun alkuinvestoinnin nopeasti.
  • ->Kaksi yritystä, jotka näyttävät ja tuntuvat täysin erilaisilta, voivat jakaa 95 % infrastruktuuristaan – teemajärjestelmä hoitaa raskaimman työn.