Vissza a főoldalra
╱ Fejlesztői profil

Rizmajer Máté Levente

Full-stack fejlesztő — React és Node.js

Full-stack webalkalmazásokat építek: a felülettől az API-n át az adatbázisig ugyanaz a kéz viszi végig. Jellemzően olyan rendszereket, amik a napi adminisztrációt alakítják magától működő folyamattá — foglalás, rendelés, belső nyilvántartás.

A munkamódszeremben az a rögzített pont, hogy a hibának hangosnak kell lennie. A tesztek, a lint és a build-idejű állítások azt fogják meg, amit egy átnézés nem: ezen az oldalon például a build leáll, ha egy magyar mondat átcsúszik az angol változatra. Ami csendben romlik el, azt előbb veszi észre a látogató, mint én.

Most a TypeScript és a szélesebb tesztelési gyakorlat felé mélyítem a munkát — ezért nem szerepel egyik sem a stackben: éles kódot még nem írok bennük. Nyitott vagyok fejlesztői pozícióra és szerződéses munkára is. Ha olyan technikai részlet érdekel, ami itt nem szerepel, írj; konkrét kérdésre konkrétan válaszolok.

Hogyan építek

Öt terület, mindegyikhez egy álláspont és a hozzá tartozó konkrétumok. Nem az számít, ismerem-e a neveket, hanem hogy mi alapján döntök, amikor két megoldás is kínálja magát.

Architektúra

A legkisebb szerkezet, ami elbírja a feladatot. Absztrakciót akkor vezetek be, amikor a második hívó megjelenik — előtte az interfész, amit egyetlen implementáció használ, nem absztrakció, csak egy plusz fájl.

  • Egy tény egy helyen él, és minden más onnan olvassa. Ez az oldal a saját kárán tanulta meg: a projektek száma négy fájlban élt párhuzamosan, amíg az egyik hamis állítássá nem avult.
  • A megosztott döntések — mozgási időzítések, útvonalak, színtokenek, kétnyelvű szövegek — külön modulban vannak, hogy ne tudjanak észrevétlenül szétcsúszni.

Frontend

Komponens felelősségenként, a megosztott viselkedés hookban. Az állapot ott él, ahol használják, és amit ki lehet számolni, azt nem tárolom: a nyelv például az URL-ből következik, nem egy state-ből.

  • Minden aszinkron ághoz tartozik betöltési, hiba- és üres állapot, nem csak a sikeres út. Az üres állapot is szöveg, nem egy kihagyott doboz.
  • Az akadálymentesség nem utólagos réteg: látható fókuszjelzés minden interaktív elemen, mért kontraszt a becsült helyett, és statikus oldal reduced-motion beállítás alatt.
  • A reszponzív munka a telefonnál kezdődik, mert a látogatók nagyobb része onnan érkezik — nem a széles nézetnél, amit a fejlesztő lát maga előtt.

Backend és adat

Erőforrás szerint szervezett REST végpontok, kiszámítható státuszkódokkal, és olyan hibaválaszokkal, amiknek ugyanaz az alakja, mint a sikereseknek — így a kliensnek nem kell kétféleképpen olvasnia ugyanazt a hívást.

  • A validáció a szerveren is lefut. A böngészőben végzett ellenőrzés kényelem a felhasználónak, nem védelem a rendszernek.
  • Az authentikáció és a jogosultság két külön kérdés — ki vagy, és mihez férhetsz hozzá. Egyetlen szerepkör-mezőbe összevonva a második kérdésre soha nem lehet pontosan válaszolni.
  • A séma megválasztása döntés, nem szokás: kötött szerkezetű adatnál relációs, változó alakúnál dokumentum-alapú. A változások migrációban mennek, hogy visszakövethetők legyenek.

Minőség

A minőség nem egy fázis a végén. Lint és teszt minden változtatás után, és maga a build is kapu: ha egy állítás nem teljesül, nincs kimenet.

  • A tesztek a viselkedést rögzítik, nem az implementációt. Különben minden refaktor teszthibaként jelentkezik, és a készlet akadállyá válik ahelyett, hogy védőháló lenne.
  • A néma hiba a drága. Ahol választani lehet a hangos leállás és a csendes visszaesés között, a leállást választom — a fordítási segédfüggvény például hibát dob a hiányzó szövegre ahelyett, hogy magyarra esne vissza egy angol oldalon.

