Kalkulator wyceny w Next.js — bez backendu

Chciałem, żeby klient poznał orientacyjny koszt projektu, zanim w ogóle napisze. Efekt: kalkulator, który przelicza kwotę na żywo — bez żadnego backendu, bazy ani zewnętrznego API.

Ceny w jednym miejscu

Cała konfiguracja — rodzaje projektów, funkcje, warianty grafiki — siedzi w jednym pliku i jest importowana zarówno przez kalkulator, jak i sekcję „Usługi”. Dzięki temu ceny nigdy się nie rozjeżdżają.

// lib/pricing.ts
export const projectTypes = [
  { id: "strona", label: "Strona www", base: 450 },
  { id: "sklep",  label: "Sklep",     base: 1500 },
];

export const featuresList = [
  { id: "cms", label: "System CMS", price: 150 },
  { id: "seo", label: "SEO", price: 0, tbd: true }, // „do ustalenia"
];

Liczenie na żywo

Wybory klienta trzymam w useState, a wynik liczę w useMemo — przelicza się przy każdej zmianie. Kwotę pokazuję jako widełki (od–do), bo wycena jest orientacyjna, a nie ostateczną fakturą.

const total = useMemo(() => {
  let sum = type.base;
  for (const f of featuresList)
    if (picked.includes(f.id)) sum += f.price;
  return sum * timeline.mult; // np. ekspres +30%
}, [type, picked, timeline]);

Podsumowanie, które wypełnia formularz

Przycisk „Wyślij zapytanie” zapisuje gotowe podsumowanie w sessionStorage i przechodzi do strony kontaktu. Tam formularz wczytuje je do treści wiadomości — bez przenoszenia stanu przez URL ani backend.

// na /wycena
sessionStorage.setItem("wycena_summary", summary);

// na /kontakt (useEffect)
const saved = sessionStorage.getItem("wycena_summary");
if (saved) messageRef.current.value = saved;

Dlaczego bez backendu

• Zero danych do pilnowania — nic nie trafia do bazy.
• Hostuje się jak zwykła strona, bez dodatkowej infrastruktury.
• Zmiana cen to edycja jednego pliku, nie migracja.
• Szybko — wszystko dzieje się w przeglądarce.