Card Hub is a Single Page Application (SPA) built with React, Redux Toolkit, and Tailwind CSS. The application fetches and displays images from the Pexels API, allowing users to like and remove cards with the liked state persisted in local storage.
- Dynamic Card Display: Fetch and display cards with images from the Pexels API.
- Like and Remove Cards: Users can like or remove cards, and the liked state is persisted in local storage.
- Filter Liked Cards: Toggle between showing all cards and only liked cards.
- Responsive Design: The layout is responsive, ensuring a good user experience on different devices.
- Sticky Footer: The footer remains at the bottom of the page.
- React: Used to build the user interface with reusable components.
- Redux Toolkit: Manages the state of liked cards and filter settings.
- Tailwind CSS: Provides utility-first CSS classes for styling the application.
- React Icons: Includes popular icons for like and delete buttons.
- React Spinners: Displays loading spinners during data fetching.
- TypeScript: Used for type checking and enhancing the development experience.
- Local Storage: Persists the liked state of cards across page reloads.
- Start the development server:
yarn start - Build the application:
yarn build - Lint the code:
yarn lint - Format the code:
yarn format
This project is licensed under the MIT License.
Card Hub - это одностраничное приложение (SPA), построенное с использованием React, Redux Toolkit и Tailwind CSS. Приложение загружает и отображает изображения из API Pexels, позволяя пользователям ставить лайки и удалять карточки, при этом состояние лайков сохраняется в локальном хранилище.
- Динамическое отображение карточек: Получение и отображение карточек с изображениями из API Pexels.
- Лайк и удаление карточек: Пользователи могут ставить лайки или удалять карточки, и состояние лайков сохраняется в локальном хранилище.
- Фильтрация лайкнутых карточек: Переключение между отображением всех карточек и только лайкнутых.
- Адаптивный дизайн: Макет адаптируется, обеспечивая хороший пользовательский опыт на разных устройствах.
- Фиксированный футер: Футер остается внизу страницы.
- React: Используется для построения пользовательского интерфейса с повторно используемыми компонентами.
- Redux Toolkit: Управляет состоянием лайкнутых карточек и настроек фильтрации.
- Tailwind CSS: Предоставляет утилитарные CSS-классы для стилизации приложения.
- React Icons: Включает популярные иконки для кнопок лайков и удаления.
- React Spinners: Отображает спиннеры загрузки во время получения данных.
- TypeScript: Используется для проверки типов и улучшения опыта разработки.
- Local Storage: Сохраняет состояние лайкнутых карточек при перезагрузке страницы.
- Запуск сервера разработки:
yarn start - Сборка приложения:
yarn build - Проверка кода с помощью линтера:
yarn lint - Форматирование кода:
yarn format
Этот проект лицензирован под лицензией MIT.