Дейтинг-приложение в стиле Tinder (Chat и Maps)

Полный гайд по созданию дейтинг-приложения с функциями чата и карт с нуля в FlutterFlow + Supabase.

Суть за 30 секунд

Разбор создания production-ready клона Tinder: свайп-механика, алгоритм мэтчинга, чат в реальном времени, интеграция Google Maps для отображения местоположения мэтчей. Всё на Supabase (Auth, PostgreSQL, Realtime, Storage).

📍 Навигация (Timeline)

Введение и архитектура (00:00 — 03:00)

• 00:00 — Обзор приложения: свайпы, чат, карты
• 02:04 — Экраны приложения: Main (свайпы), Matches, Chat, Map
• 02:44 — Схема базы данных Supabase

База данных Supabase (03:00 — 08:00)

• 03:00 — Таблицы: profiles (1:1 к users), preferences (настройки поиска)
• 03:30 — Таблица swipes — логика свайпов (user_id, target_id, direction)
• 04:00 — Таблица matches — создаётся при взаимном свайпе
• 04:30 — Таблица messages — чат между мэтчами
• 05:00 — Геолокация: столбцы latitude, longitude в profiles
• 05:30 — SQL-функция get_potential_matches с фильтрацией по radius, gender, age

Аутентификация и профиль (08:00 — 15:00)

• 08:00 — Настройка Supabase Auth (email/password)
• 09:00 — Экран Login/Register в FlutterFlow
• 10:00 — Создание профиля: имя, возраст, пол, фото
• 11:00 — Экран Preferences: радиус поиска, пол, возрастной диапазон
• 12:00 — Supabase Storage для аватарок

Свайп-механика (15:00 — 35:00)

• 15:00 — Кастомный виджет свайпа (CardStack)
• 18:00 — API Call: get_potential_matches с фильтрами
• 20:00 — Логика свайпа: запись в таблицу swipes
• 22:00 — Проверка на mutual match → создание записи в matches
• 25:00 — Анимации свайпа (left = no, right = yes)
• 28:00 — Пагинация карточек, подгрузка новых профилей
• 30:00 — Обработка конца списка: “No more profiles”

Список мэтчей (35:00 — 50:00)

• 35:00 — Экран Matches: список взаимных мэтчей
• 38:00 — Запрос из таблицы matches с JOIN на profiles
• 40:00 — Отображение аватарки, имени, расстояния
• 42:00 — Индикатор непрочитанных сообщений
• 45:00 — Навигация к экрану чата при клике

Чат в реальном времени (50:00 — 80:00)

• 50:00 — Экран Chat: список диалогов
• 55:00 — Экран Conversation: отдельные сообщения
• 60:00 — Supabase Realtime: подписка на новые сообщения
• 65:00 — Отправка сообщения: INSERT в messages
• 70:00 — Авто-скролл к последнему сообщению
• 75:00 — Статусы сообщений (sent, delivered, read)
• 78:00 — Удаление сообщений

Интеграция карт (80:00 — 110:00)

• 80:00 — Экран Map: Google Maps виджет
• 85:00 — Получение координат мэтчей из БД
• 90:00 — Отображение маркеров на карте
• 95:00 — Расчёт расстояния между пользователями
• 100:00 — Кастомные маркеры с аватарками
• 105:00 — Геолокация пользователя в реальном времени
• 108:00 — Обновление позиции при перемещении

Настройка фильтров и поиск (110:00 — 130:00)

• 110:00 — Фильтрация по полу, возрасту, расстоянию
• 115:00 — Экран Settings/Preferences
• 120:00 — Slider для выбора радиуса (1–100 миль)
• 125:00 — Отладка code expression: double → int конвертация
• 128:00 — Передача параметров в SQL-функцию

Финальное тестирование (130:00 — 155:00)

• 130:00 — Создание тестовых аккаунтов
• 135:00 — Тест свайпов и мэтчинга
• 140:00 — Тест чата между мэтчами
• 145:00 — Тест карты: отображение мэтчей
• 150:00 — Финальные правки UI

Заключение (155:00 — 162:00)

• 155:00 — Итоги: что изучили
• 160:00 — Возможности расширения функционала

🧠 Ключевые концепции

• Matching Algorithm — взаимный свайп → создание match
• Supabase Realtime — чат обновляется мгновенно без перезагрузки
• Google Maps Integration — маркеры мэтчей на карте
• User Location Tracking — GPS-координаты в profiles
• PostgreSQL Functions — get_potential_matches с фильтрацией
• Supabase Storage — хранение аватарок
• Row Level Security (RLS) — защита данных пользователей

🛠 Практические фишки

• SQL-функция get_potential_matches фильтрует по radius, gender, age за один запрос
• Mutual match: если user A свайпнул B → yes И user B свайпнул A → yes → создаётся запись в matches
• Slider в FlutterFlow имеет баг с code expression — нужна явная конвертация double → int
• Supabase Realtime подписка на messages таблицу для мгновенных обновлений
• Расчёт расстояния: формула Haversine в PostgreSQL функции
• Кастомные маркеры на карте с аватарками через Image.network

📌 Резюме

Фундаментальное руководство по созданию полноценного дейтинг-приложения с нуля. Охватывает все ключевые аспекты: архитектуру БД, свайп-механику, алгоритм мэтчинга, чат в реальном времени и геолокацию. Подходит для понимания сложных production-ready приложений на FlutterFlow + Supabase.