Jin store project

Наш проект — это eCommerce-приложение для онлайн-продажи продуктов питания и товаров для беременных и малышей. Пользователь может зарегистрироваться, выбрать нужные товары, оформить заказ и управлять своим профилем.

Командная координация

  • Для эффективного управления рабочим процессом и координации внутри команды мы использовали платформу для управления проектами Jira.
  • Проект был разбит на спринты, каждый из которых охватывал определённый блок функционала eCommerce-приложения.
  • Jira использовалась для отслеживания статусов и удобного визуального контроля прогресса.

Это нам позволило:

  • Визуализировать прогресс выполнения задач с помощью Kanban-доски
  • Контролировать загруженность участников и своевременно перераспределять задачи
  • Обеспечить прозрачность на всех этапах — от постановки до завершения задачи

Коммуникация внутри команды

Командное взаимодействие включало как живое общение в формате созвонов, так и постоянную переписку в Telegram.

На старте каждого спринта проводился групповой созвон с ментором, на котором обсуждались задачи, ментор давал рекомендации, как лучше распределить задачи и на что обратить внимание. Каждый участник говорил, какая задача была бы ему интересна, таким образом происходило добровольное распределение в зависимости от интересов и опыта участников.

Каждый участник был ответственен за свои задачи, но также помогал другим при необходимости.

Мы старались писать код так, чтобы он был понятен всем участникам команды:

  • Давали переменным и функциям осмысленные и читаемые названия, чтобы сразу было ясно, за что они отвечают
  • Стремились к переиспользованию функций

Благодаря регулярным созвонам, активной переписке в Telegram и понятному процессу распределения задач, мы избежали дублирования, быстро устраняли проблемы и поддерживали стабильный темп работы.

Например, при выборе дизайна проекта мы вместе просмотрели большое количество макетов в Figma, обсудили плюсы и минусы каждого варианта и пришли к единому решению, которое устроило всю команду. Благодаря учёту мнения каждого, нам удалось выбрать удачный дизайн, который органично вписался в архитектуру проекта и не потребовал много доработок в дальнейшем.

Основные моменты вклада команды

Любовь Пономарева была тимлидом команды. Она следила за прогрессом выполнения задач, организовывала рабочие созвоны и контролировала соблюдение сроков.

Отвечала за деплой проекта, cабмитила проект на проверку, вела коммуникацию с проверяющими студентами

Кроме того, Любовь:

  • Настроила репозиторий, окружение, линтеры и скрипты для сборки и проверки кода;
  • Настроила взаимодействие с API CommerceTools для обработки авторизации и регистрации пользователей;
  • Создала страницу профиля пользователя с редактированием и управлением адресами;
  • Разработала страницу корзины: отображение товаров, их количества, цен;
  • Добавила возможность ввода и отображения промокода со скидкой;
  • Настроила перерасчёт итоговой стоимости с учётом изменений.

Любовь выступала в роли тимлида, координировала работу команды, обеспечивала техническую основу проекта и активно участвовала в реализации сложной логики. Её вклад обеспечил стабильность, структурированность и своевременное завершение проекта.

Светлана:

  • Сверстала формы логина и регистрации и настроила валидацию;
  • Создала макеты главной страницы и страницы товара;
  • Реализовала слайдер изображений и модальное окно с увеличением;
  • Загрузила описания и изображения товаров в CommerceTools;
  • Реализовала функциональность добавления и удаления товаров из корзины на странице продукта;
  • Оформила страницу «О нас» с представлением команды.

Светлана обеспечила визуальную часть приложения, создала удобные и понятные формы, реализовала детальную страницу товара и оформила командную страницу. Благодаря её работе интерфейс проекта стал аккуратным и интуитивно понятным.

Маргарита:

  • Создала проект в CommerceTools и настроила API-клиент;
  • Настроила роутинг и страницу 404;
  • Разработала интерактивные карточки товаров с возможностью добавления в корзину;
  • Реализовала каталог: вывод списка товаров, фильтрацию, сортировку и поиск;
  • Настроила навигацию по категориям и оптимизировала загрузку;
  • Добавила отображение количества товаров в корзине

Маргарита реализовала всю логику каталога и взаимодействие с товарами. Её работа позволила пользователям удобно находить, фильтровать и добавлять продукты в корзину, сделав функциональность магазина полноценной.

Технический стек и организация работы с GitHub

Для отслеживания командной активности мы использовали встроенные инструменты GitHub:

Вкладка Insights → Contributors отразила вклад каждого участника: количество коммитов, строки кода, частоту обновлений.

В рамках проекта мы придерживались подхода Git Flow: ветка develop использовалась для основной разработки, release — для подготовки к спринтам, а feat-ветки — для реализации отдельных задач.

Изменения проходили через Pull Request'ы

Пример Pull Request

Pull Request от Светланы:

https://github.com/litelp/eCommerce-Application/pull/3

Реализация валидации форм на страницах входа и регистрации, а также добавление навигации на главной странице.

Что было реализовано:

  • Валидация полей email и пароля на странице входа;
  • Полная валидация всех полей на странице регистрации;
  • Появление понятных сообщений об ошибках

Любовь оставила комментарий в рамках Code Review, указав, что функция hideErrorMessage() не обрабатывает все поля ввода. Она порекомендовала объединить все части проекта и протестировать его локально в браузере, чтобы убедиться в корректности работы валидации и выявить ошибки отображения.

Действия после ревью:

Светлана проверила проект локально, убедилась в наличии ошибки, внесла необходимые исправления и сделала новый коммит.

Результат:

Pull Request был принят, а логика отображения ошибок — доработана.

Оставленный комментарий к PR помог улучшить функциональность и повысить надёжность интерфейса.

Документация README

Любовь подготовила файл README.md, который нам помог:

  • Быстро настроить локальное окружение;
  • Запустить сборку, линтинг, форматирование и тесты через понятные скрипты.

Технологический стек

Проект построен на современном и надёжном стеке технологий, обеспечивающем стабильную разработку и высокое качество кода.

Основные технологии:

  • TypeScript — строгая типизация, улучшенная читаемость и устойчивость к ошибкам;
  • Webpack использовался для сборки проекта и настройки окружения;
  • Jest — модульное тестирование функций и компонентов;
  • CommerceTools — eCommerce-платформа: управление товарами, пользователями и корзиной через API.

Инструменты качества кода:

  • ESLint — выявление ошибок и соблюдение стиля кода;
  • Prettier — автоматическое форматирование;
  • Stylelint — проверка стилей;
  • Husky + lint-staged — запуск проверок при коммитах

Дополнительные инструменты:

  • Jira — планирование, распределение задач и контроль спринтов;
  • GitHub — система контроля версий и проведение code review через Pull Request;
  • Figma — дизайна интерфейса приложения

Thank you for your attention