/mesto-react

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

Primary LanguageJavaScript

Учебный проект "Место"

Проектная работа 5 курса, спринты 10 - по профессии "Веб-разработчик" образовательной платформы ЯндексПрактикум поток №39, группа "Purple" старт обучения по основной программе - 14.11.2021 года

Обзор

  • Описание
  • Использовано
  • Процесс написания

Описание

(Изображения взяты из описаний проектных работ Яндекс.Практикум)

Место

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

Страница проекта на GitHub Pages

Использовано:

  1. Браузерные стили сброшены через Normalize.css;
  2. Семантическая верстка;
  3. Шрифты в форматах woff и woff2;
  4. Библиотека (фреймворк) ReactJS;
  5. Адаптивная верстка;

Получен опыт:

  • семантической HTML-разметки.
  • использования в верстке БЭМ-подхода.
  • кросс-браузерной верстки и использования вендорных CSS-префиксов.
  • работы с системой контроля версий Git и сервисом GitHub.
  • использования CSS-анимаций, фреймов, подключения шрифтов.
  • организации файловой стркутуры проекта по Nested Bem.
  • адаптивной верстки, использования медиа-запросов.
  • работы с макетом в Figma.
  • оптимизации графики
  • публикации проекта на GitHub Pages
  • работы с API, использования HTTP-запросов
  • использования JSX
  • написания классовых и функциональных компонентов
  • работы с Virtual DOM
  • использования React-hooks

Установка и запуск:

  1. Склонируйте проект по HTTPS https://github.com/AstreyaJulia/mesto.git или через SSH: git@github.com:AstreyaJulia/mesto.git;
  2. Перейдите в папку проекта cd mesto-react;
  3. Установите зависимости npm install;
  4. После установки зависимостей выполните npm start для запуска сервера разработки или npm build для production-сборки проекта;
  5. Запустить production-сборку можно выполнив npm serve;
  6. После npm start или npm serve проект будет запущен на локальном сервере по адресу http://localhost:3000;

Спринт 10 (19.04.2022 - 23.04.2022):

  1. Начальная настройка проекта;
  2. Перенос основных блоков, графики, стилей, переменных и api;
  3. Подключение API - карточки и информация профиля берется от сервера;
  4. Добавлен скрипт serve для запуска production-сборки;
  5. Добавлены компоненты всплывашек;
  6. Основной компонент приложения связан с компонентами всплывашек;

Спринт 11 (07.05.2022 - 08.05.2022):

  1. Состояние currentUser;
  2. Поднятие стейта card Main -> App;
  3. Ф-ии удаления карточки, лайка/дизлайка карточки, в api метод changeLikeCardStatus;
  4. Отдельный компонент для всплывашек редактирования профиля, редактирования аватара, добавления карточки;