Burnotes

Это проект на Next.js, демо доступно по адресу burnotes.com и в телеграм боте в качестве Telegram Mini App @burnotes_bot.

С помощью данного web-приложения можно создавать секретные защищенные шифрованием записки, которые сохраняются в базу данных Redis. Шифрование происходит на клиенте и сервер отправляется только зашифрованная записка. После запроса записки по API записка удаляется. Также записка хранится ограниченное время.

TODO:

• Тестирование
• GitLab CI & GitHub Actions
• docker-compose.yml для сборки и деплоя production
• Helm Chart для деплоя в кластер Kubernetes
• Подключить что-то типа trunk.io к среде разработки
• Разобраться с первым рендерингом после сборки приложения

Сборка

Автоматическая сборка и запуск

На данный момент сборка production среды полностью делегирована сервису vercel.com, поэтому в данной инструкции описана только сборка для разработки.

Следует использовать VSCode и расширение Dev Containers для запуска среды разработки. Для этого нужен предустановленный Docker.

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

• Установите Docker
• Установите VSCode
• Установите плагин Dev Containers
• Клонируйте проект Burnotes
• Откройте этот проект в VSCode

VSCode должен предложить открыть данный проект в контейнере - согласитесь.

Если этого не произошло, запустите Command Palette

• Для Mac: ⌘ + SHIFT + P
• Для Win: ...чтототам... + SHIFT + P

введите и запустите команду:

>Dev Containers: Rebuild Container

В процессе запуска будет выполнено:

• сборка среды
• установка необходимых зависимостей,
• запуск Redis
• запуск приложения

Приложение будет доступно по адресу http://localhost:3000.

Сервер можно остановить командой CTRL+C в терминале.

Вы можете выйти из этой среды чтобы запустить проект локально. Выполните в Command Palette:

>Dev Containers: Reopen Folder Locally

Кастомизация среды VSCode

Вы можете добавить нужные расширения в эту среду отредактировав массив расширений в файле .devcontainer/devcontainer.json. По умолчанию будут установлены следующие расширения:

• unifiedjs.vscode-mdx - MDX – поддержка языка MDX (Markdown + JS)
• esbenp.prettier-vscode - Prettier - Code formatter - форматирование кода
• ms-azuretools.vscode-docker - Docker for VSCode поддержка Docker
• cweijan.vscode-redis-client - Redis - UI клиент базы данных Redis для VSCode. В Sidebar появится возможность подключиться к БД Redis и просматривать записи.
• bradlc.vscode-tailwindcss - Tailwind CSS IntelliSense - подсветка синтаксиса препроцессора Tailwindcss.
• Gruntfuggly.todo-tree - Todo Tree - предоставляет возможность просматривать добавленные в код TODO списком

Ручная сборка и запуск

Для начала нужно установить зависимости (для разработки)

npm install --include=dev

В термиале VSCode вы можете остановить автоматически запущенный сервис и выполнять сборку/запуск самостоятельно используя команды:

• npm run dev - сборка и запуск приложения
• npm run build - сборка приложения
• npm run lint - запуск линтера

Конфигурация (.env)

Для конфигурации используется файл .env который необходимо создать в корне проекта.

Отсутствие файла .env на данный момент не критично, т.к значения по умолчанию, определяемые программно, подходят для среды разработки. Но рекомендуется создать файл .env в корне проекта, можно использовать .env.example. Он также валиден для запуска среды разработки.

Env. Variable	Default val	Description
REDIS_HOST	redis	Адрес Redis
REDIS_PORT	6379	Порт Redis
REDIS_PW		Пароль Redis
REDIS_EX	86400	Значение хранения записки по умолчанию (1 день)
REDIS_EX_INF	false	Если указано true записка хранится до прочтения

Локализация

Файлы локализации находятся в папке src/lang. Все файлы локализации, кроме ru.json, сгенерированы Chat GPT и представляют собой машинный перевод файла ru.json.

Возможные проблемы

Первый запуск

Первый запуск требует какое-то время. Приложение не будет доступно по адресу пока не закончится рендеринг. Можно следить за процессом в терминале (○ Compiling / ...) При первом запуске приложение может некорректно отображаться в браузере. Просто перезагрузите страницу. Проблема повторится только при следующей сборке.

Проблемы с контейнерами среды разработки

Обычно проблем никаких нет, но возникали сложности которые решались пересборкой контейнеров из VSCode. Предварительно можно удалить контейнеры docker компной docker rm <container_id> а также директории:

• node_modules
• .next

Дополнительно

Ниже представлен список ссылок на документацию основных продуктов которые используются в проекте:

• Next.js Documentation - фреймворк для React
• Next.UI Documentation - UI Kit
• Next.js internationalization (i18n) - Библиотека для локализации
• @lottiefiles/dotlottie-react - Библиотека для воспроизведения анимаций Lottie
• Zod - Библиотека валидации форм
• redis - База данных приложения

Развертывание на Vercel

Самый простой способ развернуть это приложение в production - использовать платформу Vercel от создателей Next.js.

Документацию по развертыванию Next.js.