Rick and Morty (React + Vite)

Это React-приложение на базе Vite, позволяющее искать персонажей из Rick and Morty API по имени, просматривать информацию о них и переключаться между страницами с помощью пагинации.

---

Что реализовано

Компоненты

App

• Основной компонент приложения.
• Хранит состояния:
  • query — строка поиска;
  • characters — массив найденных персонажей;
  • page — текущая страница;
  • totalPages — общее количество страниц.

SearchBar

• Отдельный компонент для поля поиска и кнопки Search.
• Поддерживает:
  • ввод текста;
  • обновление состояния query;
  • нажатие клавиши Enter или кнопки для запуска поиска.

CharacterCard

• Отображает карточку персонажа с:
  • именем;
  • изображением;
  • видом (species);
  • статусом;
  • последним местоположением (location).

---

Поиск

• Происходит по имени персонажа (name=...) через API.
• Реализован debounce: запрос отправляется через 400 мс после прекращения ввода.
• Поиск чувствителен к опечаткам, но регистр не имеет значения.
• При изменении query обнуляется страница (page).

---

Пагинация

• Используются кнопки Prev и Next.
• При переключении:
  • обновляется параметр page в URL;
  • делается новый запрос к API;
  • кнопки отключаются на первой и последней страницах.
• Всего страниц — totalPages, полученные из data.info.pages.

---

Логика загрузки

const url = \`https://rickandmortyapi.com/api/character?\${search ? \`name=\${search}&\` : ''}page=\${page}\`;

• Формирует правильный URL с учётом:
  • name (если задан search);
  • page (всегда присутствует);
• Используется fetch() с .then() для получения и обработки данных.

---

Обработка ошибок

• Если API возвращает ошибку (data.error):
  • очищается список персонажей (setCharacters([]));
  • обнуляется общее количество страниц (setTotalPages(1)).

---

Стилизация

Основные моменты:

• Используется шрифт Montserrat через Google Fonts.
• .card-list реализует адаптивную сетку карточек.
• .character-card:hover даёт лёгкое поднятие и тень.
• .pagination оформлена с кнопками и счётчиком страниц.
• Строгая цветовая палитра: зелёные кнопки, оранжевые метки, белый фон.

---

Установка и запуск

# Установить зависимости
npm install

# Запустить проект в режиме разработки
npm run dev

# Собрать продакшн-версию
npm run build

Источник данных

Используется открытый REST API: https://rickandmortyapi.com/api/character

---

Технологии

• React + Vite
• React Hooks (useState, useEffect)
• Fetch API
• CSS Flexbox
• Google Fonts (Montserrat)