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.
Ö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.
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.
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.
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 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.
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.
Hat terület, amiből egy működő rendszer összeáll — ahogy egy megrendelő kérdezné, nem ahogy egy önéletrajz sorolná.
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.
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 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.
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.
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.
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.
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.
Ebben a repóban fut
Ebben a repóban fut
Projektekben használtam
Projektekben használtam
Ebben a repóban fut
Ebben a repóban fut
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.
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
Á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
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
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
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
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
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
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
Ü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.
Bemutató projekt
Bemutató szalonoldal: az árak egy hajszínkártyán, a fodrászok kerek tükörben a saját legközelebbi szabad időpontjukkal, az időpontválasztó pedig egy fésű, fél óránként egy foggal. 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
Bemutató projekt
Bemutató napi menü büfének: a mai menü betűtáblán, allergénszűrővel. Elvitelre előre lehet rendelni, minden rendelés egy pecsét a telefonos törzskártyán, a hét letéphető naptárlapokon. 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
Bemutató projekt
Bemutató oldal villanyszerelőnek: az árak egy mérőműszer tárcsáján, előtte-utána csúszka, a munkamenet érszínekkel, az ajánlatkérőben pedig kismegszakítókat kapcsolsz fel. 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
Bemutató projekt
Bemutató autószerviz-oldal: a műhely fehértáblája a mai emelőkkel és a következő szabad leadással, műhelyidő foglalása rendszámmal, árajánlatkérés, vizsga előtti ellenőrzőlista. Saját kezdeményezés, nem ügyfélmunka.
Tervezés, fejlesztés, deploy
A feladat
Egy kis szervizben a telefon egész nap csörög: mikor hozhatom, mennyi lesz. A szerelő a kocsi alól veszi fel, az időpont füzetbe kerül, az ajánlat fejben marad.
A megoldás
Két belépő: aki tudja, mi kell, foglal; aki csak azt tudja, hogy „kopog”, leírja, és visszahívást kér. A sávszámítás a fodrász-demóból jön, tesztekkel. A demó localStorage-ben fut; élesben adatbázis és SMS-emlékeztető jönne.
Stack
Bemutató projekt
Bemutató virágbolt: kész csokrok zsinegen, amelyek egy koppintással a csokorkötőbe kerülnek, ott szálanként rakod össze a mai készletből. Szezonnaptár és ápolási kártya. Saját kezdeményezés, nem ügyfélmunka.
Tervezés, fejlesztés, deploy
A feladat
Egy kis virágbolt oldalán általában fotógaléria és telefonszám van. Aki csokrot akar, felhív, és szóban próbálja elmagyarázni, mit szeretne.
A megoldás
Csokorkötő a mai vödrökből: a virágok középre, a zöldek szélre kerülnek, a szálak átcsúsznak az új helyükre. Csomagolás, kártya, átvételi nap és napszak. A csokor logikája tesztelt modul.
Stack
Bemutató projekt
Bemutató masszázsstúdió: megadod, mennyi időd van és hol fáj, az oldal percre beosztja a masszázst, kiírja az árat és a beleférő szabad időpontokat. Ajándékutalvány percre, élő előnézettel. Saját kezdeményezés, nem ügyfélmunka.
Tervezés, fejlesztés, deploy
A feladat
Aki masszázsra jelentkezik, ritkán tudja, hogy svéd vagy sport kell neki. Azt tudja, hol fáj, és mennyi ideje van. A legtöbb szalon oldala mégis a kezelések nevével kezd.
A megoldás
A választott időt 5 perces lépésekben osztja el a területek között, minden területnek jut egy minimum, és ha nem fér bele, megmondja, hány perc kell. Utána a hosszhoz illő szabad időpontokat mutatja, zárás előtt befejezve. Mindkettő tesztelt modul.
Stack
Bemutató projekt
Bemutató vendégház: a recepciós kulcstáblán csak a kiválasztott napokra szabad szobák kulcsa lóg, az ár IFA-val együtt számolódik, és egymás mellett látszik, mennyivel olcsóbb közvetlenül foglalni, mint portálon. Saját kezdeményezés, nem ügyfélmunka.
Tervezés, fejlesztés, deploy
A feladat
Egy kis vendégház a vendégei nagy részét portálokon kapja, és minden foglalás után kb. 15% jutalékot fizet. A saját oldala többnyire csak fotógaléria telefonszámmal: nem látszik, van-e szabad szoba, mennyibe kerül, és miért érné meg közvetlenül foglalni.
A megoldás
A dátum, a létszám és a kutya alapján csak a jó szobák kulcsa lóg a táblán, a foglaltaknál krétával ott van, mikortól szabadok. A szállásjegy soronként számol, az IFA-t csak a felnőttekre. Ha semmi sem jó, egy gomb az első szabad napra ugrik. A kérés végén látszik, mit kap a vendég, és mit lát a gazda: jutalék 0 Ft. A számolás tesztelt modul.
Stack
Bemutató projekt
Bemutató kávézó, ami este borbár: a nap ívén húzott idő átváltja az oldalt nappaliból estébe, és vele a kínálatot is. Az esti programokra szabad hellyel lehet asztalt kérni. Saját kezdeményezés, nem ügyfélmunka.
Tervezés, fejlesztés, deploy
A feladat
Egy kávézó, ami este borbár, valójában két hely: reggel a kávét keresik, este a bort és a programot. Egy átlagos oldal mindkettőt egyszerre mutatja, így egyik sem jön át, és az esti asztalokat telefonon foglalják, ha egyáltalán.
A megoldás
A nyitóoldal teljes képernyős fotója a választott időponthoz úszik át nappaliból estébe; a tárcsa egy ív, amin a nap (este a hold) halad. A kínálat csak napszakváltáskor rajzolódik újra. A programoknál látszik, hány hely maradt, és a kérés a pult nézetével zárul. A nyitvatartás és a programok tesztelt modulból jönnek.
Stack
Bemutató projekt
Bemutató ajándékbolt: a nyitóoldal ajándéka betöltéskor becsomagolja magát, kattintásra kibomlik, és kiugrik belőle három ajánlat a polcról. Az ajándékkereső a készletből ajánl, a csomagolás és a kártya élőben látszik, a bolt félreteszi. Saját kezdeményezés, nem ügyfélmunka.
Tervezés, fejlesztés, deploy
A feladat
Aki ajándékot keres, nem terméket keres, hanem ötletet. Egy kis bolt oldala többnyire csak fotókat és nyitvatartást mutat, így a vásárló nem tudja meg, van-e jó ötletük a keretéhez, és inkább webáruházban rendel.
A megoldás
Három kérdésből (kinek, mire, mennyiért) a valós készletből ajánl, az elfogyottat jelzi. A választott ajándék egy CSS-ből rajzolt csomagon élőben változik a papírral és a kártya szövegével, a végén egy rövid kóddal a következő zárásig félreteszik. Az ajánlás és a félretétel tesztelt modul.
Stack
Bemutató projekt
Bemutató telefon- és számítógép-szerviz: a nyitóoldalon egy szétszedett telefon rétegei a hibák. A rossz részre bökve ott látszik az ár és hogy mikorra kész, a javítás munkalapszámmal követhető, és van nyomtatási kalkulátor. Saját kezdeményezés, nem ügyfélmunka.
Tervezés, fejlesztés, deploy
A feladat
A szervizbe telefonálók első két kérdése mindig ugyanaz: mennyi és mikorra. A legtöbb szerviz oldala erre nem felel, ezért a telefon egész nap cseng, és aki nem éri el őket, a következő szervizt hívja.
A megoldás
CSS-3D-ben szétnyíló telefon: a kijelző, a keret a töltővel, az alaplap, az akkumulátor és a hátlap egy-egy hiba. A választott réteg fiókként kicsúszik, mellette az ársáv és az elkészülés napja. A teljes becslés eszközre és márkára is számol, hőpapír-nyugta formában. A becslés, a munkalap és a nyomtatás tesztelt modul.
Stack
Bemutató projekt
Bemutató kerékpárszerviz: a bicikli rajzán kell rábökni a rossz részre, abból áll össze a munkalap árral és idővel. A rajz görgetésre forog, a kiválasztott alkatrészre nagyít, a leadásnál csak az a nap választható, ahová a munka belefér. Saját kezdeményezés, nem ügyfélmunka.
Tervezés, fejlesztés, deploy
A feladat
Aki elviszi a biciklijét, többnyire nem tudja, hogy hívják a rossz alkatrészt, és mennyi idő lesz. A szerviz telefonon próbálja kitalálni, a műhelyben pedig egymásra torlódnak a munkák.
A megoldás
Öt pont a rajzon (kerék, fék, lánc, váltó, kormány), mindegyik a saját munkáit kínálja; a kiválasztottakból munkalap lesz árral és szerelőidővel, egy csomag elnyeli a benne lévő beállításokat. A leadási napoknál látszik a szabad szerelőidő, és csak az a nap választható, ahová belefér. A számolás tesztelt modul.
Stack
Bemutató projekt
Bemutató optika: a nyitóoldal egy homályos szemtábla, amit egy húzható lencse alatt élesen látni. A recept számait emberi nyelven magyarázza, lencsét ajánl hozzá árral, és arcformához mutat keretet. Saját kezdeményezés, nem ügyfélmunka.
Tervezés, fejlesztés, deploy
A feladat
A szemüvegrecept a legtöbb embernek érthetetlen számsor, és fogalma sincs, mennyibe kerül majd a lencse. Az optikák oldala ritkán segít ebben, így az árat csak a pultnál tudja meg.
A megoldás
A tábla két rétegben van: egy elmosott és egy éles másolat, amit a lencse körbe vág; a lencse egérrel, ujjal és nyilakkal is mozgatható. A recept-űrlap negyedes lépésben kér, és soronként elmondja, mit jelent; a dioptria alapján lencseindexet és párárat ajánl. A magyarázat és az ajánlás tesztelt modul.
Stack
Bemutató projekt
Bemutató állatorvosi rendelő: a nyitóoldalon egy növekedési vonalzó, amin a kölyök az életkorral halad és nő, az oltások pedig mancsként telnek be. A teljes oltási naptár a születési dátumból számol, és SMS-emlékeztetőt lehet kérni. Saját kezdeményezés, nem ügyfélmunka.
Tervezés, fejlesztés, deploy
A feladat
A gazdák nagy része nem tudja fejből, mikor esedékes a következő oltás, és a kötelező veszettség elleni oltás könnyen elcsúszik. A rendelő telefonon emlékeztet, ha egyáltalán.
A megoldás
A vonalzó négyzetgyökös léptékű, hogy a sűrű első hónapok is olvashatók legyenek; a kép, a csúszka és a mancsok ugyanazon a skálán vannak. Kutya és macska külön tervet kap. A naptár a múltbeli oltásokat elmaradtnak jelzi, amíg nincs bepipálva, az évente ismétlődőknél a következőt mutatja. A terv és az emlékeztető napja tesztelt modul.
Stack
Bemutató projekt
Bemutató ügyvédi iroda: a nyitóoldalon egy dosszié, ügytípusonként egy füllel. A fül előre hozza az aktát a várható díjjal és időtartammal, alatta kinyomtatható „hozza magával” lista és konzultációfoglalás. Saját kezdeményezés, nem ügyfélmunka.
Tervezés, fejlesztés, deploy
A feladat
Ügyvédhez a legtöbben úgy mennek, hogy nem tudják, mennyibe kerül és meddig tart, és az első találkozóra a fele irat hiányzik. Az irodák oldala többnyire csak szakterületeket sorol.
A megoldás
Hat ügytípus, mindegyiknek saját aktája: mit csinálunk, meddig tart, mennyi a díj (ingatlannál a vételár 0,8%-a, legalább 80 000 Ft). A fülek nyilakkal is válthatók, a választás átkerül a részletekhez és az iratlistához, ami pipálható és nyomtatható. A díjszámítás tesztelt modul.
Stack
Bemutató projekt
Bemutató tetoválószalon: a flash lap mintái stencilként rajzolódnak ki, mindegyiket csak egyszer varrják, a foglalt át van húzva. A becslő a hely, a méret és a stílus alapján ár- és időkeretet, alkalmak számát és fájdalomszintet ad. Saját kezdeményezés, nem ügyfélmunka.
Tervezés, fejlesztés, deploy
A feladat
Aki tetoválást szeretne, üzenetben teszi fel a stúdiónak ugyanazokat a kérdéseket: mennyi, hány alkalom, mennyire fáj. A válasz napokig tart, és addig máshol is kérdez.
A megoldás
A minták SVG-vonalrajzok, amik a lap képernyőre érésekor stencilként rajzolódnak ki, hoverre piros tintával újra; egy minta egyszer foglalható, 18 éven aluliaknak nem. A becslő a testrész, a méret és a stílus alapján számol, legfeljebb 4 órás alkalmakra bontva. A becslés tesztelt modul.
Stack
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.