Harry Potter: енциклопедія чарівного світу
Моя роль. FrontEnd Developer
Hogwarts Explorer — динамічний вебзастосунок для фанатів Harry Potter. API-енциклопедія персонажів із фільтрами за факультетами, пошуком і детальними сторінками. Чистий JavaScript, модульний SCSS і ефективна робота з даними.
PagesJavaScriptHTMLSCSSREST API
Огляд проєкту та стек
Завдання
Зробити швидку й атмосферну базу персонажів у стилі всесвіту Harry Potter. Виклик — великі дані з зовнішнього API без втрати продуктивності та чистоти коду.
Ключові вимоги:
- Пошук і фільтрація (за факультетом).
- Multi-page структура з динамічним роутингом деталей персонажа.
- Високий рівень UI/UX на advanced SCSS.
Прев'ю інтерфейсу
Основні екрани та ключові UI-флоу продукту.
Інтерфейс і ключові фічі
Результат
Я зробив якісний FrontEnd застосунок із фокусом на продуктивність і підтримуваність:
- Динамічний рендер: кастомний движок на Vanilla JS для даних з HP-API.
- Масштабовані стилі: модульний SCSS і консистентні UI-компоненти.
- Інтерактивність: миттєва фільтрація без перезавантаження сторінки.
- Адаптивність: mobile-first дизайн для будь-яких екранів.
Подивитись наживо
Відкрийте задеплоєний проєкт і дослідіть повний досвід.