> Warning: This [xlinks.pro](https://www.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](https://www.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.

```
C - Create
R - Read
U - Update
D - Delete
```

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

## Why I build this MERN Stack Application?

[Me](https://twitter.com/AbhiDadhaniya3) and my developer friend [Rohan K.](https://twitter.com/rohan_jpeg) were 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](https://reactjs.org/)) or backend (Node.Js & Express.Js). ![xlinks.pro](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7o6zu7847lm78fgy95ek.jpg) For trying purpose, I started that functionality to implement with [passport.js](https://www.passportjs.org/) 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.

> Tip: Here is the difference between [authorization and authentication](https://www.onelogin.com/learn/authentication-vs-authorization).

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.

1.  [react-google-login](https://www.npmjs.com/package/react-google-login)
2.  [react-oauth/google](https://www.npmjs.com/package/@react-oauth/google)

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

-   Cors
-   Dot env
-   Express
-   Mongoose

## 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)

```
rm -rf <filename or foldername>
```

## About xlinks.pro

First of all, user have to [singin in with google](https://www.xlinks.pro/signin) in this [application](https://www.xlinks.pro/). 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](https://www.npmjs.com/package/react-share) npm package. (where we can integrate with all social media sharing links.)

> Tip: I used [toastify](https://www.npmjs.com/package/react-toastify) ([official website](https://fkhadra.github.io/react-toastify/introduction/)) to give better ui and ux in xlinks.pro

## Conclusion

Thanks for reading this blog. Hope you understood about [xlinks.pro](https://xlinks.pro/) Don't forget to create your profile in xlinks and add your profile's link your all social media account.

xLinks is a MERN Stack web app to create links for social media bio.

1 Posts found for MERN Stack

xLinks pro - Clone of Bio.link

Want to build brand website?

1 Posts found for MERN Stack

xLinks pro - Clone of Bio.link

Get the latest updates

Want to build brand website?