Unternehmensberatungsangebot

1.

PET SHOP Project
Mariia Strelnikova

2.

Цели и задачи
В данном проекте реализуется фронтенд для веб-приложения магазина товаров
для животных со стилизацией по макету и функциональностью согласно
документации проекта.
Проект состоит из 8 страниц:
1.
2.
3.
4.
5.
6.
Main Page
Categories
All Products
Shopping Cart
Discounted items
Category Page (продукты
конкретной категории)
7. Product Page
8. Not found Page

3.

Основные направления разработки
Роутинг
LocalStorage
Redux Toolkit
Навигационное меню в
хедере и переход в корзину
для простого доступа к
главным страницам
приложения. Реализация
перехода на странички
отдельных продуктов и
категорий.
Хранение добавленных в
корзину продуктов в
LocalStorage для
сохранения также и при
обновлении или
покидании страницы.
Система контроля
состояний приложения и
хранилища.
Redux Toolkit был
использован для
асинхронной загрузки
данных с сервера и
хранения их. В проекте
было использовано 2 Slice:
Categories & Products

4.

Что было самое сложное?
Мои впечатления от результата и реализации проекта.

5.

Redux Toolkit с асинхронными операциями (Thunk)
- Необходимо было изучить каждую
страницу и её назначение для
обеспечения доступа к нужным
данным.
- Reducers, ExtraReducers, Thunks
адаптированы чтоб соответствовать
каждой отдельной цели применения.
- Например в Products помимо
получения массива продуктов я
продумала хранение текущего
продукта и функцию загрузки товаров
основываясь на id товаров из

6.

Самым сложным компонентом оказалась корзина

7.

Динамическое отображение корзины
было как испытание внимательности
и терпения.

8.

Что больше всего
понравилось?
Реализация отображения
продуктов из хранилища и
функционал сортировки и
фильтрации

9.

Что я узнала или сделала нового?
Этот проект меня научил
продумывать компоненты и
их функционал заранее
Поняла насколько важна
обработка статуса запроса и
наличия запрашиваемых
данных для корректной
работы целых цепочек
действий
Углубилась во
взаимодействие UseEffect
и функционала Redux
Для устранения некоторых
ошибок мне также
пришлось поверхностно
изучить устройство бекенда

10.

Спасибо за внимание