Проект: Место

Обзор

• Figma
• Описание
• GH-Pages

Figma

• Ссылка на макет в Figma

Описание

Проект сайта для размещения карточек с местами. Реализован на "чистых" html, css, js. В вёрстке используются grid-сетки, медиазапросы, относительные размеры для адаптивности. Картинки оптимизированы в "Tiny png" для быстрой загрузки. Разметка реализована с использованием PixelPerfect по макету из Figma. Код в js оранизован по принципам ООП, разбит на классы. Настроена сборка с Webpack, установлены PostCss с autoprefixer и cssnano, babel. Настроено взаимодействие с серверной частью через собственный Api.

Функционал js включает в себя:

1. Возможность редактирования профиля (текст имени, профессии/деятельности, аватара);
2. Добавление, удаление карточек с изображениями (удалять можно только свои посты);
3. Просмотр (открытие) изображения для карточки;
4. Лайки на карточках;
5. Валидация всех форм на странице в реальном времени;
6. Дополнительные UX улучшения - отображение процесса загрузки при запросах на сервер, закрытие модальных окон на ESC, оверлей.

• Ссылка на проект в GitHub Pages