Frontend разработчик (React)

Это мой pet-проект

Ссылка на проект:
https://boardlord.web.app/

Репозиторий проекта на GitHub:
https://github.com/Shramkoalexander/boardlord-boardgame-store


Используемые технологии:

- HTML / CSS (SCSS, CSS modules, React Transition Group) / JavaScript
- React / Redux, reselect, saga
- Firebase
- Bootstrap (layout)


Краткое описание проекта:

Этот проект представляет из себя упрощенную версию интернет-магазина настольных игр. Это SPA. В нем реализован простой поиск, фильтрация, пагинация и сортировка товаров. Создана корзина, возможность добавления товаров в список избранных. База данных, аутентентификация, авторизация пользователей.


На примере данного проекта я продемонстрировал следующие навыки:

- Умение работать с React, использование React Hooks, создание кастомных хуков, создание собственных HOC компонентов

- Стейт менеджмент с помощью Redux, для более оптимизированной работы также использовал библиотеку reselect. Для работы с асинхронными запросами, такими как Google аутентификация, обращение к базе данных, использовал Redux-saga, с ее помощью реализовал живое взаимодействие с базой данных - при обновлении данных в базе, мой сайт мгновенно реагирует на изменения.

- В качестве базы данных использовал Firebase Firestore. В базе данных содержатся данные пользователей, содержимое корзины пользователей, список избранных товаров, а также коллекция игр магазина в общем. Создал авторизацию с помощью правил безопасности в Firestore, чтобы пользователи смогли иметь доступ только к своим товарам, причем они должны быть зарегистрированными на сайте.

- Для улучшения user experience для незарегистрированных пользователей, реализовал хранение списка покупок и избранного в браузере с помощью redux-persist, чтобы не терять их в случае, если сессия прервется

- Для стилизации сайта использовал css modules, SCSS, для анимации реакт компонентов использовал React Transition Group). Для layout сайта использовал сетку Bootstrap.

- Deployment сайта делал с помощью хостинга firebase

Это мой pet-проект

Ссылка на проект:
https://densdent-bf863.firebaseapp.com/

Репозиторий проекта на GitHub:
https://github.com/Shramkoalexander/dens-dent-stomatology


Используемые технологии:

- HTML / CSS (SCSS) / JS
- Pug (для верстки)
- Gulp / Webpack, Babel
- Yandex API
- Prettier + ESlint


Краткое описание проекта:

Этот простой проект представляет из себя главную страницу сайта стоматологии. Это статический сайт, с responsive, adaptive дизайном. На сайте есть callback модальное окно, а также форма с простой валидацией.


На примере данного проекта я продемонстрировал следующие навыки:

- Знание и умение работать с версткой. Для верстки использовал шаблонизатор Pug, чтобы создать более гибкий layout сайта, с возможностью переиспользовать отдельные компоненты

- Создание отзывчивого адаптивного дизайна. Использовал SCSS не только для вложенных селекторов, но также создал миксины, функции, создал кастомную сетку. Именовал css классы по методу BEM. Применил технологию responsive images

- Умение работать с чистым JS, используя современный синтаксис языка, без применения фреймворков

- Работа с Yandex API для создания секции контактов с картой расположения офисов компании, применил дополнительную логику, чтобы улучшить User Experience

- Для сборки проекта использовал Gulp в сочетании с Webpack, использовал Babel для транспиляции, полифилов для более хорошей поддержки старых браузеров

- Для форматирования и более консистентного кода использовал Prettier в сочетании с ESlint

- Deployment сайта делал с помощью хостинга firebase