https://github.com/anyabravich/youmeal
🍔 Приложение для ресторана быстрого питания. Разработано с использованием React
https://github.com/anyabravich/youmeal
react scss styled-component typescipt vite
Last synced: 2 months ago
JSON representation
🍔 Приложение для ресторана быстрого питания. Разработано с использованием React
- Host: GitHub
- URL: https://github.com/anyabravich/youmeal
- Owner: anyabravich
- Created: 2024-06-26T18:15:22.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2025-01-11T14:02:09.000Z (over 1 year ago)
- Last Synced: 2025-02-14T05:19:31.687Z (over 1 year ago)
- Topics: react, scss, styled-component, typescipt, vite
- Language: TypeScript
- Homepage: https://youmeal.vercel.app
- Size: 3.32 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 🍔 YouMeal
> Современное веб-приложение для заказа еды с интуитивным интерфейсом и удобной корзиной покупок
## 📋 Описание
YouMeal — это полнофункциональное веб-приложение для заказа еды, построенное на React и TypeScript. Приложение предлагает широкий ассортимент блюд: от сочных бургеров до хрустящих закусок и ароматных хот-догов.
### ✨ Основные возможности
- 🍔 **Каталог продуктов** — бургеры, закуски, хот-доги с детальными описаниями
- 🏷️ **Фильтрация по категориям** — удобная навигация по типам блюд
- 🛒 **Корзина покупок** — добавление, удаление и изменение количества товаров
- 📱 **Адаптивный дизайн** — отлично работает на всех устройствах
- 🎨 **Современный UI** — стильный интерфейс с использованием Styled Components
- ⚡ **Быстрая работа** — оптимизированная производительность с Vite
## 🚀 Технологии
- **Frontend**: React 19, TypeScript
- **Стилизация**: Styled Components, Polished
- **Сборка**: Vite
- **Линтинг**: ESLint
- **Архитектура**: Feature-based структура компонентов
## 🛠️ Установка и запуск
### Предварительные требования
- Node.js (версия 22)
- npm или yarn
### Шаги установки
1. **Клонируйте репозиторий**
```bash
git clone git@github.com:anyabravich/youmeal.git
cd youmeal
```
2. **Установите зависимости**
```bash
npm install
```
3. **Запустите проект в режиме разработки**
```bash
npm run dev
```
4. **Откройте браузер**
```
http://localhost:5173
```
### Другие команды
```bash
# Сборка для продакшена
npm run build
# Предварительный просмотр сборки
npm run preview
# Проверка кода линтером
npm run lint
```
## 📁 Структура проекта
```
src/
├── components/ # Компоненты приложения
│ ├── common/ # Общие компоненты (ErrorBoundary, LabelContext)
│ ├── features/ # Функциональные компоненты
│ │ ├── Basket/ # Корзина покупок
│ │ ├── Cards/ # Карточки товаров
│ │ ├── Hero/ # Главный баннер
│ │ └── Labels/ # Фильтры категорий
│ ├── layout/ # Компоненты макета
│ │ ├── Header/ # Шапка сайта
│ │ ├── Footer/ # Подвал
│ │ ├── Main/ # Основной контент
│ │ └── Popups/ # Модальные окна
│ └── ui/ # UI компоненты
│ ├── Button/ # Кнопки
│ ├── Card/ # Карточки
│ ├── Input/ # Поля ввода
│ └── Icons/ # Иконки
├── hooks/ # Пользовательские хуки
├── styles/ # Глобальные стили и тема
├── types/ # TypeScript типы
├── utils/ # Утилиты
└── mock/ # Моковые данные
```
## 🎯 Функциональность
### Каталог товаров
- Отображение карточек с изображениями, ценами и весом
- Фильтрация по категориям (бургеры, закуски, хот-доги)
- Адаптивная сетка для разных размеров экрана
### Корзина покупок
- Добавление товаров в корзину
- Изменение количества товаров
- Удаление товаров из корзины
- Подсчет общей стоимости
### Модальные окна
- Детальная информация о товаре
- Форма заказа и доставки
- Управление количеством товаров
## 🎨 Дизайн
Приложение использует современный дизайн с:
- Адаптивной версткой для всех устройств
- Интуитивной навигацией
- Привлекательными анимациями
- Консистентной цветовой схемой
## 📱 Адаптивность
- **Desktop**: Полнофункциональный интерфейс
- **Tablet**: Оптимизированная сетка и размеры
- **Mobile**: Мобильная версия с touch-friendly элементами
## 🔧 Разработка
### Добавление новых товаров
Товары добавляются в файл `src/mock/goods.ts`:
```typescript
{
id: 13,
image: "/images/cards/card-13.jpg",
price: 350,
title: "Новый бургер",
weight: 400,
category: ProductCategory.BURGERS,
}
```
### Добавление новых категорий
1. Обновите enum `ProductCategory` в `src/types.ts`
2. Добавьте иконку в `src/components/features/Labels/data.ts`
3. Добавьте изображение иконки в `public/images/labels/`
## 📄 Лицензия
Этот проект создан в образовательных целях.
---
Сделано с ❤️ для любителей вкусной еды