Élesítés

Az élesítés nem a munka vége, hanem az a pont, ahol a korábbi döntések láthatóvá válnak. Amit nem lehet visszaállítani vagy megmérni, azt nem tekintem késznek.

  • Security headerek és tartalombiztonsági irányelv, hogy ne csak a kód korlátozza, mi futhat az oldalon, hanem a böngésző is.
  • A crawler kész HTML-t kap, nem egy üres elemet, amit majd a JavaScript tölt fel. A keresőoptimalizálás így szerkezeti kérdés, nem kulcsszavaké.
  • A konfiguráció környezeti változóban él, nem a kódban, és a titkok soha nem kerülnek a böngészőbe.

Mit csinálok

Hat terület, amiből egy működő rendszer összeáll — ahogy egy megrendelő kérdezné, nem ahogy egy önéletrajz sorolná.

Weboldal és felület

Amit az ügyfeled lát és használ. Telefonon ugyanúgy, mint gépen — mert a látogatók nagyobb része onnan érkezik.

A gyakorlatban ez React 19-et, Vite-ot és Tailwindet jelent, komponens-alapú felépítéssel.

Teljesítmény és sebesség

A lassú oldalról a látogató visszalép, mielőtt bármit látna. A sebességet ezért mérem, nem érzésre állítom be.

Lighthouse és a hálózati panel alapján dolgozom, nem tippre. Képoptimalizálás, kódfelosztás és a felesleges újrarenderelések kiszűrése — a cél, hogy a mobil betöltés is a másodperc alatti tartományban maradjon. A Kovács Villanyszerelés bemutató oldal mobilon Lighthouse-ban 99 / 100 / 100 / 100 (teljesítmény, akadálymentesség, bevált gyakorlatok, SEO).

Ami a háttérben fut

Ami a felület mögött dolgozik: a foglalás tényleg lefoglal, a rendelés megérkezik, és csak az lát adatot, akinek szabad.

Node.js és Express, REST végpontokkal és JWT-alapú munkamenet-kezeléssel. A validáció a szerveren is lefut, nem csak a böngészőben, és minden hibaághoz tartozik egyértelmű válasz. Az Időpontfoglaló demóban a szabad sávot mentéskor újraszámolom, így két vendég nem kaphatja meg ugyanazt az időpontot, a foglalások listája pedig PIN mögött van.

Adatbázis tervezés

Az ügyfeleid, foglalásaid és rendeléseid úgy tárolva, hogy évek múlva is meg lehessen találni bennük bármit.

PostgreSQL-t vagy MongoDB-t választok aszerint, mennyire kötött az adat szerkezete. A sémát migrációkban vezetem, így minden változás visszakövethető, az indexeket pedig a tényleges lekérdezésekhez igazítom.

Folyamatos működés

Az oldal akkor is fut, amikor én nem ülök gép előtt. Ha egy frissítés mégis elrontana valamit, percek alatt visszaáll.

A teszteket és a buildet GitHub Actions futtatja, az élesítés innen megy Vercelre vagy konténerbe. Minden verzió visszaállítható, a környezeti változók pedig sosem kerülnek be a repóba.

Átadható munka

Nem kerülsz függő helyzetbe. A munka dokumentálva van, így ha egyszer más viszi tovább, nem kell elölről kezdenie.

Külön ág minden funkcióhoz, kis pull requestek és beszédes commit üzenetek. A README-ben leírom, hogyan indul el a projekt, hogy egy új fejlesztő ne tőlem függjön az első napján.

Amivel dolgozom

Két csoportba osztva aszerint, mi ellenőrizhető. Ami ebben a repóban fut, azt meg lehet nyitni; a többit a leszállított munkából hozom. Százalékos tudásszint nincs, mert nincs mögötte semmi.

Frontend

Ebben a repóban fut

  • React 19Ez az oldal
  • JavaScript (ES modules)Ez az oldal
  • Vite 8Build és fejlesztői szerver
  • Tailwind CSSTokenekre kötött téma
  • React RouterKétnyelvű útvonalak
  • GSAPGörgetés- és belépő animációk

