Frontend разработка (React/Next.js): Landing Page, PWA Scanner, Stripe Checkout

Добрый день!

Задача понятна — нужен frontend (React/Next.js + Tailwind) с интеграцией Stripe Checkout, QR-сканером, PWA-оболочкой и повышенной безопасностью сессий (HttpOnly cookies, device fingerprint, error handling).

У меня есть опыт в создании SPA/PWA приложений, интеграции платежных систем, работе с API и реализации защищенных клиентских решений под Mobile-First.

Могу реализовать лендинг, /success flow со Stripe deep link в Telegram, PWA-активацию с QR/PIN, device binding через fingerprint и стабильную обработку API ошибок.

Ориентировочно: 7–10 дней. После уточнения ТЗ готов стартовать сразу.
…
Цену согласуем после деталей.

Показать оригинал

Перевести

Здравствуйте. Делал проекты с React/Next.js и интеграцией внешних API, поэтому могу собрать как продающий лендинг с оплатой, так и PWA-приложение со сканированием через камеру и защищенным доступом. В результате получите единый продукт, где пользователь проходит путь от оплаты до активации и использования квеста без лишних действий.

Здравствуйте!

Делаю фронтенд на React/Next — задача понятная, и то, что бэкенд готов (внешний REST API), упрощает: фокус чисто на клиентской части. ТЗ грамотное, разберу по ключевым точкам, чтобы видели, что вник, а не пробежал глазами:

— Лендинг + /success: продающая страница с видео и Stripe Checkout; thank-you с anti-remorse loop-видео, social proof на заглушках и deep link в Telegram-бота с подстановкой session_id из Stripe-сессии.

— PWA-активатор: Service Worker (кэш статики + skeleton при потере сети), QR-сканер через нативную камеру + fallback на ручной ввод PIN.

— Hardware binding: генерация fingerprint прямо в onClick-обработчике, SHA-256 через Web Crypto, хэш в payload запроса, без кэширования в стейте — ровно как в ТЗ.
…
— Восстановление: на 403 Device Mismatch — форма OTP (6 цифр, сброс через WhatsApp).

— Приёмка: валидная PWA (зелёный Lighthouse), Error Boundary, обработка таймаутов без «белых экранов» — заложу с самого начала. Совместимость с Cloudflare Under Attack тоже учту.

Пара вопросов, чтобы оценить точно: бэкенд-API уже готов и есть документация (эндпоинты, формат ошибок вроде 403 Device Mismatch)? И Stripe-аккаунт ваш с настроенным Checkout?

С чего удобнее стартовать — с лендинга+оплаты или сразу с PWA-активатора? Готов ответить на детали прямо здесь, в обсуждении проекта.

Сергей, спасибо за подробное ТЗ.

Подскажите, пожалуйста, по дизайну: есть ли уже готовые макеты (Figma, wireframes и т.п.) для лендинга, страницы успешной оплаты и PWA-части, или разработчик должен самостоятельно подготовить UI на основе современных практик и компонентов?

Если готовых макетов нет, возможно, у вас есть референсы или бренд-гайд, которых стоит придерживаться?

Здравствуйте!

У меня большой опыт работы с React.
Готов выполнить поставленное задание.

Предлагаю обсудить детали в личных сообщениях:
У вас уже есть готовый макет дизайна?

Показать оригинал

Перевести

понятно: быстрый лендинг с платежкой + защищенная PWA с доступом к камере смартфона (для сканирования QR/маркеров) и надежной привязкой к вашему готовому REST API.

Вот как я это реализую:

1 Стек: Соберу все на Next.js (React). Для лендинга это даст максимальную скорость и SEO, а для PWA — стабильную архитектуру, защищенную авторизацию (JWT сессии) и бесшовную работу с нативными API телефона (камера, геолокация).

2 Интерфейс: Поскольку сложная графика не нужна, реализую чистый и интуитивный UI в стиле швейцарского минимализма. Фокус будет на 100% Mobile-First, чтобы пользователям было удобно проходить квест на ходу.

3 API и оплата: Без проблем подключу ваш бекенд и настрою платежный шлюз на лендинге.

Показать оригинал

Перевести

👋 Здравствуйте,

Кидал ставку насчет реализации бекенд ядра. Я full stack разработчик, могу взять ваш проект в полную реализацию

Есть большая база хороший специалистов, могу интегрировать в проект хорошего фронта (если вам важно разделить процессы) и будем работать в рамках одной команды

Добрый день! Меня зовут Валентин, и я представляю Arctic Web Agency. Мы - команда, которая специализируется на создании современных и эффективных решений для бизнеса. В личные сообщения смогу предоставить примеры наших схожих работ. Готовы взять ваш проект в работу!

С уважением,
Arctic Web Team
Freelancehunt

Показать оригинал

Перевести

Добрый день! Задача понятна Next.js + Stripe Checkout + PWA с QR-сканером и hardware binding через FingerprintJS.
Реализую:

Landing + /success страница с Deep Link в Telegram
PWA оболочка, Service Worker, Skeleton loaders
QR-Scanner через html5-qrcode + fallback форма
Browser Fingerprinting через Web Crypto API в onClick без кэширования в стейте
HttpOnly куки, без localStorage для токенов
403 Device Mismatch → OTP форма
…
Lighthouse PWA аудит - пройдет. Error Boundary на все API вызовы.
Готов приступить сегодня. Пишите, обсудим.

Показать оригинал

Перевести

Добрый день, сделаю вам лендинг, который можно будет установить на телефон как PWA. Дизайна нет, насколько я понял? Вот пример легкого PWA сайта https://brovist.vercel.app

