/telekisnapok

A Székesfehérvári Teleki Blanka Gimnázium Telekis Napok rendezvényének szavazó rendszere.

Primary LanguageTypeScript

Telekis Napok Szavazó Rendszer

Éles weboldal linkje

Tartalom

Motiváció

Miért is készült el ez a weboldal? Itt vagyunk a 21. században, és még mindig kézzel kell számolni a tn-es szavazatokat. Ez elég sok ember munkákát igényli: szavazó teremben 3-4 diák plusz 1 tanár, óránkénti váltásban. Ez még annyira nem vészes, mert így mindenki csak 1 órányi programról marad le. Ekkor jön a számlálás, ami kb 1 óra alatt meg is van, csak a probléma az, hogy a számlálók bent ragadnak a terembe több órára, hogy nehogy lespoilerezzék az eredményt, ez a tavaly kb 2 óra volt. (Ez amúgy azért nem is nagyon működik, mert telefonon bármikor leadhatják az infót) Ezekre mind megoldást szolgál ez az oldal, amit alább részletezek is.

Rugalmasság

Bárhonnan lehet szavazni - telefonról, pcről, wcről, tabletről.

Biztonság

Az authentikáció a Microsoft Azure Active Directory segítségével történik, mivel ugye mindenkinek van @sztbg.hu-s email címe. Értelem szerűen csak sulis fiókkal lehet szavazni, ezt az azure ad el is intézi, mert úgy van beállítva. A weboldal titkosítást használ, a certification a let's encrypt-től van. Az authentikációban használt másik technológia a jwt, ezt használjuk, hogy későbbi bejelentkezést igénylő lekérdezéseknél ne kelljen újra belépni az oldalra. Ez tárolja pl a felhasználó nevét és email címét. A szavazások tárolására postgres adatbázist használjuk, ami egy relációs, SQL alapú adatbázis.

Kapcsolódó fileok:

Fair-play

Hogyan is tároljuk az adatokat, hogy a szavazás anonim lehessen? Ha bejön egy szavazás, akkor authentikáció után először ellenőrizzük, hogy az adott felhasználó szavazott-e, illetve a szavazás elkezdődött-e / véget ért-e már. Utána a szavazáshoz kapcsolva eltároljuk, hogy a felhasználó szavazott, fontos, hogy itt nem tároljuk el, hogy kire szavazott (voter tábla). Majd az osztályhoz kapcsolva eltároljuk, hogy valaki szavazott rájuk, és, hogy mikor. Az utóbbit csak azért, hogy gyönyörű diagramokat lehessen csinálni az admin dashboardra, valamint később nyilvánosan.

Az alábbi ábra mutatja az adatbázis szerkezetét:
image

Kapcsolódó fileok:

Open-source

A weboldal teljes mértékben nyílt forráskódú. Változtatásokat szívesen fogadok, akár Pull Request, akár személyes megkeresés, akár email formájában.

Technikai dolgok

A stack a weboldal mögött majdnem t3 stack, egyedül a tRPC hiányzik, de ide nincs is rá szükség. Miért jó a next js? A next js frontendre reactot használ, ami a komponens alapú megközelítésével nem véletlen széleskörben kedvelt. A typescript használata nem is kérdés. Nyilván javascriptre fordul, úgyhogy történhetnek vicces dolgok, de legalább compilekor van type-checking, illetve fejlesztés közben az autocorrect meg intellisense se jön rosszul. Orm-nek a prismára esett a választás, mivel type-safe, ami megkönnyíti a fejlesztést. A backend serverless ez sok problémát vet fel, de az adatbázis tekintetében a legnagyobb a connection pooling. Ugye itt minden egyes requestnél új kapcsolatot nyitunk az adatbázis felé, így elég hamar betelítjük a limitet. Erre kínál megoldást a prisma data proxy, aminek segítségével az előbbi probléma már nem fog fennállni. A next js-nek a másik nagy előnye, hogy lehet vele ISR-t csinálni. Ennek lényege, hogy az oldal statikus (SSG), viszont emellett percenként legfejlebb 1 requestnél az adott pagere megnézi az adatbázisból, hogy van-e változás, ha igen akkor a háttérben újra generálja az oldalt, majd invalidálja a cachet, és már a friss oldal látszik (SSR).