Представляем XdoX — начинайте испытания, регистрируйте свой прогресс и демонстрируйте их всему миру

🤔 Что такое XdoX?

XdoX — это веб-приложение, которое позволяет вам запускать испытания и ежедневно регистрировать свой прогресс. Вы также можете показать миру свой прогресс через свою уникальную страницу профиля. Эти задачи могут быть любыми: от 100DaysOfCode до 30DaysOfRust и даже 60DaysOfCooking!

Это также моя заявка на Hasura x Hashnode Hackathon.

Живая демонстрация / Репозиторий GitHub

❓ Что такое Хасура?

GraphQL — это язык запросов для API со схемой. Он поставляется с несколькими функциями, такими как возможность запрашивать определенные поля, выполнять разбивку на страницы, выполнять запросы агрегации и многое другое.

Однако создание бэкэнда GraphQL сложнее, чем создание простого бэкенда REST, и здесь на помощь приходит Hasura. Hasura предоставляет нам простой способ создать бэкэнд GraphQL, который соединяет нашу базу данных с нашим приложением без необходимости писать одна строка кода!

У Hasura также есть облачное предложение с приличным бесплатным уровнем, так что мы можем приступить к размещению нашего бэкэнда GaphQL, не беспокоясь о затратах. Это также с открытым исходным кодом и самостоятельным размещением.

📚 Стек технологий

Какие все технологии я использовал для XdoX?

Для начала я использовал Hasura для бэкенда своего приложения.

Кроме этого, я использовал следующие услуги -

  • Клерк, чтобы добавить аутентификацию в мое приложение. Он также хорошо интегрировался с Hasura, и я смог защитить свой сервер с помощью JWT Auth (подробнее об этом позже в этой статье).
  • Heroku Postgres для моей базы данных. Он также хорошо интегрировался с Hasura
  • Vercel для размещения моего интерфейса

И вот библиотеки и фреймворки, которые я использовал для приложения -

  • Next.js для интерфейса моего приложения
  • TailwindCSS для стилизации моего интерфейса
  • Radix UI для нестилизованных компонентов пользовательского интерфейса, таких как модальные окна и всплывающие окна.
  • Безголовый интерфейс для переходов
  • Apollo React Client для выполнения запросов GraphQL из моего интерфейса. Он также заботится о кэшировании.
  • Tiptap для текстового редактора с поддержкой уценки, который используется для регистрации прогресса.

🧐 Как работает XdoX?

Это простой трехэтапный процесс. Один регистрирует учетную запись с помощью Google или электронной почты, а затем запускает испытание (например, 100DaysOfCode). Затем каждый регистрирует свой прогресс каждый день.

Затем можно поделиться своей уникальной страницей профиля со всем миром, чтобы продемонстрировать свой прогресс.

Кроме того, нет необходимости каждый день записывать свой прогресс. Приложение построено таким образом, что позволяет вам гибко решать свои задачи. Уехал в отпуск? Нет проблем, XdoX не будет глючить из-за того, что не регистрирует ваш прогресс.

Защита серверной части

Бэкенды имеют прямой доступ к базе данных, и их защита считается лучшей практикой. Мне нужно использовать API GraphQL из моего внешнего интерфейса, и, следовательно, это должен быть общедоступный API. Однако я должен защитить его, чтобы можно было делать только ограниченные несанкционированные и авторизованные запросы.

Поскольку я использовал Clerk для аутентификации пользователей, мне не потребовалось много времени, чтобы реализовать это. Клерк интегрирован с Hasura с использованием шаблонов JWT. Вот документация, объясняющая, как это реализовать.

Здесь мы создаем шаблон JWT из панели управления клерка. Вот как выглядит мой:

При выполнении запроса к API мы передаем заголовок Authorization с токеном-носителем в качестве значения. Это проверяется Hasura с помощью ключа подписи (это устанавливается в Hasura через переменные среды).

Это код во внешнем интерфейсе, который заботится о передаче токена носителя при выполнении запросов:

Мы просто получаем токен носителя, используя функцию getToken, доступную нам в Clerk React SDK, и передаем ее в заголовке Authorization.

Теперь, если токен носителя действителен, к запросу добавляется заголовок X-Hasura-User-Id, содержащий идентификатор пользователя, который делает запрос. Также передаются заголовки для роли user. Обратите внимание, что об этом заботится Хасура.

Я также делаю некоторые неаутентифицированные запросы с ролью viewer. Это было установлено как неавторизованная роль в моем экземпляре Hasura и используется на общедоступных страницах профиля пользователя. Вот код, который заботится о выполнении неавторизованных запросов:

Установка разрешений на уровне строк для данных

Хотя API теперь защищен, по умолчанию никакие данные недоступны. Нам нужно настроить разрешения, и это также позволит нам ограничить данные, к которым можно получить доступ. Например, мы позволим пользователю получать доступ только к своим собственным данным пользователя и только к созданным им личным задачам.

К счастью, Хасура снова делает это очень легко. Давайте посмотрим на пример:

Здесь я настроил разрешения на вставку для роли user таким образом, что можно вставлять строки только там, где столбец user_id равен идентификатору пользователя, делающего запрос (это было передано в качестве заголовка).

Я также разрешаю user обновлять только определенные столбцы. Здесь столбец id создается автоматически с помощью функции gen_random_uuid() PostgreSQL. Поля created_at и updated_at также обрабатываются серверной частью.

Я также добавляю предустановку столбца для столбца user_id, который будет равен заголовку X-Hasura-User-Id. Вот это безумно мощно!

Точно так же я установил разрешения на обновление, выбор и удаление для роли user, где я проверяю, что столбец user_id соответствует заголовку X-Hasura-User-Id.

Для роли viewer я настроил это следующим образом:

Здесь зритель может только выбирать строки из базы данных (то есть только читать данные). Я дополнительно добавил проверку, которая гарантирует, что вызов является публичным.

👓 Чему я научился на этом хакатоне

Хотя я использовал GraphQL в прошлом, мой опыт был весьма ограничен. Кроме того, я никогда не создавал серверную часть GraphQL, я просто использовал общедоступные API-интерфейсы GraphQL. Я также никогда раньше не использовал Hasura и никогда не использовал базу данных SQL для какого-либо производственного проекта.

Этот хакатон дал мне возможность изучить внутреннюю сторону GraphQL с помощью Hasura и понять более глубокие концепции. Я также отлично провел время, работая с базой данных PostgreSQL и узнавая больше о реляционных данных. Это безумно мощно!

✨ Заключение

За последний месяц я работал над XdoX, изучал и узнавал МНОГО нового. Я очень рад видеть, как XdoX работает в реальном мире!

До свидания и хорошего дня! 😁🤞

🔗 Важные ссылки

Первоначально опубликовано на https://blog.anishde.dev.

Дополнительные материалы на PlainEnglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter и LinkedIn. Присоединяйтесь к нашему сообществу Discord.