Global Olive Corp. — Инвестиционная платформа для оливковых деревьев

Полнофункциональная платформа электронной коммерции для инвестиций в оливковые деревья. Пользователи могут покупать деревья, получать свидетельства о собственности, дарить деревья другим и отслеживать активы. Включает в себя панель администратора для управления инвентарем, заказами и пользователями.

• Маркетинговая целевая страница: https://goc2025.framer.website/
• Основное приложение: https://olive.yappix.studio/
• Статус: ✅ Готовность к производству
• Продолжительность: единый цикл разработки.

• Платформа: Фреймер
• URL: https://goc2025.framer.website/.
• Цель: Маркетинговый сайт Global Olive Corporation.
• Дизайн: индивидуальный адаптивный дизайн.
• Интеграция: плавное перенаправление в основное приложение.

Особенности:

• Геройский раздел с ценностным предложением.
• Инвестиционная информация (деревья, токены, реальные активы)
• Витрина продукции (оливковое масло премиум-класса)
• раздел «Как это работает»
• Раздел часто задаваемых вопросов
• Призыв к действию, ведущий к основному приложению.
• Адаптивный дизайн

Интеграция:

• Целевая страница включает призывы к действию, которые перенаправляют пользователей в основное приложение по адресу https://olive.yappix.studio/ для реальных покупок деревьев и управления учетными записями.

• Платформа: Next.js 16+
• URL: https://olive.yappix.studio/
• Цель: Полнофункциональная платформа электронной коммерции.

Особенности: (см. ниже)

• Ключевые особенности
• Функции пользователя
• Двухэтапная регистрация с подтверждением электронной почты (6-значный код)
• Древовидный каталог с поиском, фильтрами и интерактивной картой (листовка)
• Корзина покупок и порядок оформления заказа
• Интеграция платежей Stripe с Apple Pay и Google Pay
• Автоматическая аутентификация после покупки
• Панель пользователя с активами, заказами и профилем.
• Система подарков — отправляйте деревья другим пользователям с помощью сообщений.
• Сертификаты в формате PDF — автоматически создаваемые свидетельства о собственности.
• Уведомления по электронной почте — 5 типов автоматических писем.
• Двуязычная поддержка — русский и английский (i18n)

• Управление пользователями — просмотр, редактирование ролей, удаление пользователей.
• Управление деревом — создание, редактирование, массовое обновление цен.
• Импорт CSV — массовый импорт деревьев из Excel/CSV.
• Мониторинг заказов — просмотр всех заказов и платежей
• Отслеживание подарков — отслеживайте все транзакции с подарками.
• Панель статистики — аналитика и метрики
• Дизайнер сертификатов — визуальный редактор PDF-сертификатов.
• Настройки полосы — управляйте конфигурациями платежей.

• API: маршруты API Next.js (RESTful).
• ОРМ: Призма 6.19.0
• База данных: PostgreSQL.
• Платежи: Stripe 19.3.1 (сеансы оформления заказа + веб-перехватчики)
• Электронная почта: Nodemailer 7.0.10 (SMTP)
• Генерация PDF: pdf-lib 1.17.1
• Рендеринг холста: node-canvas 3.2.0
• Обработка файлов: ExcelJS 4.4.0.

• Сервер: Сервер Ubuntu
• Менеджер процессов: PM2 с автоматическим перезапуском
• Веб-сервер: Nginx (обратный прокси)
• SSL: давайте зашифруем (HTTPS)
• Развертывание: на основе Git с автоматическими сценариями.

