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.

Így dolgozom

Ö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.

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
  • SupabaseWebWise Studio

Tesztelés és minőség

Ebben a repóban fut

  • Vitest138 teszt, 21 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.

Saját projekt

Business Value Builder

Saját árazási oldal: azt modellezi, hogyan lehet egy környékbeli vállalkozásnak úgy árat mondani, hogy a végösszeg előre kiszámítható maradjon.

Stack

  • React
  • TanStack Start

Saját projekt

WebWise Studio

Ügynökségi koncepció-oldal egyedi React/AI alapú webalkalmazásokra — saját kezdeményezésű prototípus.

Stack

  • React
  • Supabase
  • Framer Motion

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.

Árak és folyamat a főoldalon