React Cards Terms

Ссылка на проект

❗❗❗ ВАЖНО ❗❗❗

Имеется задержка первоначальной загрузки, т.к. проект для симуляции бэкэнда использует json-server и он был размещен на render.com

Описание

React Cards Terms — это учебный CRUD проект на React, представляющий собой интерактивное приложение для изучения и повторения терминов по React. Пользователь может просматривать карточки с вопросами и ответами, фильтровать, сортировать, добавлять новые карточки, редактировать и отмечать их как изученные.

Основной функционал

• Просмотр карточек: список вопросов с краткими ответами, уровнем сложности и статусом "изучено/не изучено".
• Пагинация: переход по страницам с карточками, выбор количества карточек на странице.
• Сортировка: по уровню сложности и статусу "изучено".
• Поиск: фильтрация карточек по ключевым словам.
• Добавление карточек: форма для создания новых вопросов.
• Редактирование карточек: возможность изменить существующую карточку.
• Отметка "изучено": чекбокс для пометки карточки как изученной.
• Аутентификация: позволяющая получить доступ к редактированию карточки только для авторизованных пользователей (кнопка Login/Logout).
• Смена цветовой темы: возможность переключения dark/light темы.

Технологии и библиотеки

• React — основной фреймворк для построения интерфейса.
• React Router — маршрутизация между страницами.
• CSS-модули — стилизация компонентов.
• React Toastify — всплывающие уведомления.
• json-server — фейковый REST API для хранения карточек (локально и на Render).
• Custom hooks — собственные хуки для работы с асинхронными запросами и авторизацией.
• useEffect, useState, useRef, useId, useContext — хуки React для управления состоянием и оптимизацией.
• useMemo, memo, lazy loading — использование мемоизации.
• useActionState — новый хук из v19 для отправки формы.
• Loader/SmallLoader — компоненты для отображения загрузки.

Структура проекта

• /src/components — переиспользуемые UI-компоненты (карточки, списки, кнопки, бейджи, инпуты и т.д.).
• /src/pages — страницы приложения (главная, добавление, просмотр, редактирование карточки).
• /src/hooks — кастомные хуки (например, useFetch, useAuth).
• /src/helpers — вспомогательные функции (например, delayFn).
• /src/constants — константы (например, API_URL).
• /src/theme — темы и переменные для стилизации.
• /src/auth — логика аутентификации (если реализована).
• /src/assets — статические ресурсы (иконки, изображения и т.д.).

Как работает

1. Главная страница — отображает список карточек с пагинацией, поиском и сортировкой.
2. Добавление карточки — форма для создания новой карточки, отправка POST-запроса на сервер.
3. Просмотр карточки — подробная информация, возможность отметить как изученную.
4. Редактирование карточки — форма для изменения существующей карточки (только для авторизованных).
5. API — все данные хранятся на json-server (локально или на Render), поддерживаются методы GET, POST, PATCH.

Запуск проекта (локально)

1. Установить зависимости:

   npm install
   

2. Запустить локальный сервер (json-server):

   npx json-server --watch db.json --port 3001
   

3. Запустить React-приложение:

   npm run dev
   

4. Открыть в браузере: http://localhost:5173 (или другой порт, если указан).

Примечания

• Для работы с удалённым сервером (Render) в файле src/constants/API_URL.js должен быть указан актуальный адрес API.
• Если сервер не поддерживает параметры _per_page, используйте _limit (см. документацию json-server).
• Проект предназначен для учебных целей, легко расширяется под любые коллекции карточек.

---