Подключите нашего Telegram-бота для уведомлений о новых проектах
Доработка приложения NODE.JS
Разместить заказ

s
Заказчик
Отзывы фрилансеров:
+ 0
- 0
Зарегистрирован на сайте 1 год и 1 месяц
Бюджет:
65 000 руб
797.61 $ — 700.15 €
Есть не завершенное приложение на NODE.JS
Функционал на данный момент реализован на 90%
Цель: Привести текущее приложение в соответствие с дизайн-макетом, улучшить адаптивность, доработать систему приглашения рефералов и внутренний магазин. Обеспечить приятный, мягкий и интуитивно понятный интерфейс с подсказками. (опираясь на макет)
Общие задачи:
Сверстать все элементы согласно макету (HomePage, Leaderboard, Gifts, и т.д.).
Сделать адаптивную верстку для мобильных и десктопных устройств.
Проверить и доработать систему реферальных приглашений.
Доработать встроенный магазин: покупка информационных товаров за внутриигровые монеты.
Обеспечить единый стиль: мягкая цветовая палитра, плавные переходы, понятные иконки и тултипы.
Верстка и адаптивность:
Сравнить текущий код (HomePage-2.tsx, layout.tsx, page.tsx) с дизайн‑макетами.
Исправить несоответствия (шрифты, отступы, размеры кнопок, прогресс‑бары).
Обеспечить адаптивность для мобильных устройств внутри Telegram WebApp (ориентации портрет/альбом).
Убедиться в корректной работе в встроенном браузере Telegram на iOS и Android.
Система приглашений (рефералов) Система приглашений (рефералов):
-Проанализировать текущую логику и API-эндпоинты (TRPC) для генерации и отслеживания реферальных ссылок.
-Проверить передачу initData Telegram WebApp и корректность отображения пригласительного экрана.
-Реализовать всплывающие подсказки для пользователя: как пригласить друга, что он получит за приглашение.
-Обеспечить корректный подсчет приглашенных и выдачу бонусов (энергия, монеты).
-Покрыть юнит-/e2e-тестами основные сценарии работы рефералов.
Внутренний магазин:
-Проверить текущую реализацию API-методов покупки товаров и списания монет.
-Добавить возможность выводить список товаров (информации): название, описание, стоимость.
-Реализовать модальное окно с подробным описанием товара и подтверждением покупки.
-Обновить баланс монет после успешной транзакции без перезагрузки страницы.
-Обеспечить ограничения: купить можно только при достаточном балансе.
-Добавить подсказки на товарах (info‑tooltip) о выгодах покупки.
Требования к UI/UX:
-Цветовая палитра: мягкие градиенты, pastel-оттенки по палитре макета.
-Типографика: использовать шрифт Mont, размеры текста не менее 12 px для читабельности.
-Иконки и кнопки: закругленные углы (border-radius 12 px–16 px), мягкие тени.
-Анимации: плавное заполнение прогресс‑баров, микровзаимодействия нажатия (tap‑эффект).
-Подсказки: тултипы при наведении/тапе на сложных элементах (реферальная ссылка, товар).
-Интуитивность: основные действия (покормить, погладить, купить, пригласить) должны быть понятны без текста.
Технические требования:
-Стек: Next.js (App Router), React, TypeScript, Tailwind CSS.
-API: TRPC, WebSocket/HTTP для обновления данных.
-Git: работа через feature‑ветки; пулреквесты с описанием изменений.
-Тесты: Unit‑тесты (Jest/React Testing Library) для ключевых компонентов; E2E (Playwright).
-CI/CD: проверка линтером (ESLint), сборка (Next.js), автотесты.
Функционал на данный момент реализован на 90%
Цель: Привести текущее приложение в соответствие с дизайн-макетом, улучшить адаптивность, доработать систему приглашения рефералов и внутренний магазин. Обеспечить приятный, мягкий и интуитивно понятный интерфейс с подсказками. (опираясь на макет)
Общие задачи:
Сверстать все элементы согласно макету (HomePage, Leaderboard, Gifts, и т.д.).
Сделать адаптивную верстку для мобильных и десктопных устройств.
Проверить и доработать систему реферальных приглашений.
Доработать встроенный магазин: покупка информационных товаров за внутриигровые монеты.
Обеспечить единый стиль: мягкая цветовая палитра, плавные переходы, понятные иконки и тултипы.
Верстка и адаптивность:
Сравнить текущий код (HomePage-2.tsx, layout.tsx, page.tsx) с дизайн‑макетами.
Исправить несоответствия (шрифты, отступы, размеры кнопок, прогресс‑бары).
Обеспечить адаптивность для мобильных устройств внутри Telegram WebApp (ориентации портрет/альбом).
Убедиться в корректной работе в встроенном браузере Telegram на iOS и Android.
Система приглашений (рефералов) Система приглашений (рефералов):
-Проанализировать текущую логику и API-эндпоинты (TRPC) для генерации и отслеживания реферальных ссылок.
-Проверить передачу initData Telegram WebApp и корректность отображения пригласительного экрана.
-Реализовать всплывающие подсказки для пользователя: как пригласить друга, что он получит за приглашение.
-Обеспечить корректный подсчет приглашенных и выдачу бонусов (энергия, монеты).
-Покрыть юнит-/e2e-тестами основные сценарии работы рефералов.
Внутренний магазин:
-Проверить текущую реализацию API-методов покупки товаров и списания монет.
-Добавить возможность выводить список товаров (информации): название, описание, стоимость.
-Реализовать модальное окно с подробным описанием товара и подтверждением покупки.
-Обновить баланс монет после успешной транзакции без перезагрузки страницы.
-Обеспечить ограничения: купить можно только при достаточном балансе.
-Добавить подсказки на товарах (info‑tooltip) о выгодах покупки.
Требования к UI/UX:
-Цветовая палитра: мягкие градиенты, pastel-оттенки по палитре макета.
-Типографика: использовать шрифт Mont, размеры текста не менее 12 px для читабельности.
-Иконки и кнопки: закругленные углы (border-radius 12 px–16 px), мягкие тени.
-Анимации: плавное заполнение прогресс‑баров, микровзаимодействия нажатия (tap‑эффект).
-Подсказки: тултипы при наведении/тапе на сложных элементах (реферальная ссылка, товар).
-Интуитивность: основные действия (покормить, погладить, купить, пригласить) должны быть понятны без текста.
Технические требования:
-Стек: Next.js (App Router), React, TypeScript, Tailwind CSS.
-API: TRPC, WebSocket/HTTP для обновления данных.
-Git: работа через feature‑ветки; пулреквесты с описанием изменений.
-Тесты: Unit‑тесты (Jest/React Testing Library) для ключевых компонентов; E2E (Playwright).
-CI/CD: проверка линтером (ESLint), сборка (Next.js), автотесты.
Разделы:
Заказ
Опубликован:
19.04.2025 | 09:43 [поднят: 19.04.2025 | 09:43]