Frontend розробка (React/Next.js): Лендінг Пейдж, PWA Сканер, Stripe Чек-аут

Доброго дня!

Завдання зрозумів — потрібен 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-сканером і прив'язкою апаратного забезпечення через FingerprintJS. Реалізую:

Landing + /success сторінка з Deep Link в Telegram
PWA оболонка, Service Worker, Skeleton loaders
QR-сканер через 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 також реалізовував , це в принципі робиться за годину

Доброго дня!

Ознайомився з технічним завданням. Готовий реалізувати frontend-частину на 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. Лендінг (Next.js 14 + SSR/SSG)
— Адаптивна верстка Mobile-First
— Інтеграція Stripe Checkout
— Deep Link редирект після оплати

2. PWA Сканер (захищена зона)
— 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 та нативних функцій смартфону ідеально відповідає моїй експертизі та попередньому досвіду.
Я планую побудувати надійну frontend архітектуру з акцентом на 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. Готові розпочати архітектурне планування та реалізацію функціоналу найближчим часом.

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

Перекласти