Проект Галерея карточек.

Ссылки:

Демо версия.

Макет.

Описание:

Одностраничный сайт c адаптивной версткой в диапазоне от 320px до 1280px, создан с использованием React и JavaScript. Реализован по правилам flexbox, grid, используется CSS анимация, медиазапросы, подключены шрифты. Файловая структура организована по Nested БЭМ. Проект подключён к серверу через API.

Функциональность:

• Регистрация профиля пользователя;
• Авторизация пользователя на сайте; (P.S. чтобы зарегестрироваться, нужно написать фейковый емайл и пароль, необходимо запомнить данные и ввести их при входе.)
• Загрузка на сайт изображений;
• Удаление с сайта своих ранее загруженых изображений;
• Изменение информации о пользователе и замена аватара;
• Открытие и закрытие модальных окон;
• Постановка и удаление лайков;

Стек:

• HTML5;
• CCS3 (БЭМ);
• JS;
• React.js;
  • функциональные компоненты React;
  • ReactHooks (useEffect, useState, useRef, useContext)
  • ReactRouter (v6.4);
• REST API;
• Асинхронные запросы;

Инструкция по установке:

Установите себе GIT - система контроля версий, перейдя по ссылке на офицальный сайт:

 https://git-scm.com/

После установки GIT, склонируйте репозиторий к себе на компьютер с помощью команды:

git clone https://github.com/dmitriy9427/react-card-gallery-auth.git

Далее установите редактор кода, я использую Visual Studio Code, скачать можно по ссылке указанной ниже.

https://code.visualstudio.com/

Установите Node.js

https://nodejs.org/ru

Запустите в редакторе кода склонированную папку, откройте терминал и запустите команду для установки всех необходимых зависимостей для проекта:

npm install

Когда все установлено, можно запускать проект локально с помощью команды:

npm start или npm run start