O mně
Já jsem Martin Hanák, programátor se zaměřením na vývoj frontendu webových aplikací. Rád pracuji s JavaScriptem a jeho příbuznými technologiemi při vytváření efektivních webových řešení.
Studium jsem započal v oboru fyziky na Univerzitě Karlově v Praze, kde jsem se specializoval na počítačové modelování pro molekulární dynamiku. Analytické dovednosti, které jsem v průběhu této doby získal, byly neocenitelné při mém přechodu ke tvorbě webových aplikací.
S nadšením se stále učím nejnovějším trendům v HTML, CSS, JavaScriptu a Reactu. Jako frontend programátor usiluji o vytváření funkčních a uživatelsky přívětivých webových rozhraní.
Moje dovednosti
Frontend
Nejvíce zkušenosti mám s jazyky JavaScript, TypeScript a jejich souvisejícími technologiemi. Pro tvorbu dynamických frontendů mých aplikací využívám populární frameworky a knihovny jako jsou například React, Redux nebo Next.js. Spolu s mými znalostmi HTML a CSS jsem schopen vytvářet interaktivní a uživatelsky přívětivá rozhraní.
React
HTML
CSS
Redux
Tailwind
Next.js
JavaScript
TypeScript
Backend
Pro tvorbu backendu je mojí preferovanou volbou Node.js nebo Express.js. Jsem obeznámen s vytvářením REST API a propojováním aplikací s databázemi pomocí technologií jako jsou Sequelize, PostgreSQL, MySQL nebo Prisma.
Node
Express
Prisma
MySQL
Sequelize
Postgres
Tools
Během studia jsem se seznámil s mnoha užitečnými nástroji, které nyní používám denně. Pro správu verzí svých aplikací využívám Git a GitHub, pro testování pak Jest a jako svůj hlavní editor kódu používám VS Code. Aplikace nasazuji pomocí virtuálních strojů s operačním systémem Linux a služeb jako je DigitalOcean. Kromě toho mám zkušenosti s konfigurací reverzní proxy pomocí Nginx a s používáním správce procesů PM2.
npm
git
GitHub
Jest
VS Code
Nginx
PM2
Projekty
Podívejte se na některé z mých projektů, které jsem v poslední době vytvořil
Gravitorium
Online simulace dynamiky sluneční soustavy
Gravitorium
Gravitorium je interaktivní simulace pohybu planet v naší sluneční soustavě. Simulace umožňuje přesně vypočítat jejich pohyb a zobrazovat jejich trajektorie.
Hlavní použité technologie
- React
- React Three Fiber
- Three.js
React byla hlavní technologie použitá k vytvoření frontendu tohoto projektu, spolu s CSS moduly.
Data pro pozice a rychlosti planet byla načtena z veřejně dostupného NASA API.
3D vizualizace byla převážně vytvořena pomocí knihovny React Three Fiber ve spojení s Three.js a Drei. Pod kapotou využívá WebGL a metodu requestAnimationFrame prohlížeče k vytvoření plynulé animace s 60 snímky za sekundu.
Ostatní technologie
- SCSS modules
- NASA API
- i18next
Quizzillionaire
Hra Kdo chce být milionářem s otázkami generovanými umělou inteligencí
Frontend
Quizzillionaire je online hra, která vám umožňuje hrát Kdo chce být milionářem s otázkami generovanými umělou inteligencí.
Volitelně můžete specifikovat téma a všechny generované otázky se budou točit kolem tohoto konkrétního tématu.
Poskytuje běžné tři nápovědy, které vám mohou pomoci při zodpovězení všech otázek: "Zeptat se publika", "50:50" a "Zavolat příteli".
Hlavní použité technologie
- React
- Redux Toolkit
- Tailwind CSS
Frontend je zaměřen na využití backend REST API. Převážně využívá React pro většinu úkolů a spoléhá se na Tailwind CSS pro definování vzhledu webové stránky.
Aplikace využívá knihovny Redux a Redux Toolkit pro usnadnění správy stavu. Stav je ukládán v centralizovaném úložišti, které obsahuje informace o přihlášení a stavu hry. Pro komunikaci s backend API jsou využívány asynchronní Thunky poskytované knihovnou Redux.
Ostatní technologie
- Async Thunks
- Event Source
- Server-Sent Events
Backend
Backend pro hru Quizzillionaire poskytuje REST API pro přihlášení a registraci uživatele a zároveň se stará o interní herní logiku.
Navazuje spojení mezi aplikací a databází pro trvalé ukládání dat. Kromě toho definuje rozhraní pro interakci s OpenAI ChatGPT API, které umožňuje využívat funkce generování textu pomocí umělé inteligence.
Hlavní použité technologie
- Express
- Node.js
- Sequelize
Hlavní část aplikace je napsána s využitím Express.js, které definuje REST API pro aplikaci.
Aplikace využívá databázi Postgres pro ukládání dat a k interakci s touto databází je používán Sequelize pro objektově relační mapování (ORM).
Pro vyřešení asynchronních problémů, kdy uživatel požaduje data, která ještě nebyla vygenerována, byly implementovány události odesílané ze serveru (server-sent events). Tyto události odesílané ze serveru informují uživatele, jakmile je generační proces dokončen.
Ostatní technologie
- JWT
- bcrypt
- Jest
- SQL
- Postgres
- OpenAI
- ChatGPT
Portfolio
Webová stránka, kde prezentuji některé ze svých výtvorů
Portfolio
Tato webová stránka slouží jako platforma pro zobrazení mých výtvorů a dovedností. Jejím hlavním cílem je poskytnout lidem snadný způsob, jak mě najít a kontaktovat, proto byl během jejího vytváření kladen důraz na optimalizaci pro vyhledávače (SEO) za účelem zvýšení její objevitelnosti.
Hlavní použité technologie
- Next.js
- Tailwind CSS
- Web Animations API
Hlavní technologií použitou při vývoji této webové stránky bylo Next.js. Bylo vybráno kvůli jeho schopnosti spojit serverové a klientové vykreslování a zároveň umožnit webové stránce zachovat interaktivitu React aplikace.
Serverové komponenty jsou vykresleny na serveru a odeslány jako HTML na klienta. Naopak, klientové komponenty jsou předvykresleny a poté odeslány klientovi pro hydrataci, což umožňuje zlepšenou interaktivitu.
Next.js nabízí funkce jako zpracování přesměrování, dělení kódu, generování XML sitemap a serverové vykreslování, které z něj dohromady dělají vynikající nástroj pro optimalizaci pro vyhledávače (SEO). Tyto funkce pomáhají optimalizovat výkon a strukturu webové stránky, čímž ji činí přívětivější pro vyhledávače a zlepšují její viditelnost a umístění ve výsledcích vyhledávání.
Ostatní technologie
- Prisma
- MySQL
- Server Components
- Client Components
- SEO