xLinks.pro - clone of bio.link
Tags: react, node, npm, javascript
Published: 2022-07-19 04:50:47

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) are working on a big 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.
> 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) 

```bash
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.)
> 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.