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.
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 and my developer friend Rohan K. 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) 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.
Here is the difference between authorization and 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
- 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 + cto break the terminal processes.--forceto 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 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.)
I used toastify (official website) to give better ui and ux in xlinks.pro
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.
Top comments (0)