Страничка интернет-магазина

Веб-программирование
12 просмотров
23.09.2022
1903×24512 МБ
catalog-shop.png
dulmans.github.io_catalog-shop_.png
1347×623382 КБ
basket-catalog.png

[i]Проект опубликован в мой GitHub-репозиторий: [url=https://github.com/dulmans/catalog-shop]https://github.com/dulmans/catalog-shop[/url] [/i] [b]Лёгкая и понятная страничка интернет-магазина, разработанная на Vue.js 3 (подход Composition API) с использованием TypeScript и препроцессора стилей SCSS.[/b] Каталок товаров генерируется с помощью бесплатного и публичного сервиса MockAPI.io [b]Что умеет сайт?[/b][list=1][*]Полностью адаптивные под любой размер устройства элементы;[*]Функционал корзины товаров, которая умеет: [list=1][*]Сохранять в кэше результаты предыдущих сеансов юзера;[*]Полностью очищать корзину;[*]Удалять некоторые элементы корзины;[*]Увеличивать и уменьшать кол-во опред. товара;[*]UI-отображение товара, которого уже нет в наличии;[*]Подсчёт полной суммы товаров и их количество в корзине.[/list][*]Слайдер-баннер, который был написан на продвинутом и современном плагине Swiper;[*]Сортировка и фильтрация элементов каталога, выполненная с помощью Vue-хука computed (аналог React-хука useMemo);[*]Полноценное отображение карточки товара в каталоге, которая отображает всю необходимую информацию о товаре (в т.ч. категории товаров).[/list] [b]Какие технологии были использованы? [/b][list][*][i]TypeScript ( 4.5.5)[/i] : типизация JS-кода; SASS ( 1.32.7) : написание CSS-стилей сайта;[*][i]Vue ( 3.2.13)[/i] : основной функционал сайта;[*][i]Axios ( 0.27.2)[/i] : GET-запросы к API;[*][i]Swiper ( 8.3.2)[/i] : функционал слайдера для отображения баннера.[/list]
CSSJavaScriptSASSSCSSTypeScriptVue.js