Учебный макет для начинающих
Всем привет! В рамках текущего обучающего проекта по персональному менторству буду периодически публиковать посты с учебными задачами различного уровня сложности. Моя цель - предоставить вам возможность попрактиковаться в выполнении задач, максимально приближенных к реальной работе фронтендера, после выполнения которых, напоминаю, вы можете запросить от меня код-ревью, чтобы определить в ваших навыках разработчика слабые места, которые следует проработать.
Материал буду стараться отбирать качественный, но если будут присутствовать недочеты (кривой слой в макете, разные отступы у одинаковых элементов, некорректно выгружаемая иконка, внезапно переставшее работать API), то прошу отнестись с пониманием, т. к. всю информацию, в частности макеты, я беру из публичного доступа, дизайнеры бывают ошибаются, а найти идеально выполненный макет очень сложно, потому прошу критически оценивать каждую проблему, если с подобным столкнётесь.
Начнём с простого - макет лендинга доставки еды на 7 секций:
Начальное ТЗ максимально простое: сверстать десктопную версию сайта по макету.
Возможные улучшения (в порядке увеличения сложности):
- адаптивная мобильная версия;
- реализация компонента 'BurgerButton' и 'MobileOverlay' (меню навигации в шапке, открывающееся по клику на бургер-кнопку в шапке, которая появляется на узких экранах устройств);
- реализация компонента слайдера в секции 'Category' (советую делать через https://swiperjs.com/);
- реализация компонента 'QuickSearch' в шапке (при нажатии на кнопку с иконкой лупы раскрывается поле ввода для поисковых запросов, при вводе значения отправляется фиктивный запрос на URL какого-нибудь публичного или локального JSON-файла, например https://jsonplaceholder.typicode.com/todos, затем под полем ввода рендерится список результатов со ссылками);
- реализация компонента 'BasketPanel' и функционала добавления товаров в корзину (при нажатии на кнопки 'Add to Cart' соответствующий товар добавляется в корзину, при нажатии на кнопку с иконкой корзины в шапке открывается небольшое меню со списком добавленных товаров и ссылкой 'To basket');
- переписать всю JS-логику вышеупомянутых компонентов в стиле ООП;
- применить к проекту средства автоматизации, например, сборщик проектов Vite или WebPack (в крайнем случае - таск-раннер Gulp) и добавить пару плагинов, например, пост-процессор стилей PostCSS (или пре-процессор SASS), шаблонизатор разметки, линтер ESLint, плагин для работы с SVG-иконками через спрайты;
- реализовать проект на React'e (через CRA или лучше через https://vitejs.dev/guide/#scaffolding-your-first-vite-project и темплейт react), а состояние корзины хранить в react context API или в redux-toolkit;
- добавить типизацию TypeScript.