Показать оригинал

Перевести

Привет, у меня большой опыт с этим стеком, я писал как большие многофункциональные сайты, так и простые лендинги, примеры
https://chess-217-154-170-186.nip.io/library
https://zem.center/
Мой гит: https://github.com/onyx144
Pwa также реализовывал, это в принципе делается за час.

Показать оригинал

Перевести

Добрый день!

Ознакомился с техническим заданием. Готов реализовать фронтенд-часть на React/Next.js с Mobile-First адаптивностью, Tailwind CSS, PWA-оболочкой, Stripe Checkout, страницей успешной оплаты, QR/PIN-активацией и обработкой ошибок API без "белых экранов".

Также реализую логику Deep Link после оплаты, интеграцию с Fingerprint/Web Crypto API для привязки устройства, UI для Device Mismatch/OTP и базовое кэширование через Service Worker.

После ознакомления с бэкенд API и макетами смогу окончательно согласовать этапы реализации.

Готов обсудить детали и приступить к работе.

Показать оригинал

Перевести

Здравствуйте, Сергей!

Это именно мой стек — Next.js 14 App Router
ежедневно в продакшне. Мой живой проект:
anasta.best — лендинг + каталог + Stripe-like
оплата (Monobank Acquiring) + адаптивный
Mobile-First дизайн.

По вашему фронтенду вижу три ключевых блока:
…
1. Landing Page (Next.js 14 + SSR/SSG)
— Адаптивная верстка Mobile-First
— Stripe Checkout интеграция
— Deep Link редирект после оплаты

2. PWA Scanner (защищенная зона)
— QR/штрих сканер через html5-qrcode
(нативная камера без апп)
— HttpOnly куки для сессии
— Fingerprint устройства через Web Crypto API
— Fallback ручной ввод PIN

3. Безопасность сессий
— HttpOnly/Secure/SameSite=Strict куки
— 403 Device Mismatch → форма OTP
— Service Worker для офлайн-режима

Стек: Next.js 14 + TypeScript +

Здравствуйте.
Проект по созданию адаптивного PWA для EdTech с интеграцией REST API и нативных функций смартфона идеально соответствует моей экспертизе и предыдущему опыту.
Я планирую построить надежную фронтенд архитектуру с акцентом на Mobile-First дизайн, обеспечить высокий уровень безопасности сессий и данных через современные протоколы, а также оптимизировать интеграцию платежных систем.
Мои готовые наработки для защищенных PWA, интеграции платежных шлюзов и адаптивной верстки позволят существенно ускорить процесс разработки и гарантировать стабильную работу продукта.
Все детали реализации, конечный бюджет и сроки предлагаю обсудить в личных сообщениях.

Показать оригинал

Перевести

Добрый день, есть опыт разработки проектов на Next. Пишите, обсудим детали.

Показать оригинал

Перевести

Главное в этом проекте — не вёрстка, а заставить PWA с Service Worker и Stripe Checkout нормально жить под Cloudflare в режиме Under Attack. Именно на этом обычно всё ломается: JS-челлендж конфликтует с кэшем Service Worker и с редиректом Stripe. Это первое, что заложу в архитектуру.

Беру Next.js. Лендинг идёт через SSR/SSG — нужен SEO и быстрый Lighthouse-аудит, а защищённая часть активатора уходит в клиентские роуты за авторизацией, где SEO не нужно. Один проект закрывает обе задачи без костылей.

По ключевым местам вижу так:

Stripe Checkout client-side, на странице успешной оплаты вытягиваю order-параметр из сессии и собираю из него Deep Link для редиректа в мессенджер.
QR-сканер на нативную камеру (html5-qrcode) + fallback с ручным вводом PIN.
Слепок устройства генерится прямо в onClick через Web Crypto, SHA-256 уходит в payload — без кэша в стейте, как у вас прописано.
… Токены только в HttpOnly/Secure/SameSite=Strict куках; на 403 Device Mismatch рендерю форму ввода OTP.
Service Worker под офлайн и Skeleton-лоадеры, Error Boundary против белых экранов.
Чтобы дать точную оценку, пара вопросов:

Бэкенд готов — есть документация REST API (эндпоинты активации, OTP, формат ошибки 403)? Без контракта не собрать payload и формы.
Где хостим Next.js — Vercel или свой сервер за Cloudflare? От этого зависит настройка SSR под Under Attack.
Дизайн дадите (Figma) или вёрстку лендинга тоже на мне?
Ответите — назову точный срок и стоимость. По стеку и подводным камням, как видите, уже сориентировался.

Здравствуйте.Работаю с React и Node.js более 9+ лет.Готов к сотрудничеству.

Здравствуйте.

Я NodeJS разработчик. Готов взяться. Пишите, обсудим.

Доброго дня!

Профессионально занимаюсь Frontend разработкой на React/Next.js. Готов реализовать ваш лендинг, PWA Scanner и интегрировать Stripe Checkout. Имею опыт работы с REST API, безопасностью сессий и мобильным сканированием, как указано в ТЗ.

Обращайтесь, обсудим детали.

Показать оригинал

Перевести

Здравствуйте!
Могу реализовать.
Обращайтесь, буду рад сотрудничеству с Вами!

Я NextJs, React, NestJs разработчик. Готов взяться за эту задачу

Мы имеем опыт в разработке PWA-решений и интеграции платежных систем Stripe. Реализуем проект на React/Next.js с фокусом на производительность и безопасность данных при работе с API. Обеспечим качественную верстку лендинга и корректную логику сканера в PWA. Готовы приступить к архитектурному планированию и реализации функционала в ближайшее время.