Приложение для центра переливания крови: как дизайн превращается в рабочий продукт
Мы не рисуем красивую презентацию — мы отдаём рабочий продукт. Взяли дизайн приложения для донорства крови «Blood Care» и собрали из него живое full-stack приложение: 32 экрана, три языка, реальная база данных. Развёрнуто на боевом сервере, открывается по ссылке — заходи и тыкай.
Ты видел десятки красивых макетов приложений, которыми нельзя пользоваться — это просто картинки в Figma. Этот кейс про обратное: мы берём дизайн и превращаем его в настоящее работающее приложение с базой данных и языками. В качестве показательного примера собрали приложение для центра переливания крови — и развернули его так, чтобы любой человек мог открыть ссылку и походить по нему вживую.
Проблема: дизайн есть, а рабочего продукта — нет
Красивый макет ≠ приложение
Дизайн выглядит отлично, но им нельзя пользоваться — это статичная картинка, а не продукт.
Донорство живёт в звонках и таблицах
Заявки на кровь, поиск доноров, совместимость групп — обычно всё разрозненно и вручную.
Один язык теряет аудиторию
В Казахстане продукту нужны и русский, и казахский — иначе часть людей отваливается.
«С нуля» — долго и дорого
Классическая разработка съедает месяцы ещё до первого рабочего экрана.
Теряете заявки жильцов в переписке и Excel? Соберём такой же бот под ваш отдел.
Разбор задачи бесплатно →Решение: рабочее приложение из дизайна — быстро и по-настоящему
Мы перенесли дизайн в живой продукт: онбординг, регистрация и вход, настройка профиля донора, главная, заявки на кровь, каталог доноров, поиск, чат, уведомления, справочник центров и скорой, таблица совместимости групп, настройки — около 32 экранов, все на трёх языках, на реальной базе данных. Создание заявок и доноров действительно сохраняется.
Next.js 16
Быстрый фронтенд с серверным рендерингом и SEO-готовностью
Nest.js 11
Надёжный бэкенд-API: заявки, доноры, чат, уведомления
Prisma + база данных
Живые данные — создание заявок и доноров сохраняется
next-intl
Три языка (рус/каз/англ) из коробки, переключение на лету
NextAuth
Вход и профили доноров
Framer Motion
Плавные переходы — ощущение нативного приложения
Путь пользователя
- 1
Онбординг — три экрана о донорстве, сразу с выбором языка
- 2
Регистрация и вход по номеру, подтверждение кода, настройка профиля донора
- 3
Главная — статус донора, группы крови, недавние заявки, вклад сообщества
- 4
Заявки на кровь — список с фильтром по группе и городу, детальная страница заявки
- 5
Доноры и поиск — каталог доноров, поиск по группе и тегам, профиль донора
- 6
Связь — чат, уведомления, справочник центров и скорой со звонком
Все экраны открываются без регистрации — демо можно свободно потыкать. А создание заявок и доноров реально пишется в базу данных.
Архитектура коротко
Браузер → Next.js (фронтенд, три языка)
→ Nest.js (API): заявки, доноры, организации, чат, уведомления
→ Prisma → база данных (живые данные)
Развёрнуто на нашем сервере и доступно по ссылке
Хочешь так же? Разработка чат-ботов под твою нишу — от приёма заявок до движения сделок.
Заказать чат-бота →Почему это не «демка на выброс»
Настоящий бэкенд
Не хардкод в вёрстке, а полноценный API с валидацией и базой данных.
Развёрнуто и живёт
Приложение крутится на боевом сервере, а не только на ноутбуке разработчика.
Три языка сразу
Локализация заложена в архитектуру, а не прикручена сбоку.
Чистая кодовая база
Переиспользуемые компоненты — брендировать и расширять легко.
Было → Стало
| Было | Стало | |
|---|---|---|
| Дизайн | Картинка в Figma, которой нельзя пользоваться | Рабочее приложение по ссылке |
| Языки | Один язык | Рус / каз / англ, переключение на лету |
| Данные | Статичные заглушки | Живая база: заявки и доноры сохраняются |
| Срок | Месяцы классической разработки | Рабочий продукт из дизайна за короткий срок |
Чем этот подход отличается
- ✓Отдаём рабочий продукт, а не слайд-презентацию
- ✓Переносим ваш дизайн 1-в-1, без «переделаем всё по-своему»
- ✓Мультиязычность и база данных — с первого дня
- ✓Разворачиваем сами и отдаём живую ссылку
- ✓Стек, на котором легко расти: Next.js + Nest.js
Частые вопросы
Это реальное приложение или макет?
Реальное: full-stack — фронтенд, Nest-бэкенд и база данных. Создание заявок и доноров сохраняется, есть вход и профили. Можно потыкать по ссылке.
На каких языках работает?
Русский, казахский и английский — переключаются на лету, локализация в архитектуре, а не поверх.
Можно собрать так же под нашу клинику или сервис?
Да. Это шаблон подхода: берём ваш дизайн (или делаем свой), превращаем в рабочий продукт с базой и языками и разворачиваем.
Сколько это занимает?
Заметно быстрее классической разработки «с нуля» — потому что переносим готовый дизайн и используем проверенный стек.
А поддержка и доработки?
Кодовая база чистая и модульная — брендирование, новые экраны и интеграции добавляются без переписывания.
Хотите так же — рабочее приложение из вашего дизайна?
Покажем, как ваш продукт превращается в живое приложение с базой и языками. Откройте демо и напишите нам — соберём под вашу нишу.