Обзор моей работы

Birdle (произносится как «баердл») — это клон веб-приложения Medium.com. Он построен с помощью удивительной связки Appwrite и Nuxt3. Я попытался реализовать некоторые функции Medium с помощью Appwrite, используя базу данных NoSQL.

Посмотрите демо-версию здесь: Birdle Demo
Примечание: Пожалуйста, используйте компьютер или ноутбук, так как приложение не полностью оптимизировано для мобильных устройств.

Идея создания этого проекта заключалась в том, чтобы использовать Nuxt3 и Appwrite вместе и изучить их оба.

Поскольку Nuxt все еще находится в бета-версии, я не хотел упустить шанс изучить его на будущее.

Я слышал об Appwrite, но никогда не использовал его, но за последние несколько дней я развернул его в облаке, создал приложение и развернул. Узнал много нового об Appwrite, а сообщество просто потрясающее.

Особенности

• Пользователи могут регистрироваться с помощью magic-link и Google OAuth.
• Следить за пользователями и получать от них последние статьи.
• Создавайте истории и публикуйте их.
• Загружайте аватар пользователя
• Создавать записи в блоге, публиковать и делать черновик
• CRUD над записями блога
• Создавайте публикации
• Получайте последние статьи из блога на приборной панели
• Проверьте всех следующих пользователей
• Добавьте 5 тегов к каждому посту статьи
• Каждый тег можно искать, используя маршрут /tag/[имя_тега].
• Редактировать настройки пользователя
• Управлять публикациями
• Проверьте опубликованные и черновики статей.
• Создание и редактирование публикаций

Технологический стек

| Tech          | Purpose     |
| -----------   | ----------- |
| Nuxt3         | Frontend    |
| Tailwind CSS  | Text        |
| SendInBlue    | Send Emails |
| Vercel        | Deployment  |

Appwrite — парень с бэкендом

Appwrite покорил меня больше, чем firebase. При первом знакомстве с Appwrite я не думал, что это так просто. Единственное, что делает Appwrite потрясающим — это его документация и простой в использовании API.

В этом приложении я использовал Magic-link и аутентификацию Google, базу данных для хранения записей, данных пользователей, публикаций и хранилище для всех медиа, связанных с записями блога и пользователями.

Для получения изображений и имен пользователей с их инициалами пригодился API Avatar. Существует множество сторонних API, предоставляющих эту услугу, но наличие интегрированного API является плюсом для Appwrite.

Nuxt3 — фронтенд

В своих проектах я в основном использую Vue3. Я узнал много нового о Nuxt3 во время создания Birdle. Я столкнулся со многими проблемами, но в итоге нашел решения либо через сообщество, либо покопавшись в кодовой базе Nuxt.

TinyMCE — Конструктор/Конструктор

Как и Medium, Birdle также предоставляет поддержку для добавления статей. Я хотел создать редактор, похожий на Medium, но у меня не было достаточно времени на все эти хлопоты, поэтому я использовал TinyMCE для этой цели. Он справился со своей задачей, и в будущем я создам редактор Medium для Birdle.

TailwindCSS — ведение домашнего хозяйства

Tailwind — это мой основной инструмент для работы с CSS. Я создал все веб-приложение Birdle, используя только Tailwind, и я счастлив, что оно получилось великолепным.

SendInBlue — специалист по электронной почте

Я хотел отправлять электронные письма сразу после регистрации пользователя, но стандартный почтовик больше не существует в Appwrite. Поэтому я использовал SendinBlue для отправки писем.

Будущие улучшения

• Статистика для отдельных постов
• Реализация мобильного пользовательского интерфейса
• Добавить функциональность для пользователей публикаций
• Уведомления
• Оригинальный редактор Medium Editor
• Реализация глобальной коллекции тегов
• Реализация списков
• Функциональность поиска по людям, публикациям и статьям

Категория подачи

Мастера Web2

Ссылка на код

{ pretty embed }

yarn install

yarn dev

yarn build

Дополнительные ресурсы / информация

Скриншоты и промо-видео

Приборная панель

Профиль пользователя

Однопостовая статья

Публикация

Пост опубликован в публикации

Редактор, созданный с помощью TinyMCE

Используемые ресурсы для данных

• Все изображения пользователей в приложении сгенерированы с помощью https://generated.photos/ Link.
• Другие случайные данные постов генерируются с помощью генератора фальшивых данных. Ссылка
• Nuxt3 Beta
• Tailwind CSS

Заключение и мысли

Было весело работать с Appwrite. За последние 3 недели я узнал много нового о создании полнофункционального приложения с нуля с помощью Appwrite.

Appwrite удивителен, но мне бы хотелось поддержки реляционных баз данных. Для меня было в новинку создавать приложение на NoSQL. В целом, спасибо Dev.to и Appwrite за проведение этого замечательного хакатона.