Skip to content

Latest commit

 

History

History
147 lines (99 loc) · 8.51 KB

README_ru.md

File metadata and controls

147 lines (99 loc) · 8.51 KB
Raw

React Logo Проект Приложение Рецептов React Logo

🌐 Português Español English Русский 中文 العربية

Предпросмотр приложения

Этот проект был разработан в модуле Front-End курса веб-разработки от Trybe. Он представляет собой приложение для рецептов, которое позволяет пользователям искать, просматривать, фильтровать, добавлять в избранное и отслеживать процесс приготовления блюд и напитков.

Приложение было разработано с использованием React с применением современных инструментов, таких как Hooks и Context API, что обеспечивает эффективное управление глобальным состоянием приложения. Дизайн приложения оптимизирован для мобильных устройств.

Приложение разработано с фокусом на мобильные устройства, с оптимизированным дизайном для экранов шириной до 375 пикселей. Для обеспечения корректного отображения интерфейса во время тестирования мы рекомендуем использовать инструменты разработчика браузера (DevTools), имитируя приложение на меньших разрешениях, например, на смартфоне. В Chrome вы можете включить Режим просмотра для мобильных устройств, нажав Ctrl + Shift + M в DevTools и установив ширину экрана на 375 пикселей.

⚙️ Функциональности
  • Поиск рецептов блюд и напитков;
  • Фильтрация рецептов по категориям;
  • Просмотр деталей рецептов, включая ингредиенты и инструкции;
  • Добавление и сохранение рецептов в избранное;
  • Отслеживание процесса приготовления рецептов;
  • Просмотр уже завершенных рецептов.

Предпросмотр приложения

Приложение использует два различных API в качестве базы данных:

  1. TheMealDB API для рецептов блюд;
  2. TheCocktailDB API для рецептов напитков.

🛠️ Использованные технологии
  • React для создания компонентов и интерфейса;
  • React Router для навигации между страницами;
  • Context API для управления глобальным состоянием;
  • Hooks для управления жизненным циклом и локальными состояниями;
  • Bootstrap для стилизации и адаптивности;
  • Docker для обеспечения переносимости и согласованности в среде разработки.

🚀 Как запустить проект

Предварительные требования

  • Установленный Node.js на вашем компьютере (версия 14 или выше);
  • Установленные Docker и Docker Compose (если вы хотите запустить проект с помощью Docker).

Клонирование репозитория

git clone https://github.com/ваш_пользователь/recipes-app.git
cd recipes-app

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

  1. Установите зависимости проекта:

    npm install

  2. Запустите сервер разработки:

    npm start

  3. Откройте приложение в браузере:

    http://localhost:3000

Запуск проекта с Docker

  1. Соберите образ Docker:

    docker build -t recipes-app .

  2. Запустите контейнер Docker:

    docker run -p 3000:3000 recipes-app

  3. Откройте приложение в браузере:

    http://localhost:3000

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

Проект организован следующим образом:

src/
  ├── components/          # Переиспользуемые компоненты
  ├── pages/               # Основные страницы приложения (Вход, Рецепты, Избранное, Профиль и т.д.)
  ├── services/            # Логика запросов к API
  ├── context/             # Настройка Context API
  ├── App.js               # Главный компонент, содержащий маршруты
  └── index.js             # Точка входа приложения

📈 Методологии и развиваемые навыки

В процессе разработки этого проекта были развиты следующие навыки:

  • Агильные методологии: Работа в команде с использованием Scrum и Trello для управления задачами и функциональностью;
  • React Routes: Реализация динамических маршрутов для навигации между различными страницами приложения;
  • Логика программирования: Разработка функциональности поиска, фильтрации и манипуляции данными;
  • Управление состоянием: Управление локальным и глобальным состоянием с помощью Hooks и Context API;
  • Создание компонентов: Разработка переиспользуемых и адаптивных компонентов для различных частей приложения.

🧪 Тесты

Тесты приложения можно выполнить с помощью команды:

npm test

🌟 Другие проекты