Облачное прогрессивное веб-приложение (PWA) для обмена сообщениями и фото. Создано с использованием Supabase для аутентификации и хранения данных.
Архитектура
Frontend:
Vanilla JavaScript (app.js): основной файл приложения, без фреймворков.
HTML5 (index.html): семантическая разметка, поддержка PWA.
CSS3 (styles.css): кастомные свойства, адаптивность.
Многоязычность (translations.js): поддержка 4 языков, динамическая локализация.
PWA (manifest.json, service-worker.js): офлайн-режим, установка на устройство, пуш-уведомления.
Backend (Supabase):
Аутентификация: Supabase Auth, email + пароль, поддержка восстановления пароля.
База данных: PostgreSQL, таблицы diary_entries, polls, users, push_subscriptions.
Storage: Supabase Storage для изображений.
Функции: серверные функции (functions), например, удаление аккаунта, обработка уведомлений.
Реалтайм: канал для синхронизации данных между пользователями.
API-интеграции
AI: интеграция с внешним AI API (ai-reply.js, ai-insert.js, ai-vote.js), генерация ответов и голосование.
Подходы и методы реализации
Класс DiaryApp:
Инкапсулирует всю логику приложения, хранит состояние, методы для работы с UI, данными и событиями.
Использует отдельные менеджеры для модальных окон и лайков/дизлайков (ModalManager, LikeDislikeManager).
Работа с DOM:
Используется фабрика DOM-элементов для создания записей и опросов без innerHTML (createEntryElement, createPollElement).
Кэширование ссылок на элементы для ускорения работы.
Многоязычность:
Переводы хранятся в объекте, динамически подставляются через метод t(key).
Автоматическое определение языка браузера.
Пуш-уведомления:
Подписка и отписка, баннер для включения уведомлений.
Хранение состояния в localStorage.
Используется VAPID-ключ (config.js).
Работа с изображениями:
Адаптивное сжатие изображений перед загрузкой.
Хранение изображений в Supabase Storage.
Поддержка шаринга изображений через Web Share API.
Опросы:
Многоуровневая структура: polls, poll_options, votes.
Создание, голосование и отображение результатов в реальном времени.
Проверка истечения срока действия опроса.
AI-интеграция:
Генерация записей и ответов с помощью внешнего AI.
Выбор AI-пользователя и настройка длины ответа.
Голосование AI в опросах.
Навигация:
Календарь с визуальными индикаторами записей.
Свайпы и колесо мыши для навигации по месяцам.
Быстрый переход к дате и поиск по записям.
Управление аккаунтом:
Смена имени пользователя.
Удаление всех записей и изображений.
Полное удаление аккаунта.
Используемые паттерны:
Модульность: отдельные классы и серверные файлы Supabase.
Фабрика DOM-элементов: безопасное создание элементов без innerHTML.
Observer: синхронизация пользователей через BroadcastChannel.
Debounce: оптимизация обработки событий ввода.
Кэширование: кэш данных месяца для ускорения запросов.
Интересные и полезные особенности:
PWA: офлайн-режим, установка, нативные уведомления.
Многоязычность: 4 языка, динамическое обновление интерфейса.
AI-генерация: создание записей и голосование в опросах с помощью AI.
Безопасность: строгие проверки, RLS-политики в базе.
UX: свайпы, визуальный календарь, быстрый переход к дате, уведомления.
Шаринг: нативный шаринг записей и изображений.
Адаптивность: мобильный и десктопный режимы, автоопределение устройства.
Пожаловаться
