🍽️ FlavorVault – Гастро-блог и каталог рецептов

FlavorVault – это современное SPA-приложение, созданное для любителей кулинарии. Это не просто каталог рецептов, а полноценная информационная система с возможностью фильтрации, добавления рецептов в избранное, планирования меню на неделю, авторизации, переключения тёмной темы и многого другого. Проект разработан как портфолио для демонстрации навыков работы со стеком Svelte + Vite + Tailwind CSS.

---

📚 Оглавление

• Демо
• Особенности проекта
• Технологический стек
• Цветовая палитра
• Структура проекта
• Установка и запуск
• Сборка и деплой
• Скриншоты
• Планы по развитию
• Лицензия

---

🌐 Демо

Проект доступен для локального запуска. Вы можете развернуть его на любом статическом хостинге (Netlify, Vercel, GitHub Pages).

---

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

📋 Основной функционал

• Каталог рецептов – 6 рецептов с уникальными описаниями, тегами и категориями.
• Фильтрация по категориям – «Все», «Основные», «Супы», «Салаты», «Десерты».
• Фильтрация по тегам (дополнительная функция) – отфильтровывает рецепты по выбранным тегам.
• Отдельная страница рецепта – динамический роутинг /recipe/:id с детальным описанием.
• Избранное – добавление/удаление рецептов в закладки с сохранением в localStorage.
• Календарь питания – планировщик меню на неделю (сохраняется в localStorage).
• Авторизация – учебная система регистрации/входа с хранением данных в localStorage.
• Тёмная тема – переключение светлой/тёмной темы с сохранением выбора.
• Подписка на рассылку – форма на главной странице с валидацией и сохранением email в localStorage.

🎨 UI/UX и дизайн

• Адаптивная вёрстка – корректно отображается на всех устройствах (мобильные, планшеты, десктопы).
• Плавные анимации – hover-эффекты на карточках, кнопках, ссылках.
• Кастомные CSS-переменные – лёгкое изменение цветовой схемы.
• Микроанимации – иконки с анимацией плавания (animate-float).
• Подсветка активной ссылки – текущая страница выделяется цветом и подчёркиванием.
• Кастомные компоненты – переиспользуемые карточки, модальные окна, кнопки.

⚡ Технические особенности

• SPA (Single Page Application) – мгновенная навигация без перезагрузки страницы.
• Svelte-сторы – реактивное управление состоянием (избранное, фильтры, тема, авторизация).
• Динамические маршруты – страница рецепта с параметром id.
• Tailwind CSS v4 – утилитарный CSS с поддержкой PostCSS.
• Кастомные CSS-переменные – для цветовой схемы и тем.
• LocalStorage – хранение данных (избранное, пользователь, планировщик, тема, email подписки).
• Экосистема Vite – быстрая сборка и разработка.

---

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

Технология	Назначение
Svelte 3	Фреймворк для создания пользовательских интерфейсов
Vite 4	Сборщик и инструмент для разработки
Tailwind CSS 4	Утилитарный CSS-фреймворк
PostCSS	Обработка CSS (включая Tailwind)
svelte-spa-router	Роутинг для SPA-приложений
Node.js	Среда выполнения JavaScript
npm	Менеджер пакетов
LocalStorage	Хранение данных на клиенте

---

🎨 Цветовая палитра

Проект использует современную, тёплую и аппетитную цветовую гамму, вдохновлённую кулинарной тематикой.

Светлая тема

Переменная	Цвет	HEX	Описание
--color-primary	Тёмно-синий	#1E293B	Основной текст, заголовки
--color-accent	Ярко-розовый/красный	#E11D48	Акценты (кнопки, ссылки, выделения)
--color-accent-hover	Тёмно-розовый	#BE123C	Акценты при наведении
--color-bg	Светлый фон	#F8FAFC	Фон страницы
--color-bg-card	Белый	#FFFFFF	Фон карточек
--color-text	Тёмный	#0F172A	Основной текст
--color-text-muted	Серый	#64748B	Второстепенный текст

Тёмная тема

Переменная	Цвет	HEX
--color-bg-body	Тёмно-синий	#0F172A
--color-text-body	Светлый	#F8FAFC
--color-card-bg	Серый	#1E293B
--color-border	Тёмный	#334155
--color-primary	Светлый	#F8FAFC
--color-text-muted	Серый	#94A3B8

Шрифты

• Основной текст: Inter (Google Fonts)
• Заголовки: Playfair Display (Google Fonts)

---

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

flavor-vault/ ├── public/ │ └── images/ # Изображения рецептов │ ├── pasta.jpg │ ├── soup.jpg │ ├── chicken.jpg │ ├── caesar.jpg │ ├── brownie.jpg │ └── salmon.jpg ├── src/ │ ├── components/ # Переиспользуемые компоненты │ │ ├── Header.svelte # Шапка с навигацией и переключателем темы │ │ ├── Footer.svelte # Подвал сайта │ │ ├── Card.svelte # Карточка рецепта (с кнопкой избранного) │ │ └── Modal.svelte # Модальное окно с деталями рецепта │ ├── routes/ # Страницы приложения │ │ ├── Home.svelte # Главная страница │ │ ├── Menu.svelte # Меню с фильтрацией │ │ ├── Recipes.svelte # Все рецепты с фильтрацией │ │ ├── Recipe.svelte # Страница отдельного рецепта (/recipe/:id) │ │ ├── Blog.svelte # Блог со статьями │ │ ├── Favorites.svelte # Избранные рецепты │ │ ├── MealPlanner.svelte # Календарь питания │ │ ├── Auth.svelte # Авторизация (вход/регистрация) │ │ ├── About.svelte # О нас │ │ └── Contacts.svelte # Контакты │ ├── lib/ │ │ ├── data/ # Статические данные │ │ │ ├── recipes.js # Массив рецептов │ │ │ └── blog.js # Статьи для блога │ │ ├── stores/ # Svelte-сторы │ │ │ ├── filterStore.js # Фильтрация категорий │ │ │ ├── favorites.js # Избранное (с localStorage) │ │ │ ├── modalStore.js # Модальное окно │ │ │ ├── themeStore.js # Тёмная тема │ │ │ ├── auth.js # Авторизация │ │ │ └── mealPlanner.js # Календарь питания │ │ └── actions/ # Кастомные действия │ │ └── clickOutside.js # Закрытие по клику вне элемента │ ├── app.css # Глобальные стили (Tailwind + кастомные) │ ├── App.svelte # Корневой компонент (роутинг, тема) │ ├── main.js # Точка входа │ └── vite-env.d.ts # TypeScript-типы ├── index.html # HTML-шаблон ├── package.json # Зависимости и скрипты ├── vite.config.js # Конфигурация Vite ├── tailwind.config.js # Конфигурация Tailwind ├── postcss.config.js # Конфигурация PostCSS ├── jsconfig.json # Настройки JavaScript/TypeScript └── README.md # Документация проекта

---

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

Требования

• Node.js (v18 или выше) – Скачать
• npm (входит в состав Node.js) или pnpm (опционально)

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

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

   git clone https://github.com/ваш-username/flavor-vault.git
   cd flavor-vault
   
   

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

npm install

Или с использованием pnpm (если установлен):

pnpm install

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

npm run dev

После запуска сервер будет доступен по адресу http://localhost:5173.

4. Сборка проекта

npm run build

FlavorVault