Backend

Ebben a repóban fut

  • Node.jsA build és a prerender sima Node-ban fut

Projektekben használtam

  • ExpressREST végpontok
  • REST APIErőforrás szerinti felépítés
  • JWTMunkamenet-kezelés

Adat

Projektekben használtam

  • PostgreSQLKötött szerkezetű adat, migrációkkal
  • MongoDBVáltozó alakú dokumentumok
  • SupabaseSaját projektekben

Tesztelés és minőség

Ebben a repóban fut

  • Vitest156 teszt, 23 fájlban
  • Testing LibraryKomponensek viselkedése
  • oxlintMinden commit előtt

Infrastruktúra és munkamenet

Ebben a repóban fut

  • GitÁg funkciónként, kis commitok
  • GitHubNyilvános forrás
  • VercelÉlesítés a main ágról
  • npmBuild pipeline

Ez az oldal, belülről

A legjobban ellenőrizhető munkám az az oldal, amit épp olvasol. Nyolc döntés, mindegyikhez az ok és a fájl, amiben megnézhető — mert az ok nélküli döntés csak funkciólista, a fájl nélküli ok pedig csak állítás.

Prerendering Node-ban, nem headless böngészőben

A szekciók addig maradnak átlátszók, amíg egy IntersectionObserver be nem kapcsolja őket. Node-ban nincs IntersectionObserver, tehát minden szekció teljes láthatósággal renderelődik — headless Chrome-ban viszont van, így a pillanatkép a hajtás alatti tartalmat üresen rögzítené. Ráadásul így nem kell Chromiumot letölteni minden élesítéshez.

Forrás: scripts/prerender.mjs

A nyelv az URL-ből következik, nem állapotból

Állapotban tartott nyelvvel a szerver magyart renderel a HTML-be, a hidratálás pedig átvált — ez látható villanás az olvasónak, és a kereső azt indexeli, amit a szerver tippelt. Az útvonal tiszta függvényeként nincs mit szinkronizálni, és mindkét nyelvnek valódi, megosztható URL-je van.

Forrás: src/i18n/locales.js

hreflang csak oda, ahol tényleg van párja

A két jogi oldal szándékosan magyar marad, mert egy kötelező érvényű dokumentum fordítása nem második változat, hanem második dokumentum. Egy 404-re mutató hreflang miatt viszont a kereső az egész nyelvi klasztert eldobja — ezért a generálás előbb ellenőrzi, hogy a párja létezik-e, és csak akkor ír ki tagot.

Forrás: scripts/prerender.mjs

sitemap, robots és llms.txt generálva, nem kézzel írva

Kézzel karbantartva elavultak: az llms.txt olyan árat hirdetett, amit az árazás már nem tartalmazott. A kézzel írt segédfájl mindig azzal a verzióval marad le, amit senki nem néz meg élesítéskor. Egy forrásból generálva nincs mit elfelejteni.

Forrás: scripts/generate-static.mjs

Strukturált adat a forrásból, nem másolatból

A JSON-LD nyolc GYIK-választ tartalmazott kézzel bemásolva, és elcsúszott: a látható oldal már az új árat mutatta, a strukturált adat még a régit. Pont ezt a szöveget idézi a kereső, tehát a régi volt a valószínűbben olvasott. A blokk most a forrásból épül, így nincs második példány, amit elfelejteni lehetne.

Forrás: scripts/prerender.mjs

A build leáll a néma hibákon

Minden ellenőrzés azzal jelez, hogy nem talál semmit, tehát a hibás ellenőrző és a tiszta oldal ugyanúgy néz ki. A build ezért kimondottan azokat a hibákat keresi, amiket senki nem venne észre: átlátszón maradt szekció, magyar szöveg az angol oldalon, üresen maradt strukturált adat, két helyen tartott oldalcím. Van olyan ellenőrzés is, ami magát az ellenőrzőt ellenőrzi.

Forrás: scripts/prerender.mjs

Tartalombiztonsági irányelv inline script nélkül

A script-src csak a saját forrást engedi, unsafe-inline nélkül — így nincs hova beszúrni egy hidratációs adatblokkot, és a prerender szándékosan nem is állít elő egyet. A megkötés alakította a megoldást, nem utólag került rá.

