Mini-Yozetka

1. Mini-Yozetka

Презентація дипломної роботи з
предмету : angular/react
Mini-Yozetka
Студентів IT академії «Крок» :
Сильчик Марини
Мамотенко Владислава
Ларцина Максима
Хрустальова Олесандра
Зубко Євгена

2.

Mini-Yozetka – це прототип інтернет-магазину Rozetka
Rozetka
Mini-Yozetka

3.

Наші задачі

4.

Mini-Yozetka складається з :
Завантажувальний екран
Головна сторінка
Сторінка Кошика
Сторінка адміну
Сторінка товару
Сторінка категорії
Сторінка 404

5.

Завантажувальний екран
При вході до програми
Сторінка 404
При переході на некоректний шлях

6. Головна сторінка

Бургер-меню
Поле фільтрації
Зміна валюти
Сторінка адміну
Сторінка кошика
Категорії
Плитки товарів
Футер

7.

Burger-menu
Пошук
Перехід по категоріям
Перехід до кошика
Додаткова інформація
Пошук за назвою
Фільтрується в
реальному часі

8. Кошик

Плитки товарів
Зміна кількості товару
Ціна
(розрахована від к-ті)
Кнопка видалити товар
Повернутись на головну
сторінку
Очистити корзину
Сума замовлення
Скинути форму

9. Сторінка товару

Повернутись на головну
сторінку
Назва товару
Ціна
Додати в кошик
Опис товару
Коментарі

10. Сторінка товару:Коментарі

Опис товару
Поле для введення коментря
(обов’язкове до заповнення)
Слова : кокос ,банан,поганий
і символи @ - заборонені
Коментарі зберігаються в
Local Storage

11. Сторінка адміну : вхід

Поле для введення пароля

12. Сторінка адміну

Поле для введення назви
-лише літери і пробіли
Поле для введення опису
-лише літери і пробіли та
цифри
Перевірка на існуюче
зображення
Вибір валюти
Додає всюди товар
Можна видалити товар
всюди

13.

Як це працює
• Головна сторінка: 11 товарів, пагінація по 5
• Фільтрація товарів у реальному часі
• Перехід на сторінку товару з описом та коментарями
• Кошик з динамічним підрахунком суми
• Адмінка: додавання, валідація та видалення товарів
Особливості
•Заміна заборонених слів у коментарях
•Збереження даних після перезавантаження сторінки
•Захист сторінки адміністратора паролем
•Повідомлення та підсвічування при некоректному вводі
•Сторінка 404 при помилковому шляху

14.

Які технології ми використовували
HTML, CSS — адаптивний дизайн
Angular - для SPA, компонентний підхід
Express — сервер для роздачі бандлу

15.

Висновок
Проєкт повністю відповідає технічному завданню
Кожна частина перевірена й працює згідно вимог
Код розбитий по компонентах для зручності підтримки
Кольори, стилі, макет - скопійовані з Rozetka
Адаптація під desktop