Разработка веб-приложения с использованием библиотеки React

1.

Итоговая работа курса «Основы Frontend разработки»
Название: Разработка веб-приложения с использованием библиотеки React
Студент: Шамигулов Станислав Викторович

2.

Цель: создание веб-приложения (SPA) с использованием библиотеки
React.
Задачи в рамках итоговой работы:
- cоздать веб-приложение (сайт) содержащее следующие страницы:
/ Главная страница
/ Страница отдельного товара
/ Страница корзины
/ Страница обратной связи
- реализовать возможность поиска товаров, добавления и удаления
товаров в корзину, переход в карточку товара, отправку формы
обратной связи
- получение данных из API
- соблюдение адаптивной верстки (минимальный размер 375px)

3.

Получение данных из внешнего API
▪ Реализация базы данных выполнена на стороне
сервиса https://mockapi.io/
▪ В базе данных содержится информация о карточках
товаров:
▪
▪
▪
▪
▪
▪
id
Название
Фотография
Описание
Платформа
Цена

4.

Главная страница
▪ Главная страница представляет собой витрину
онлайн магазина игр. По умолчанию выведены все
карточки игр из базы данных: фотография, название,
описание, кнопка подробной информации, цена, и
кнопка добавить/убрать из корзины.
▪ Панель навигации позволяет перейти в отдельные
страницы сайта (доступна на всех страницах)
▪ Форма поиска по названию, позволяет в реальном
времени выводить карточки игр совпадающие по
названию (проводить фильтрацию)
▪ Доступные действия:
▪
▪
▪
▪
Переход на другие страницы сайта без перезагрузки
Переход в отдельную карточку товара без перезагрузки
Добавление/удаление товара из корзины
Поиск по названию (поиск совпадений введенных данных с
названием)

5.

Страница товара
▪ Страница товара представляет собой отдельную
карточку товара. Переход осуществляется без
перезагрузки, путем нажатия на ссылки «Подробнее»
в карточке товара на главной странице (витрине)
▪ Карточка содержит:
▪
▪
▪
▪
Фотографию товара
Описание
Цену
Кнопку добавить / удалить из корзины
▪ Доступные действия:
▪ Переход на другие страницы сайта без перезагрузки
▪ Добавление/удаление товара из корзины

6.

Страница корзины
▪ Страница корзины отображает список добавленных
товаров. Список активен и изменяется по ходу
добавления или удаления товаров из корзины на
главной странице и отдельной карточки товара.
▪ Список включает в себя:
▪
▪
▪
▪
▪
Фотографию товара
Название
Цену
Кнопку удаления из корзины
Общую сумму покупки
▪ Доступные действия
▪ Переход на другие страницы сайта без перезагрузки
▪ Добавление/удаление товара

7.

Страница обратной связи
▪ Страница обратной связи содержит форму с полями
и кнопкой отправки сообщения. Каждое поле формы
проходит собственную валидацию и является
обязательным. При не верном заполнении выводятся
ошибки.
▪ При отправке формы проверяются все поля на
корректность, и отправляется объект с данными в
консоль.

8.

Адаптивная верстка
Адаптивная верстка позволяет корректно отображать
приложение до минимально допустимого разрешения в
375px
Дизайн приложения выполнен в минималистичном и
понятном виде. Простые и понятные элементы
интерфейса позволяют с легкостью пользоваться всем
функционалом и обеспечивают быструю загрузку.

9.

Размещение проекта, итог
Приложение доступно по адресу: https://bambaleilagh.github.io/4p22final-project-stanislav-shamigulov
Репозиторий: https://github.com/bambaleilaGH/4p22-final-projectstanislav-shamigulov
Спасибо за внимание!
Студент: Шамигулов Станислав Викторович