🔸 Интерактивный сайт "Mesto" (фронтенд + бекенд)
Проектная работа на курсе в Яндекс Практикум
Портировано на React.js с 🔗 предыдущего проекта
Mesto - это сервис, который позволяет пользователю загружать фотографии с описанием и получать обратную связь в виде лайков.
Сайт является адаптивно-отзывчивым. Адаптирован под экраны с шириной 320 и 1280 пикселей,
но великолепно смотрится на всех разрешениях! 😃
В данном проекте используется методология БЭМ для файловой структуры и классов. Присутствуют элементы Grid Layout, Flexbox и медиазапросы.
Интерактив:
Пользователь может изменять имя, информацию о себе и аватар, добавлять и удалять свои изображения и описанием и просматривать полномасштабные изображения - все это реализовано в виде pop-up-окон, в том числе формы. Присутствует функция "живой" валидации форм для более комфортного взаимодействия пользователем с интерфейсом. В коде используются принципы функционального и объектно-ориентированного программирования.
Было настроено взаимодействие с сервером с помощью API - данные о пользователе и карточки можно загружать на сервер. Также присутствует счетчик лайков.
В последней версии проекта появилась возможность регистрации и авторизации пользователей, а также сохранение токена в Local Storage браузера для того, чтобы пользователь оставался авторизованным после перезагрузки страницы.
Frontend приложения распологается в папке /frontend соответственно.
Серверная часть приложения написана с помощью Node.js. Располагается в папке /backend. В качетсве базы данных используется MongoDB. Также задействованы менеджер процессов pm2 и HTTP-сервер nginx. Проработаны ответы на запросы с соответствующими статусами и сообщениями.
Используемые языки:
- ✔️ HTML5
- ✔️ CSS3 (Препроцессор SCSS)
- ✔️ JavaScript ES6 (Библиотека React.js)
- ✔️ Node.js
Для входа на главную страницу необходимо зарегистрироваться или ввести данные существующей учетной записи:
Почта: [email protected]
Пароль: kkkk
Другие версии проекта:
🔗 Mesto [Vanilla JS, ООП, без авторизации]
🔗 Mesto [React JS, без авторизации]
IP 84.201.165.2
Frontend https://mesto-project.website/
Backend https://api.mesto-project.website/