Проект 4: MESTO-REACT

С возможностью авторизаций

Обзор

• О чем проект?
• Что использовалось при созданий проекта?
• Update project (обновления проекта)
• Спасибо!

Проект доступен по ссылке - Mesto

О чем проект? Данный проект создан для познавательной информации. Позже он будет становиться лучше и лучше.

Проект ориентирован на познавательный контент.

Что использовалось при созданий проекта?

• Использовались следующий технологий при созданий проекта:

1. BEM – это методология, разработанная в яндексе, расшифровывается, как: Блок*элементмодификатор.

2. Grid — это набор горизонтальных и вертикальных «линий», которые пересекаются между собой и создают сетку из рядов и колонок.

3. Хранение древовидных структур в Базах данных (Nested)

4. Медиа-запросы — это функция CSS, которая позволяет содержимому веб-страницы адаптироваться к разным размерам экрана и разрешениям.

5. CSS flexbox (Flexible Box Layout Module) — модуль макета гибкого контейнера — представляет собой способ компоновки элементов, в основе лежит идея оси. и другие технологий.

6. JavaScript — это язык программирования, позволяющий создавать скрипты, которые встраиваются в HTML-страницы и выполняются в браузере посетителя страницы.

7. Валидация форм — процесс проверки данных, введенных пользователем в объект, требующий от пользователя предоставить информацию о себе (это может форма он-лайн оплаты, форма регистрации и т.д.). Уверен, что из определения вполне ясно, почему валидация важна.

8. Добавили возможность закрытие окон по нажатию на кнопку "escape" и "клику" в область темного фона. Посмотреть видео по тому как работает закрытие по "клику" вы можете по ссылке --> Открыть видео

9. Подключили «Вебпак» — самый популярный и гибкий инструмент, а потому и самый универсальный. Плюсы «Вебпака»:

• JavaScript-код, написанный по новой спецификации, переделывается в точно такой же, но написанный по старой. Это позволяет пользоваться всеми самыми современными инструментами языка и не беспокоиться о поддержке сайта старыми браузерами.

• JavaScript и CSS минифицируются. Это значит, что внутри файла удаляются все пробелы, переносы строк и комментарии: браузеру они не нужны, а файл с кодом становится короче и оттого — легче. Более лёгкий файл быстрее загрузится.

• Вендорные префиксы тоже проставляются автоматически. Так что за поддержку css-кода старыми браузерами тоже можно не волноваться.

10. Добавьте в проект классы Section, Popup, PopupWithForm, PopupWithImage и UserInfo. Каждый из них выполняет строго одну задачу. Всё, что относится к решению этой задачи, находится внутри класса.

11. Все классы вынесены в отдельные файлы для быстрой работы сайта и удобства обслуживания.

Update Зачем обновлять дизайн и функционал сайта?

1. Первые впечатления важны Поскольку многие посетители оценивают ваш веб-сайт за несколько секунд, критически важно иметь профессиональную, привлекательную и увлекательную графику.

2. Ваши потенциальные клиенты делают покупки для сравнения Побеждает компания с самым привлекательным веб-сайтом, предлагающая лучшие ресурсы и информацию.

3. Обновленные веб-технологии Точно так же старые системы корзины покупок также очень уязвимы для хакеров, если они не обслуживаются разработчиками.

4. Он не подходит для мобильных устройств Более 50% всего трафика веб-сайтов, поступающего на ваш веб-сайт, поступает со смартфонов или мобильных устройств. Если ваш бизнес-сайт не оптимизирован для мобильных устройств, это может стоить вам больших затрат.

5. Пора избавиться от беспорядка Редизайн веб-сайта дает возможность упростить формулировку, макет и навигацию.

6. Улучшенная структура сайта повышает SEO (поисковая оптимизация) В способ построения вашего веб-сайта внесено несколько изменений, которые могут существенно повлиять на ваше SEO. Редизайн веб-сайта может улучшить архитектуру сайта, имена страниц, имена изображений, метатеги и контент, чтобы он стал значительно более дружественным к SEO.

7. Созданы запросы по API, теперь вам будет видно карточки других пользователей!

8. Теперь ваши персональнеы [имя и ваша специальность] данные сохраняются на сервере.

9. Теперь вы не сможете случайно удалить свою карточку с сайта, нужно будет подтвердить удаление.

10. Лайки которые вы поставили на карточках других пользователей\собственных сохраняются и вы видите что вы лайкнули.

11. Отзывчивый интерфейс! Теперь вы понимаете когда происходит удаление карточки\сохранение и так же с профилем.

Update 15.11.22 В проект добавляеться библиотека [ REACT ]

1. В основе простые языки программирования.

2. Чрезвычайная гибкость приложения.

3. Использование DOM.

4. Приложение выдерживает большие нагрузки.

5. React и SEO хорошо ладят. Поисковым ботам проще просматривать сайты, улучшается . взаимодействие пользователей с Вашим ресурсом.

6. Обеспечивает неизменность родительских данных.

7. Имеет открытую библиотеку данных.

8. Небольшой вес базы данных.

9. Обеспечивает простую миграцию между версиями.

10. Гибридные мобильные приложения на React внешне почти не отличаются от нативных.

Update 10.12.22 Теперь доступна авторизация!

Теперь вы можете зарегистрироваться под своими данными и направлять свои любимые изображения другим пользователям, ставьте друг другу лайки, смотрите изображения других пользователей, оценивайте.

Приложение становится всё лучше и лучше, следите за развитием проекта, дальше интереснее.

Что добавилось?

1. Авторизация

2. Регистрация

3. Отображения профиля в мобильной версии сервиса

4. Более приятный дизайн некоторых элементов

5. Выход из вашего профиля

6. Если вы случайно закрыли сервис, вы не выйдите из своего аккаунта таким образом, необходимо нажать кнопку "выйти" только после этого потребуется повторная авторизация 😊

Надеемся что нововведения будут для вас полезны и увлекательны.