Интернет-магазин

Задачи:

• Создание приложения, всеми основными функциями которого можно пользоваться: навигация по экранам, загрузка элементов каталога, выбор категории каталога, поиск товара, добавление товаров в корзину, оформление заказа

• По умолчанию поисковое поле скрыто, отображается только иконка поиска в шапке, при первом клике по иконке открывается строка поиска, при втором - если был введён текст, то перенаправляет пользователя на страницу каталога, с последующим поисковым запросом на сервер (с учетом выбранной категории каталога), если текст не был введен - сворачивает строку поиска
• При нажатии на кнопку "Загрузить ещё", в каталоге или на главной странице, данные перезагружаются с учётом строки поиска и выбранной категории каталога
• Страница товара открывается при нажатии кнопок "Заказать" в карточках товаров
• На странице товара кнопка "В корзину" активируется только тогда, когда есть размеры в наличии и выбран конкретный размер, после нажатия на кнопку "В корзину" пользователь перемещается в страницу корзины
• Товары, находящиеся в корзине, хранятся локально в localStorage, после успешного оформления заказа все данные корзины должны быть удалены из state и из localStorage
• Виджет корзины в шапке отображает количество позиций в корзине
• При вводе несуществующего URL, пользователю должна показываться "страница 404"

Технологии:

Html, CSS/Bootstrap, JS, React, React-router, RTK, Web Storage API, Node.js, Koa.js, Fetch API, Yarn, Appveyor, GitHub Pages, Heroku

Репозиторий: https://github.com/Antis85/lad-project
Ссылка на страницу: https://antis85.github.io/lad-project

Приложение-органайзер

Задачи:

• Разработать приложение-органайзер, предназначенное для хранения информации, поиска, и других сервисов: напоминания, уведомление и интеграция с внешними сервисами, в качестве примеров для реализации взять за основу функциональность Telegram, WhatsApp, Viber, Slack и т.д.
• Обязательные для реализации функции:

1. Сохранение в истории ссылок и текстовых сообщений, ссылки должны быть кликабельны и отображаться как ссылки;

2. Сохранение в истории изображений, видео и аудио (как файлов) - через Drag & Drop и через кнопку загрузки, скачивание файлов на компьютер пользователя;

3. Ленивая подгрузка: сначала подгружаются последние 10 сообщений, при прокрутке вверх подгружаются следующие 10 и т.д;

• Дополнительно реализованная функциональность:

1. Синхронизация - если приложение открыто в нескольких окнах (вкладках), то контент должен быть синхронизирован;

2. Запись видео и аудио (используя API браузера);

3. Воспроизведение видео/аудио (используя API браузера);

4. Отправка геолокации;

5. Закрепление (pin) сообщений, закреплять можно только одно сообщение (прикрепляется к верхней части страницы):

• Инфраструктура проекта на Npm/Yarn, Webpack, Babel, ESLint, Appveyor
• Бэкенд на Node.js + Heroku
• Публикация на GitHub Pages

Технологии:

Html, CSS, JS, Node.js, Koa.js, Fetch API, Websocket API, MediaStream Recording API, Navigator Web API, Yarn, Webpack, Webpack DevServer, Babel, ESLint, Appveyor, GitHub Pages, Heroku

Репозиторий: https://github.com/Antis85/ahj-chaos-organizer

Ссылка на страницу: https://antis85.github.io/ahj-chaos-organizer

Браузерная игра

Задачи:

• Доработать пошаговую игру с уже созданными UI и базовыми классами
• Перевести работу проекта на Npm, Babel, Webpack, ESLint, Jest
• Дописать оставшуюся функциональность, в соответствии с механикой игры
• Разработать автотесты
• Публикация на GitHub Pages

Технологии:

Html, CSS, JS, ООП, Web Storage API, Unit-testing, Npm, Webpack, Webpack DevServer, Babel, ESLint, Jest, Appveyor, GitHub Pages

Репозиторий: https://github.com/Antis85/retro-game

Ссылка на страницу: https://antis85.github.io/retro-game

Верстка статичного макета

Задачи:

Сверстать макет сайта, Верстка:

• семантичная,
• валидная,
• кроссбраузерная,
• pixelperfect,
• сетка flexbox,
• без сторонних технологий (пре/постпроцессоры, БЭМ, OOCSS, SMACSS, normalize.css, reset.css, bootstrap, autoprefixer и т.д.)

Публикация на GitHub Pages

Макет:

Технологии:

HTML, CSS

Ссылка на страницу: https://antis85.github.io/noemi_diplom

Верстка адаптивного макета

Задачи:

Сверстать макет сайта для трех групп устройств - десктопные экраны, планшеты и смартфоны, Верстка:

• семантичная,
• валидная,
• кроссбраузерная,
• pixelperfect,
• сетка flexbox,
• без сторонних технологий (пре/постпроцессоры, БЭМ, OOCSS, SMACSS, normalize.css, reset.css, bootstrap, autoprefixer и т.д.),
• отображения страницы в промежуточных состояниях 320px-768px-1920px реализовываются с помощью резиновой верстки

Публикация на GitHub Pages

Макеты:

Технологии:

HTML, CSS

Ссылка на страницу: https://antis85.github.io/surface_diplom