Недавно я создал платформу 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.
- react-google-login
- 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>
О xlinks.pro
Прежде всего, пользователь должен авторизоваться в этом приложении с помощью google.
После входа, пользователь может перейти на приборную панель и создать свой профиль, заполнив свои ссылки на социальные сети данными в форме, а затем, когда пользователь нажимает на обновить профиль, это приложение занимает немного времени, чтобы добавить данные пользователя в базу данных.
Затем пользователь может поделиться своим профилем в twitter, где я использовал пакет react-share npm. (где мы можем интегрироваться со всеми ссылками на социальные сети).
Я использовал toastify (официальный сайт), чтобы улучшить ui и ux в xlinks.pro.
Заключение
Спасибо, что прочитали этот блог. Надеюсь, вы поняли о xlinks.pro Не забудьте создать свой профиль в xlinks и добавить ссылку на свой профиль во все социальные сети.