xLinks.pro — клон bio.link

Недавно я создал платформу xlinks.pro для объединения всех ссылок на социальные сети. Я использовал технологию MERN Stack для разработки этого полнофункционального приложения.
Я реализовал CRUD-операции в REST Api. Если вы не знаете об операциях CRUD, не волнуйтесь, я здесь, чтобы объяснить.

C - Create
R - Read
U - Update
D - Delete
Вход в полноэкранный режим Выход из полноэкранного режима

Это вид операций с базой данных (MongoDB) в бэкенде с помощью REST Api.

Почему я создал это приложение на основе стека MERN?

Я и мой друг-разработчик Рохан К. работаем над большим проектом, в котором я занимался аутентификацией бэкенда и всеми подобными вещами. Когда я имел дело с google signin, я не знал, как я могу работать с google login и даже я не знал, что я могу построить эту функциональность, используя клиент (React) или бэкэнд (Node.Js & Express.Js).

Для пробы я начал реализовывать эту функциональность с помощью passport.js, который является популярной библиотекой для авторизации в Javascript. Passport.Js имеет так много стратегий для аутентификации пользователя. Также есть стратегии для аутентификации третьих лиц.

Вот в чем разница между авторизацией и аутентификацией.

После работы с passport.js с Node.Js и Express.Js, я почувствовал усталость и трудный способ реализовать авторизацию через google login.
Тогда я попытался найти ответ: реализовать google signin с помощью пакета react, и я нашел пакеты для интеграции google signin с React.Js.
Есть 2 популярных пакета для интеграции с google signin.

  1. react-google-login
  2. react-oauth/google

Оба пакета хороши для интеграции функциональности signin в приложение react.
Но при установке первого пакета react-google-login я столкнулся с некоторыми проблемами, когда он показал, что react-google-login не поддерживает react > 18.
Поэтому я столкнулся с некоторыми проблемами в процессе сборки и развертывания, и я не мог найти никаких решений, чтобы исправить эти ошибки npm, и, наконец, в конце концов, я уменьшил версии react, react-dom и react-scripts и исправил все ошибки моего приложения.

Особенности этого приложения на MERN Stack

  • Функция входа в Google на стороне клиента
  • Красивый UI & UX с использованием Tailwindcss

Зависимости

Клиентская часть

  • Toastify
  • React-google-login
  • Axios
  • React иконки
  • Мета-теги React
  • React share : поделиться в twitter
  • Tailwindcss, Autoprefixer, Postcss

Серверная сторона

  • Cors
  • Dot env
  • Express
  • Mongoose

Цель разработки данного приложения

  • Реализовать CRUD операции в Api.
  • Создать REST Api.
  • Реализовать функциональность входа в систему — интеграция с google

Быстрые советы для терминала при установке пакетов npm

  • ctrl + c для разрыва процессов терминала.

  • --force для принудительной установки любых пакетов.

  • Для удаления файла или папки в терминале Linux (или git)

rm -rf <filename or foldername>
Войдите в полноэкранный режим Выйти из полноэкранного режима

Прежде всего, пользователь должен авторизоваться в этом приложении с помощью google.
После входа, пользователь может перейти на приборную панель и создать свой профиль, заполнив свои ссылки на социальные сети данными в форме, а затем, когда пользователь нажимает на обновить профиль, это приложение занимает немного времени, чтобы добавить данные пользователя в базу данных.
Затем пользователь может поделиться своим профилем в twitter, где я использовал пакет react-share npm. (где мы можем интегрироваться со всеми ссылками на социальные сети).

Я использовал toastify (официальный сайт), чтобы улучшить ui и ux в xlinks.pro.

Заключение

Спасибо, что прочитали этот блог. Надеюсь, вы поняли о xlinks.pro Не забудьте создать свой профиль в xlinks и добавить ссылку на свой профиль во все социальные сети.

Оцените статью
devanswers.ru
Добавить комментарий