E V E R L A N E - React Интернет-магазин

Описание

E V E R L A N E - это современный интернет-магазин одежды, переписанный с чистого HTML/CSS на React. Этот проект демонстрирует лучшие практики разработки e-commerce приложений с использованием современных веб-технологий.

Основные функции:

• Адаптивный дизайн для всех устройств
• Каталог товаров с фильтрацией
• Детальные страницы товаров
• Современный UI/UX дизайн
• Быстрая загрузка и оптимизация

Для кого предназначен:

• Разработчики, изучающие React
• Дизайнеры, интересующиеся e-commerce
• Студенты веб-разработки
• Стартапы в области онлайн-ритейла

Установка и запуск

Предварительные требования

• Node.js 16.0 или выше
• npm или yarn

Пошаговая установка

1. Клонирование репозитория

git clone https://github.com/yourusername/everlane-react.git
cd everlane-react

2. Установка зависимостей

npm install

3. Запуск в режиме разработки

npm start

Приложение будет доступно по адресу: http://localhost:3000

4. Сборка для продакшена

npm run build

5. Деплой на GitHub Pages

npm run deploy

Примеры использования

Навигация по сайту

• Главная страница (/) - промо-баннеры и категории товаров
• Каталог (/catalog) - список товаров с фильтрами
• Детальная страница товара (/product/:id) - полная информация о товаре

Основные компоненты

// Пример использования ProductCard
<ProductCard 
  title="The Cloud Relaxed Cardigan"
  price={132}
  discountPrice={188}
  colors={['grey', 'brown', 'orange']}
  image="/img/product/1.jpg"
/>

Фильтрация товаров

// Фильтры в каталоге
- По категориям (Одежда, Аксессуары и т.д.)
- По цвету (Черный, Синий, Красный и т.д.)
- По размеру (XS-XXXL, Талия 36-50)

Структура репозитория

everlane-react/
├── public/                 # Статические файлы
│   ├── img/               # Изображения проекта
│   ├── fonts/             # Шрифты Maison Neue
│   └── index.html         # HTML шаблон
├── src/
│   ├── components/        # React компоненты
│   │   ├── Header/        # Шапка сайта
│   │   ├── Footer/        # Подвал сайта
│   │   └── ProductCard/   # Карточка товара
│   ├── pages/             # Страницы приложения
│   │   ├── Home/          # Главная страница
│   │   ├── Catalog/       # Каталог товаров
│   │   └── ProductDetail/ # Детальная страница
│   ├── styles/            # Глобальные стили
│   │   ├── globals.css    # Основные стили
│   │   └── variables.css  # CSS переменные
│   ├── App.jsx            # Главный компонент
│   └── index.js           # Точка входа
├── package.json           # Зависимости и скрипты
└── README.md             # Документация

Технические требования

Системные требования

• ОС: Windows 10+, macOS 10.14+, Linux Ubuntu 18.04+
• Node.js: 16.0.0 или выше
• npm: 7.0 или выше
• Браузер: Chrome 90+, Firefox 88+, Safari 14+

Технологический стек

• Frontend: React 18.2.0
• Стили: CSS3 с CSS Variables
• Роутинг: React Router DOM
• Шрифты: Maison Neue
• Иконки: SVG
• Сборка: Create React App

Установленные зависимости

{
  "react": "^18.2.0",
  "react-dom": "^18.2.0", 
  "react-router-dom": "^6.8.0",
  "react-scripts": "5.0.1"
}

Авторы и участники

Основные разработчики

Варткинаян Владимир Мартиросович - Full-stack разработчик

Вклад в проект

• Дизайн: Адаптация оригинального дизайна Everlane
• Разработка: Переписывание HTML/CSS в React компоненты
• Оптимизация: Улучшение производительности и SEO

Контактная информация

Для связи с разработчиками

• Email: vova76416@gmail.com
• GitHub: https://github.com/vvv3333/VartkinayanVM/edit/main/README.md

Отчеты об ошибках и предложения

Если вы нашли баг или у вас есть предложения по улучшению:

1. Создайте Issue в репозитории GitHub
2. Опишите проблему максимально подробно
3. Укажите шаги для воспроизведения