Forrás: vercel.json

Saját hostolt betűtípusok, latin-ext karakterkészlettel

Egy betűtípus-CDN egyszer 200-as válasszal, de CSS helyett egy „ideiglenesen korlátozva" megjegyzéssel felelt — a szöveg tartalék betűtípusra esett vissza, hibaüzenet nélkül, mindenhol. A helyi fájlok ezt megszüntetik, a latin-ext készlet pedig azt, hogy az ő és az ű szó közben más betűtípusra váltson.

Forrás: src/fonts.css

Projektek

Ügyfélprojekthez nyilvános linket és repót nem adok: éles rendszerek, valódi ügyféladatokkal. A saját projektekhez demókat építek, amiket bárki megnyithat, és kódot szívesen mutatok egy beszélgetésen. Az első ügyfélmunka most készül — amint él, itt lesz a link és a képernyőkép.

Szálka Fodrászat bemutató foglaló: szolgáltatások, napválasztó és időpontok

Bemutató projekt

Időpontfoglaló — Szálka Fodrászat

Bemutató időpontfoglaló fodrászatra: szolgáltatás, naptár, foglalás, admin lista. Saját kezdeményezés, nem ügyfélmunka.

Tervezés, fejlesztés, deploy

A feladat

Egy kis fodrászatnak kell egy egyszerű, telefonról is használható foglaló — anélkül, hogy Excelben vagy üzenetben egyeztessen.

A megoldás

Szolgáltatásválasztó, szabad sávok, foglalási űrlap, megerősítő képernyő és admin lista. A demó localStorage-ben fut; élesben Supabase + e-mail jön.

Stack

  • React
  • Vite
Kispipa Büfé bemutató napi menü: leves, főételek, desszert Ft-ban

Bemutató projekt

Napi menü — Kispipa Büfé

Bemutató napi menü büfének: mai lap, heti nézet, egyszerű szerkesztő. Saját kezdeményezés, nem ügyfélmunka.

Tervezés, fejlesztés, deploy

A feladat

A kisvendéglő a napi menüt gyakran papírlapról fotózza Facebookra — a vendég nem találja, a tulaj nehezen frissíti.

A megoldás

Nyilvános mai menü, heti áttekintés, jelszavas szerkesztő. A demó localStorage-ben ment; élesben Supabase auth + tábla.

Stack

  • React
  • Vite
Kovács Villanyszerelés bemutató oldal: név, szolgáltatások röviden, ajánlatkérés és hívás gomb

Bemutató projekt

Bemutatkozó oldal — Kovács Villanyszerelés

Bemutató egyoldalas oldal villanyszerelőnek: mit vállal, hol, hívás gomb, ajánlatkérő. Saját kezdeményezés, nem ügyfélmunka.

Tervezés, fejlesztés, deploy

A feladat

Egy szakiparosnak nem webshop kell, hanem egy oldal, ami telefonon azonnal betölt, megmondja, mit vállal és hol, és egy koppintással hívható.

A megoldás

Egy oldal sima HTML-lel és CSS-sel, keretrendszer nélkül, egy rövid scripttel az űrlaphoz. Helyi vállalkozás schema.org adattal. A bemutató űrlapja nem küld e-mailt; élesben egy űrlapszolgáltatás kerülne mögé.

Stack

  • Vite
  • HTML
  • CSS

Együttműködés

Háromféle megkeresés érkezik, és mindhárom ugyanoda fut be. Nem kell előre eldöntened, melyikbe tartozol — írd meg, mi a helyzet.

Fejlesztői pozíció
Alkalmazottként és szerződéses formában is. Ha a csapatnak kódmintára vagy technikai beszélgetésre van szüksége a folytatáshoz, mindkettő megoldható.
Projektalapú munka
Weboldal vagy belső rendszer, előre egyeztetett árral. Az árak és a folyamat a főoldalon nyilvánosak.
Technikai kérdés
Ha csak egy döntésről vagy egy megoldásról szeretnél kérdezni, arra is válaszolok — akkor is, ha nem lesz belőle munka.

Szolgáltatások és árak a főoldalon