xLinks pro — Clone of Bio.link

Warning: This xlinks.pro is not working right now because of I’ve hosted this web app in heroku and heroku is no more free to deploy backend apps.

Recently, I’ve build a platform xlinks.pro to link all social media links together. I’ve used MERN Stack technology to develop this full stack application. I’ve implemented CRUD operations in REST Api. If you don’t know about CRUD operations, Don’t worry, I’m here to explain.

It is the kind of database (MongoDB) operations in backend with the REST Api.

Why I build this MERN Stack Application?

Me and my developer friend Rohan K. are working on a large scale project where I was working on backend authentication and all kind of stuffs like that. When, I was dealing with google signin, I don’t know that how can I deal with google login and even I also don’t know that Can I build that functionality using client ( React) or backend (Node.Js & Express.Js). For trying purpose, I started that functionality to implement with passport.js which is a popular library for authorization in Javascript. Passport.Js has so many strategies to authenticate user. Also they’ve strategies for third party authentication.

After dealing with passport.js with Node.Js and Express.Js, I feel tired and hard way to implement with google login. Then I’ve tried to find the answer : to implement google signin using react package and I founded packages to integrate google signin with React.Js. There are 2 popular packages to integrate with google signin.

Both are good packages to integrate signin functionality in react application. But I was facing some problems while installing 1st react-google-login package where it was showing that react-google-login doesn’t support react > 18. That’s why I was facing some problems in build process of deployment and I couldn’t found any solutions to fix these npm errors and finally at the end, I decreased versions of react, react-dom and react-scripts and I fixed all errors of my application.

Features of this MERN Stack application

• Google login function on client side
• Beautiful UI & UX using Tailwindcss

Dependencies

Client side

• Toastify
• React-google-login
• Axios
• React icons
• React meta tags
• React share : to share in twitter
• Tailwindcss, Autoprefixer, Postcss

Server side

Purpose to develop this application

• To implement CRUD operations in Api.
• To create REST Api.
• To implement signin functionality — integrated with google

Quick tips for terminal while installing npm packages

• ctrl + c to break the terminal processes.
• --force to install any packages forcessfully.
• To delete file or folder In Linux terminal (or git)

First of all, user have to singin in with google in this application. After signin, User can go to dashboard and create their profile by filling their social media links data in a form and then When user click on update profile, This application takes little bit time to add userdata in database. Then, user can share their profile in twitter where I’ve used react-share npm package. (where we can integrate with all social media sharing links.)

Conclusion

Thanks for reading this blog. Hope you understood about xlinks.pro Don’t forget to create your profile in xlinks and add your profile’s link your all social media account.

Originally published at https://blogs.abhidadhaniya.com.