Тестовое задание для idaproject

Тестовое задание для Idaproject

• Описание задания
• Макет (figma)

Задание было выполнено без использования Vue.js

Скрипты:

Development

Для запуска проекта на локальной машине:

gh repo clone GeoGeorgeous/idaproject
npm install
npm run dev

После клонирования и установки зависимостей проект будет доступен на http://localhost:8080/

Production

Чтобы создать production сборку:

npm run build

Deploy

Проект задеплоен на GitHub Pages Для деплоя использованы скрипты predeploy и deploy

Сборка:

• Сборщик: Webpack 5
• Транспиляция JS: Babel
• HTML: HtmlWebpackPlugin
• CSS: PostCSS, autoprefixer (вендорные префиксы), cssnano (минификация), css-loader, mini-css-extract-plugin
• Очистка: CleanWebPackPlugin

Файловая структура

• Так как проект был выполнен без использования React/Vue, то CSS стили хранятся в папке blocks используя методологию nested;
• В папке components хранятся ООП компоненты: Section (рендер и сортировка товаров), Product (карточка с товаром), FormValidator (live валидация формы), Notification (всплывающие уведомления);
• images для изображений;
• В pages — используемые страницы, в проекте она одна.
• utils — константы и предзагруженные товары;
• vendor — материалы сторонних разработчиков: шрифт SourceSansPro и normalize.css