🎯 Цель и задача проекта
Клиентская задача:
Клиент хотел запустить простой и понятный интернет-магазин пиццы с минималистичным дизайном и базовым функционалом для демонстрации продукта инвесторам и потенциальным покупателям. Основная цель — показать, как может работать онлайн-магазин: от выбора пиццы до оформления заказа.
Основные задачи:
Разработка SPA-приложения (Single Page Application) с быстрой загрузкой и плавной навигацией.
Каталог товаров с фильтрацией и сортировкой: пользователь должен иметь возможность выбрать категорию пиццы (мясная, вегетарианская и т.д.), отсортировать по цене, алфавиту или популярности.
Интерактивная корзина: отображение количества и итоговой суммы, возможность удаления и пересчёта товаров.
Загрузка данных с сервера (Mock API): имитация реальной работы с базой данных.
Адаптивность: интерфейс должен корректно отображаться на мобильных устройствах и ПК.
Интуитивный UI: удобная структура, Skeleton-загрузки для лучшего UX.
Цель проекта:
Создать прототип интернет-магазина, который можно в дальнейшем масштабировать, добавить авторизацию, оплату, полноценную админку и интеграцию с реальной базой данных. На данном этапе — функциональное, чистое и презентабельное решение, демонстрирующее логику взаимодействия пользователя с системой заказа пиццы.
🛠 Действия, предпринятые для реализации проекта
Для успешного выполнения задачи клиента по созданию интернет-магазина пиццы я пошагово реализовал проект, следуя современным практикам разработки фронтенда.
1. Планирование и анализ требований
Изучил пожелания клиента: какие страницы должны быть, какой функционал необходим, каким должен быть интерфейс.
Разработал базовую структуру проекта: главная страница с каталогом, страница корзины и страница 404.
Составил план реализации, разбил проект на этапы (каталог → фильтрация → корзина → API и т.д.).
2. Создание проекта и настройка окружения
Инициализировал проект с помощью Vite для высокой скорости разработки.
Подключил TypeScript для строгой типизации и улучшенной читаемости кода.
Настроил маршрутизацию с помощью React Router DOM.
3. Реализация интерфейса и логики
Создал адаптивную верстку всех страниц с использованием SCSS-модулей.
Разработал динамический каталог пицц с карточками товаров.
Настроил фильтрацию по категориям и сортировку по критериям (цена, рейтинг, алфавит).
Добавил скелет-загрузки для имитации ожидания данных с сервера.
4. Глобальное состояние и корзина
Использовал Redux Toolkit для управления состоянием корзины и фильтров.
Реализовал добавление товаров в корзину, увеличение/уменьшение количества, удаление и очистку корзины.
Подсчёт общей суммы и количества товаров в реальном времени.
5. Работа с API
Настроил получение данных о пиццах через Axios с использованием Mock API (например, JSON-server или аналог).
Обработал состояния загрузки, ошибки и успешного получения данных.
6. Дополнительные улучшения
Реализовал страницу 404 Not Found с возвратом на главную.
Обеспечил адаптивность и кроссбраузерную совместимость.
Оптимизировал структуру компонентов для масштабируемости.
✅ Результат:
В итоге получился лёгкий, адаптивный и современный SPA-прототип онлайн-магазина пиццы, готовый к расширению. Интерфейс полностью соответствует целям клиента, демонстрирует ключевые функции: выбор товара, сортировка, корзина, взаимодействие с сервером. Проект можно масштабировать и подключить к реальной системе заказов.
🍕 Online Pizza — интернет-магазин пиццы
Online Pizza — это проект интернет-магазина, созданный на React + TypeScript, с использованием Redux Toolkit, SCSS, React Router DOM и Axios. Приложение имитирует реальную онлайн-пиццерию с возможностью фильтрации, сортировки, добавления товаров в корзину и оформления заказа.
🔧 Технологии:
React + TypeScript
Redux Toolkit (глобальное состояние, корзина)
SCSS-модули (стилизация)
React Router DOM (маршрутизация)
Axios (загрузка данных с сервера)
Mock API (через JSON-server или аналог)
📦 Основной функционал:
Каталог пицц с фильтрацией по категориям
Сортировка по цене, рейтингу, алфавиту
Корзина с подсчётом общей суммы и количества
Адаптивная верстка
Загрузка товаров с API
Интерактивный UI с Skeleton-загрузками
Страницы: Главная, Корзина, 404
🧑💻 Для чего создан:
Проект разработан в образовательных целях для закрепления практики работы с React-экосистемой и современными подходами к фронтенд-разработке. Отлично подходит как демонстрация навыков во фриланс-портфолио.
Пожаловаться
