Итоговая работа Введение в фреймворки JavaScript/Учебная практика Front

Автор

• ФИО: Чубенко Андрей Михайлович
• Учебное заведение: IT Hub College
• Группа: 3ЭИТ-9.23
• Дата контрольной точки: 3 ноября 2025

Описание проекта

Проект "Garden Shop" — это полноценный интернет-магазин садовых товаров, разработанный как итоговая работа для демонстрации навыков фронтенд- и бэкенд-разработки на JavaScript. Приложение представляет собой e-commerce платформу с каталогом товаров, фильтрами, корзиной, скидками и оформлением заказов. Основная цель — создать функциональный и интерактивный сайт с современным стеком технологий, включая React для UI, Redux для управления состоянием, Express для API и Sequelize с SQLite для работы с данными.

Сайт включает следующие страницы:

• Главная (MainPage) — баннер с акциями, категории, скидки и список товаров.
• Каталог (ProductListPage) — все товары или по категориям с фильтрами.
• Товар (ProductItemPage) — детальная информация о продукте.
• Категории (CategoryListPage) — список всех категорий.
• Корзина (BasketPage) — просмотр и редактирование корзины.
• Не найдено (NotFoundPage) — обработка 404.

Проект включает динамические эффекты (модалки, счётчики, плавный скролл), адаптивный дизайн, работу с localStorage для корзины и API для загрузки данных.

Задание

Для выполнения итоговой работы необходимо создать веб-приложение со следующими требованиями:

• Фреймворки на выбор: React для фронтенда, Express для бэкенда.
• Информация, находящаяся на веб-странице: На усмотрение автора (интернет-магазин садовых товаров).
• Обязательное использование состояния: Реализовано с помощью Redux и Redux Thunk для асинхронных действий.
• Подключение минимум одной базы данных: Использована SQLite с Sequelize ORM для хранения категорий и продуктов.
• API и роутинг: Реализованы GET/POST эндпоинты для категорий, товаров, заказов и скидок; роутинг на фронтенде с React Router.

Технические детали

• Фронтенд: React 18.3.1, Redux 5.0.1, React Router 6.26.2
• Бэкенд: Express 4.21.0
• База данных: SQLite через Sequelize 6.37.3
• Стилизация: SCSS 1.79.4, кастомные модульные стили
• Формы и валидация: React Hook Form 7.53.0
• Асинхронность: Redux Thunk 3.1.0
• Зависимости: Указаны в frontend/package.json и backend/package.json
• Деплой: Полный стек на Render.com (фронтенд build сервируется Express)

Особенности реализации

• Управление состоянием: Redux хранит категории, товары и корзину (с сохранением в localStorage). Асинхронные действия для fetch данных с API.
• База данных: Модели Category (id, title, image) и Product (id, title, price, discont_price, description, image, categoryId). Связь one-to-many.
• API: Эндпоинты для получения категорий/товаров, добавления в корзину (локально), отправки заказов/скидок (POST).
• Интерактивность: Счётчики в корзине, модалки, плавный скролл, расчёт скидок в реальном времени.
• Адаптивность: Mobile-first дизайн с медиа-запросами в SCSS, поддержка десктопов и мобильных устройств.
• Деплой: Одна ссылка на всё — статика фронтенда сервируется бэкендом; сиды данных в index.js для автозаполнения БД.

Живая версия

👉 https://introduction-to-javascript-frameworks.onrender.com

Структура проекта

└── Introduction-to-JavaScript-Frameworks/
    ├── backend/
    │   ├── database/
    │   │   ├── database.js
    │   │   └── models/
    │   │       ├── category.js
    │   │       └── product.js
    │   ├── routes/
    │   │   ├── categories.js
    │   │   ├── order.js
    │   │   ├── products.js
    │   │   └── sale.js
    │   ├── index.js
    │   └── package.json
    ├── frontend/
    │   ├── public/
    │   │   └── index.html
    │   ├── src/
    │   │   ├── asyncActions/
    │   │   ├── components/
    │   │   ├── pages/
    │   │   ├── store/
    │   │   ├── UI/
    │   │   ├── App.jsx
    │   │   └── App.scss
    │   └── package.json
    └── README.md