Перейти к содержимому
Сергей Артамонов
  • Frontend

Web-Larёk

Интернет-магазин сувениров для разработчиков: каталог, корзина и двухшаговое оформление заказа.

  • TypeScript
  • Vite
  • SCSS
  • HTML
  • BEM

Задача и назначение

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

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

  • Каталог с категориями, цветными бейджами, картинками и ценами
  • Корзина: счётчик в шапке, сумма заказа и удаление позиций
  • Двухшаговое оформление: способ оплаты и адрес, затем почта и телефон
  • Заказ уходит на сервер, товары без цены помечены как бесценные и недоступны для покупки

Особенности реализации

Слои разделены по MVP: модели каталога, корзины и покупателя хранят состояние и шлют события, представления рисуют HTML-шаблоны, а презентер в точке входа только связывает их через EventEmitter. Карточки каталога, превью и корзины наследуют общий класс Card. Формы проверяют оплату, адрес, почту и телефон до отправки заказа на REST API.

Результат

Работающий магазин с каталогом, корзиной и оформлением заказа: от выбора товара до подтверждения на сервере.