NaromaxShots — фотосток з нуля: оплата, захищені оригінали та власна адмінка

Огляд проєкту

NaromaxShots — власний фотосток фотографа: пейзажі, дороги й гори з подорожей Північною Америкою, які продаються поштучно за простою royalty-free ліцензією. Власник не хотів маркетплейс, що забирає комісію, чи шаблонний магазин, який не впорається з файлом камери на 30 МБ. Завдання — магазин, що повністю належить автору: фото, покупці, дані й гроші.

Це перетворює «сайт-галерею» на справжню e-commerce систему. Оригінали мають лишатися приватними до оплати, прев’ю — бути достатньо гарними, щоб продавати, але марними для крадіжки, кожен платіж — підтверджуватися на сервері, а власник — фотограф, а не розробник, — має керувати всім з адмін-панелі. Жодна CMS чи конструктор магазинів цього не покриває, тож кожна частина написана з нуля.

Моя роль у проєкті

Я спроєктував і побудував усю платформу сам — від бази даних до адмін-панелі й деплою. Напрями, які я вів і виконував безпосередньо:

• Архітектура: Next.js 15 на строгому TypeScript, PostgreSQL через Prisma, Cloudflare R2 з приватним бакетом для оригіналів і публічним CDN для прев’ю, деплой на Railway
• Пайплайн зображень, що приймає JPEG, PNG, WebP, HEIC з iPhone, Apple ProRAW DNG і RAW з камер Canon, Nikon, Sony, Fujifilm, Olympus і Panasonic, проявляє RAW у WebAssembly і готує прев’ю з водяними знаками, мініатюри та розмиті заглушки
• Оплата двома каналами — Stripe як основний (картки, Apple Pay, Google Pay) і PayPal; ціни беруться лише з бази, кожен платіж підтверджують сервер і підписані вебхуки
• Видача файлів: покупець отримує недоторканий оригінал байт у байт, разом із RAW, за короткоживучими підписаними посиланнями, а резервне посилання приходить на e-mail
• Адмін-панель російською для фото, замовлень, підписників, розсилок, статистики й контенту сайту, а також покрокова інструкція для власника
• Аудит безпеки проти сучасних атак і повторні аудити коду оплати, видачі, розсилок і статистики

Що я зробив: магазин

• Головна зі слайдером на всю ширину: фото, анімація (чотири види), швидкість, стрілки й точки налаштовуються в адмінці
• Каталог з пошуком за назвою, описом і локацією, фільтрами за групами, які задає власник, і кнопкою «показати ще»
• Сторінка фото з прев’ю з водяними знаками до 3200 px, повноекранним переглядом із зумом 2× і 3× та чесною приміткою про те, що отримає покупець: роздільність, розмір і формат оригіналу
• Кошик без реєстрації та оплата кількох фото разом, обране в шапці
• Сторінка замовлення, що стежить за статусом оплати в реальному часі; миттєве скачування кожного оригіналу, «Download all» для кількох фото й резервне посилання на e-mail
• Підписка на розсилку з подвійним підтвердженням і відпискою в один клік
• Структуровані дані Product і Offer для кожного фото, дані Organization, canonical, sitemap і robots

Що я зробив: захист фото

• Оригінали лежать у приватному бакеті, якого публіка не бачить; скачування — це підписане посилання, що діє п’ять хвилин, а кожне замовлення дозволяє обмежену кількість скачувань в обмежений час — обидва ліміти перевіряються на сервері атомарно
• Кожне прев’ю має плиткові водяні знаки й обмежене 3200 px, мініатюри теж марковані, а прев’ю всього каталогу можна перегенерувати, якщо водяний знак змінився
• EXIF-дані прибираються з усього, що може завантажити відвідувач
• Завантажений файл перевіряється декодуванням, а не за розширенням, із захистом від «декомпресійних бомб»

Що я зробив: адмінка

• Дашборд на живих даних
• Завантаження перетягуванням з прогресом для великих файлів, таблиця фото з редагуванням ціни просто в рядку й масовими діями, архів, що видаляє файли зі сховища остаточно
• Групи й значення фільтрів для каталогу; тексти головної, правові сторінки й блоки футера редагуються у візуальному редакторі
• Налаштування слайдера, перемикач розділу відео й діагностика сховища, яка пояснює невдале завантаження простими словами
• Замовлення з історією та діями, експорт замовлень, статистики й підписників у CSV
• Розсилки: редактор markdown із вставкою фото, тестовий лист, пакетне надсилання з автоматичними UTM-мітками й аварійна зупинка
• Статистика за періодами: графік по днях, топ фото, категорії й канали трафіку за UTM-атрибуцією першого дотику
• Налаштування зі зміною пароля та вбудовані діалоги, які однаково працюють на планшеті й комп’ютері

Безпека й надійність

Адмінка захищена паролем у bcrypt і запечатаною http-only сесією з тайм-аутом неактивності, обмеженням спроб входу з експоненційною затримкою, відкликанням сесій і журналом невдалих спроб. Кожен запит до адмінки перевіряється двічі — у middleware та в обробнику, — а кожна зміна перевіряє, звідки вона прийшла. Вебхуки перевіряються за підписом, дедуплікуються й звіряються із сумою та валютою в базі; покинуті оформлення замовлень закриваються через 24 години; а продакшн-збірка відмовляється стартувати із секретами-заглушками чи тестовим платіжним драйвером. Суворі заголовки безпеки (CSP, HSTS, захист від фреймів, Referrer- і Permissions-Policy) та ліміти частоти на вхід, оплату, скачування й форми доповнюють картину.

Увесь магазин також запускається локально без жодного зовнішнього ключа завдяки змінним драйверам сховища, пошти й оплати. Якість стережуть юніт-тести й наскрізний тест повної покупки — завантаження, публікація, пошук, покупка, скачування (байти мають збігтися з оригіналом), лист-чек, замовлення в статистиці: 37 із 37 перевірок зелені.