Nlocker

Веб-приложение, созданное для иллюзионистов и любителей фокусов

О проекте

Nlocker — это веб-приложение, созданное для иллюзионистов и любителей фокусов, которое работает через браузер и предназначено для розыгрыша друзей. Приложение имитирует процесс разблокировки смартфона друга, но в реальности позволяет узнать введенный им код. Оно подходит для устройств с операционными системами Android и iOS и предлагает гибкие настройки интерфейса.

Требования

Простота использования, понятный интерфейс
Возможность выбора между Android- и iOS-интерфейсами
Настройки экрана блокировки: фоны, варианты паролей (4 цифры, 6 цифр, буквенные)
Встроенные обучающие материалы в текстовом и видеоформатах
Интеграция с телеграм-ботом для генерации ключей доступа и предоставления материалов
Устойчивость системы при большом количестве пользователей (до 20 000)
Надежная защита от несанкционированного использования

Frontend

Next JS

Backend

Nest.js

UX/UI design

Figma

Админ-панель:

Strapi

Этапы работ

UX-макеты

На первом этапе был разработан полный дизайн веб-приложения. Мы сосредоточились на создании простого интерфейса.

Основное внимание уделено деталям экранов блокировки Android и iOS, чтобы пользователь мог легко настроить стиль пароля и фон.

Важным элементом дизайна стало создание подсказок для упрощения использования приложения.

Авторизация + базовая архитектура

Мы реализовали функционал авторизации с использованием уникальных ключей доступа.

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

Была спроектирована архитектура, которая обеспечивает стабильность работы при большом количестве пользователей.

Создание страницы настроек и вспомогательных страниц

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

Также добавлены экраны с обучающими материалами: текстовые инструкции и встроенные видео. Эти страницы помогают пользователю настроить приложение и освоить фокус.

Создание анимаций для андроида и айфона

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

Создание телеграм бота для генерации кодов

Мы создали телеграм-бота, который генерирует и отправляет пользователям уникальные ключи доступа.

Бот также предоставляет ссылки на веб-приложение, обучающие материалы и отвечает на вопросы пользователей.

Это значительно упростило процесс взаимодействия с клиентами.

Интеграция телеграм бота с платежной системой

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

Результат

В результате был разработан удобный веб-сервис, который позволяет пользователям легко разыгрывать друзей с помощью фокуса. Nlocker поддерживает оба интерфейса (Android и iOS), предлагает гибкие настройки экрана блокировки и защищен от пиратского использования благодаря системе уникальных ключей. Приложение стабильно работает с большим количеством пользователей, а встроенные обучающие материалы делают его доступным даже для новичков. Простота использования и интеграция с телеграм-ботом обеспечили высокую популярность проекта среди аудитории.