Movie Search App
React + TypeScript застосунок для пошуку фільмів через зовнішній #API, з дебаунсом пошуку, пагінацією результатів, деталізованими сторінками фільмів, станами завантаження та помилок, адаптивним UI
Функції проєкту:
Пошук фільмів
Користувачі можуть шукати фільми за допомогою зручного та інтуїтивно зрозумілого інтерфейсу пошуку.
Перевірка введених даних забезпечує змістовні пошукові запити з чіткими повідомленнями про помилки для порожніх або недійсних введених даних.
Відображення фільмів
Фільми відображаються в адаптивній сітці з постерами та назвами.
Натискання на постер відкриває модальне вікно з детальною інформацією про фільм.
Плавний користувацький досвід з акцентом на зручність використання та доступність.
Пагінація
Підтримує перегляд кількох сторінок результатів пошуку.
Пагінація відображається лише тоді, коли доступно більше однієї сторінки результатів.
Користувачі можуть легко переміщатися між сторінками, зберігаючи контекст пошуку.
Отримання даних та керування станом
Ефективно отримує дані фільмів та зберігає їх для швидкого доступу.
Безперешкодно обробляє стани завантаження, стани помилок та кешовані дані.
Стан програми добре структурований та безпечний за типом.
Користувацький досвід
Індикатори завантаження та повідомлення про помилки надають користувачам чіткий зворотний зв'язок.
Модальні вікна можна закривати за допомогою кількох взаємодій (клацання за межами, натискання Escape або використання кнопки закриття).
Чистий та організований інтерфейс для плавного та інтуїтивно зрозумілого досвіду.
Безпека типів
Усі структури даних та властивості компонентів суворо типізовані.
Забезпечує послідовну та передбачувану поведінку в усьому застосунку.
Стилізація
Модульні, багаторазові стилі для ізоляції та зручності обслуговування компонентів.
Адаптивний макет та доступний дизайн для різних пристроїв та розмірів екранів.
Використані технології
Фронтенд: #React, #Vite, #TypeScript
Вибір стану та даних: #TanStack Query, React state
#HTTP-запити: #Axios
#Пагінація: React Paginate
#UI/UX: #CSS модулі, #modern-normalize, #react-hot-toast
Розгортання: #Vercel
Функції проєкту:
Пошук фільмів
Користувачі можуть шукати фільми за допомогою зручного та інтуїтивно зрозумілого інтерфейсу пошуку.
Перевірка введених даних забезпечує змістовні пошукові запити з чіткими повідомленнями про помилки для порожніх або недійсних введених даних.
Відображення фільмів
Фільми відображаються в адаптивній сітці з постерами та назвами.
Натискання на постер відкриває модальне вікно з детальною інформацією про фільм.
Плавний користувацький досвід з акцентом на зручність використання та доступність.
Пагінація
Підтримує перегляд кількох сторінок результатів пошуку.
Пагінація відображається лише тоді, коли доступно більше однієї сторінки результатів.
Користувачі можуть легко переміщатися між сторінками, зберігаючи контекст пошуку.
Отримання даних та керування станом
Ефективно отримує дані фільмів та зберігає їх для швидкого доступу.
Безперешкодно обробляє стани завантаження, стани помилок та кешовані дані.
Стан програми добре структурований та безпечний за типом.
Користувацький досвід
Індикатори завантаження та повідомлення про помилки надають користувачам чіткий зворотний зв'язок.
Модальні вікна можна закривати за допомогою кількох взаємодій (клацання за межами, натискання Escape або використання кнопки закриття).
Чистий та організований інтерфейс для плавного та інтуїтивно зрозумілого досвіду.
Безпека типів
Усі структури даних та властивості компонентів суворо типізовані.
Забезпечує послідовну та передбачувану поведінку в усьому застосунку.
Стилізація
Модульні, багаторазові стилі для ізоляції та зручності обслуговування компонентів.
Адаптивний макет та доступний дизайн для різних пристроїв та розмірів екранів.
Використані технології
Фронтенд: #React, #Vite, #TypeScript
Вибір стану та даних: #TanStack Query, React state
#HTTP-запити: #Axios
#Пагінація: React Paginate
#UI/UX: #CSS модулі, #modern-normalize, #react-hot-toast
Розгортання: #Vercel
Київ 
Вільний для роботи