• Обнаружение – пользователь посещает целевую маркетинговую страницу (https://goc2025.framer.website/).
• Информация — Пользователь узнает об инвестициях в оливковые деревья, токенизации и продуктах.
• Конверсия – пользователь нажимает кнопку призыва к действию, чтобы начать инвестировать.
• Перенаправление — пользователь перенаправляется в основное приложение (https://olive.yappix.studio/).
• Регистрация — пользователь создает учетную запись, подтвердив адрес электронной почты.
• Покупка — пользователь просматривает каталог, добавляет деревья в корзину и завершает оформление заказа.
• Владение — пользователь получает сертификат и может управлять активами на панели управления.
• Вовлеченность — Пользователь может дарить деревья, просматривать заказы и отслеживать инвестиции.

Последовательность перехода от маркетинга к приложению

• Бесшовная интеграция между целевой страницей Framer и приложением Next.js.
• Согласованный брендинг на обеих платформах.
• Четкий призыв к действию, направляющий пользователей к основному приложению.
• Удобный переход от маркетинга к транзакционному опыту

Система генерации сертификатов

• Визуальный дизайнер — редактор перетаскивания в админ-панели.
• Идеальный рендеринг до пикселя — рендеринг Canvas на стороне сервера соответствует предварительному просмотру в Интернете.
• Динамическое создание PDF — персонализированные сертификаты с данными пользователя.
• Пакетная регенерация — обновите все сертификаты новым дизайном.

Техническая реализация:

• Клиентский Canvas API для редактора дизайна.
• Серверный узел-холст для рендеринга
• Преобразование PNG в PDF с использованием pdf-lib.
• Сопоставление системы координат между Canvas и PDF.

Интеграция платежей

• Stripe Checkout — размещенная страница оплаты
• Apple Pay и Google Pay — настраивается через домен способа оплаты.
• Обработка Webhook — идемпотентная обработка событий.
• Автоматическое создание пользователей — новые учетные записи создаются при первой покупке.
• Управление сессиями — автоматический вход после оплаты

Функции безопасности:

• Проверка подписи вебхука
• Проверки идемпотентности для предотвращения дублирующей обработки.
• Проверка статуса транзакции

Система подарков

• Отправляйте подарки — пользователи могут дарить принадлежащие им деревья другим.
• Уведомления по электронной почте — уведомляются как отправитель, так и получатель
• Порядок принятия/отклонения — получатель может принять или отклонить подарки.
• Управление статусами — деревья перехода между ДОСТУПЕН, В собственности, ПОДАРЕН.
• Безопасность транзакций — транзакции базы данных обеспечивают согласованность данных.

Бизнес-логика:

• Предотвращает дарение уже одаренных деревьев.
• Проверяет формат электронной почты получателя.
• Предотвращает самоодарение
• Обрабатывает крайние случаи (отказ, отмена)
• Реализация безопасности

Исправления уязвимостей:

• Исправлена критическая уязвимость Next.js RCE (обновлено до 16.0.7).
• Заменен уязвимый пакет xlsx на ExcelJS.
• Исправлена DoS-уязвимость Nodemailer.
• Исправлена инъекция команды glob.

Заголовки безопасности:

• HSTS (строгая транспортная безопасность)
• XSS-защита
• Параметры фрейма (защита от кликджекинга)
• Параметры типа контента
• Политика рефералов
• Политика разрешений

Аутентификация:

• JWT-подобные токены с подписями HMAC.
• Файлы cookie только для HTTP (защита XSS)
• Безопасные файлы cookie в производстве (только HTTPS)
• Срок действия сессии 7 дней.

Ограничение скорости:

• Пользовательский ограничитель скорости в памяти.
• Вход: 10 запросов/мин.
• Регистрация: 10 запросов/мин.
• Конечные точки API: 100 запросов в минуту.

Защита данных:

• Хеширование пароля с помощью bcryptjs (10 раундов)
• Подготовленные заявления через Prisma (защита от SQL-инъекций)
• Проверка электронной почты с помощью кодов, ограниченных по времени
• Защита CSRF с помощью файлов cookie SameSite.

Интернационализация

• Многоязычная поддержка — русский и английский.
• Динамическое переключение языка — по выбору пользователя
• Комплексные переводы — переведены все элементы пользовательского интерфейса.
• Расширяемая система — легко добавлять новые языки

Система электронной почты

• 5 типов электронной почты:
• Verification Code — 6-значный код для регистрации.
• Приветственное письмо — после завершения регистрации
• Электронная почта сертификата — сертификат в формате PDF после покупки.
• Подарок получен — уведомление получателю.
• Подарок отправлен — подтверждение отправителю
• HTML-шаблоны — стилизованные электронные письма с брендингом.
• Интеграция SMTP — SMTP Mail.ru с SSL

Мультиплатформенная архитектура

• Маркетинговый уровень (Framer) — привлечение пользователей и информация.
• Уровень приложений (Next.js) — основные функции и транзакции.
• Бесшовная передача управления — четкий поток пользователей между платформами.
• Структура API
• Конечные точки RESTful — организованы по ресурсам.
• Защита промежуточного программного обеспечения — аутентификация на уровне маршрута.
• Управление доступом на основе ролей — роли ПОЛЬЗОВАТЕЛЬ и АДМИН.
• Обработка ошибок — последовательные ответы на ошибки.
• Проверка ввода — проверка схемы Zod.
• Проектирование базы данных
• Нормализованная схема — эффективные отношения
• Первичные ключи UUID — безопасность и масштабируемость
• Поля JSON — гибкое хранение метаданных
• Индексы — оптимизированные запросы
• Транзакции — атомарные операции для критических потоков.
• Государственное управление
• Рендеринг на стороне сервера — Маршрутизатор приложений Next.js.
• Состояние на стороне клиента — перехватчики и контекст React.
• Управление сеансами — аутентификация на основе файлов cookie.
• Обновления в реальном времени — оптимистичные обновления пользовательского интерфейса.

Качество кода

• TypeScript — полная безопасность типов.
• ESLint — линтинг кода
• Prisma — типобезопасные запросы к базе данных.
• Компонентная архитектура — повторно используемые компоненты React.

Тестирование и отладка

• Ручное тестирование — комплексное тестирование функций.
• Журнал ошибок — подробное журналирование консоли.
• Мониторинг PM2 — мониторинг процессов и журналы
• Тестирование вебхуков Stripe — симуляция событий.

Развертывание

• Рабочий процесс на основе Git — контроль версий
• Сценарии автоматического развертывания — развертывание одной командой.
• Управление средой — отдельные конфигурации разработки/продукта.
• Обновления с нулевым временем простоя — плавный перезапуск PM2.

Оптимизация производительности

• Оптимизация Next.js:
• Генерация статических страниц, где это возможно.
• Оптимизация изображения
• Разделение кода
• Сжатие включено
• Оптимизация базы данных:
• Индексированные запросы
• Эффективные соединения
• Пагинация для больших наборов данных
• Оптимизация API:
• Заголовки кэширования ответов
• Эффективная выборка данных
• Пакетные операции, где это применимо.

Задача 1: Интеграция маркетинга с приложениями

Проблема: создание единого пользовательского интерфейса между маркетинговой целевой страницей и основным приложением.

Решение:

• Разработан единый брендинг на обеих платформах.
• Реализованы четкие призывы к действию на целевой странице.
• Создан плавный поток перенаправления в основное приложение.
• Гарантированный пользовательский контекст сохраняется во время перехода

Проблема 2. Точность отображения сертификата

Проблема: PDF-сертификаты не соответствовали предварительному просмотру визуального дизайнера (смещение 40–60 пикселей).

Решение:

• Реализован рендеринг Canvas на стороне сервера с использованием node-canvas.
• Сопоставление систем координат между холстом браузера и PDF.
• Добавлены настройки смещения Y для каждого элемента.
• Достигнуто точное попиксельное соответствие между предварительным просмотром и PDF.

Задача 3: Стабильность сервера

Проблема: ежедневные сбои сервера (502 Bad Gateway) из-за конфликтов портов и процессов-зомби.

Решение:

• Настроен PM2 с правильными задержками перезапуска и ограничениями памяти.
• Настройте systemd для автозапуска PM2.
• Реализованы скрипты очистки процессов.
• Добавлен мониторинг и оповещения

Проблема 4: Сложность платежного потока

Проблема: обработка как новых, так и существующих пользователей во время оформления заказа с автоматическим созданием учетной записи.

Решение:

• Реализована идемпотентная обработка веб-перехватчиков.
• Создана логика поиска/создания пользователя в обработчике веб-перехватчика.
• Добавлена генерация токена входа для простой аутентификации.
• Обработка крайних случаев (существующие пользователи, неудачные платежи)

Показатели проекта

База данных:

• ~15000 пользователей
• ~310 000 деревьев (доступно 150 500)
• ~20000 заказов
• Общий доход ~100 000 000 евро

Производительность:

• Время сборки: ~22 секунды
• Холодный старт: <1 секунды
• Горячая перезагрузка: <200 мс
• Нулевые уязвимости безопасности (аудит npm)

Кодовая база:

• Покрытие TypeScript: 100%
• Конечные точки API: 40+
• Компоненты React: 30+
• Модели базы данных: 8

Платформы:

• 1 маркетинговая целевая страница (Framer)
• 1 основное приложение (Next.js)
• Бесшовная интеграция между платформами

• Ограничение скорости с помощью Redis для распределенных систем.
• Интеграция аналитики (Google Analytics)
• Уведомления в приложении
• Поддержка PWA
• Мобильное приложение (React Native)
• Расширенная отчетность и экспорт
• Дополнительные способы оплаты
• Мультивалютная поддержка
• Расширенные функции маркетинговой целевой страницы.
• A/B-тестирование для оптимизации конверсии.
• Тип проекта: полнофункциональная платформа электронной коммерции с интеграцией маркетинга.
• Роль: Full-Stack разработчик
• Технологии: Framer, Next.js, React, TypeScript, PostgreSQL, Stripe, Prisma.
• Статус: ✅ Производство готово и развернуто
• Примечание. Домены предназначены только для демонстрации портфолио.