Clone of Gab.com

Dear readers welcome to yet another blog post. Here I am sharing my experience while cloning a social media application Gab.com.

Gab.com introduction-why and what

Well, the virtual existence of every individual and the social togetherness is evolving just like the human cognisance. A similar experience can be unravelled with Gab.com where a user can explore the news, get to know about others, make friends, communicate, share and broadcast. The extensively customised user interface assures the sleeky transition of the user’s journey.

Cloning Gab.com

As in the journey of learning full-stack web development, projects and construct chunks play a vital role in aggressive development learning. For the same, at Masai school, after learning the React-redux in the MERN stack, it was our valour to build something awesome. And at the top of it, the curriculum team had shortlisted the websites for it and our team got Gab.com.

We, the budding-builders-

A team of three includes me (Krishna Kant), Badvel Venkata Srikanth Reddy, Dhirendra Kumar and Jai Yadav

Into the cloning-

First thing first

At first, we decided the priorities to have and assigned responsibilities. In the short period, we focused on implementing more functionalities and eye-catching user-Interface design. We did not bother about pixel-perfect replicas but cared more to add as many features as possible.

So, what did we do?

We implemented the following features and functionalities on our product-

• User sign-up and login authentication from remote server MongoDB database with validation and authorization,
• Customised news feed for the user based on the condition user is logged in or not,
• User posts on his wall and in the groups that he has joined,
• Chatting with his friends on a real-time basis,
• Checkout user’s profiles and add them as friends or follow them,
• Changing the UI-color theme dynamically between dark and light mode,
• Responsive design interacts with a user with the same efficiency for every screen resolutions

Quick snapshots to get a peep inside-

Stack and resources used

We did front-end in React-Redux. Used styled-components, Material-UI, React-icons, sass as front-end UI library. For the back-end, we used Node.js, MongoDB and Express.js.

After making the database, we used Postman to do post, get and patch requests of users’ data and Gab.com’s sharing lobbies like groups

Also, we used MDN, We3School, NMP libraries, Github Repos, for adapting with theoretical implementations. For debugging purposes, Stack Overflow was used a couple of times.

How do we do it?

• In React we used styled-components and customised components,
• We adapted with action dispatch, controllers, reducers and the state as per the redux principle to maintain a real-time state of our web app,
• For smooth navigation, we acquired react’s use-history and react-routes properties,
• Prioritising dynamic page transitions and merges, we utilised functional components wrapped with ES-6 extensions in jsx format to make them reusable,
• Regarding CSS, we considered flex, CSS-positions and advanced CSS like Sass,
• For hovering, zooming and pop-up purpose, we implemented z-index and position property in CSS.
• In the API fetch requests(get, put, patch, delete, post) we used react library-Axios. To make the requests dependent on component loading, we used useEffect as per the life-cycle process of the react components,
• To handle the asynchronous behaviour, we targeted the use of async, await in form of promises,
• To achieve the basic front-end parts, we did DOM manipulations with react conditional rendering,
• We used MongoDB atlas as our remote database for our project data request handlings,
• We kept pushing all our updates to Github in separate branches of all developers and at last, we merged to complete the project.

User-journey

A website in action acts as the platform to serve multiple customers with their variants of demands. Here we have targeted multiple users’ experiences. Let me reveal the mystery of how the user journey unfolds…

Let me introduce you to Jack Sparrow who happens to be a user in our case...sorry, Capt. Jack Sparrow.

As soon as Jack lands on the homepage, he is subjected to eye-catching newsfeeds, left-floating menus and a login/signup button at the top of the navigation bar. A navigation bar is all that he needs.

Jack likes to explore and hence scrolls down to reveal more of the news-buzz on the main page. After reading a few articles, Jack is finally convinced to have his own space where he can share his lifetime sea-voyage experiences. So, he clicks on the Signup button. At the very next moment, he has subjected to a pop-up page where he has to enter his email id and password to make an account.

Now, after login, he can post, comment, like and express his thoughts about the rapidly changing century.

Alright Pal, what is happening behind the curtain?

Behind the curtain? Not magic but backend…

So, when Jack Sparrow signs up, the credentials entered by him is validated by the backend before writing his footprints on the database just to check if this email is already registered. Now, while doing login, the data entered by him is checked in the database and if matched, he can enter.

While Jack likes any post or comments on any article, his shoutout is registered and attached to that specific post.

So, this is how we tried to implement the result. Let us leave Jack Sparrow in his fantasy world and let me tell you about challenges which we faced.

Challenges faced, solutions and learnings

1. In implementing backend features we had to add a server and many a time server crashed or had to be run manually. So, for this, we added Nodemon to solve this complexity,
2. While using local storage, it is necessary to set local storage and get items. We set local storage in promise functions which are asynchronous in operation and hence window location changed to a different page before storing anything in local storage. For this, we used block scope in a Javascript function and solved the problem,
3. It was vague to implement all the features with minute details in small-time so we choose one-two cases of each functionality to be covered.

Beyond this project-

Like every developer, we perceived this project as the product and product life-cycle never ends in practical aspects. So, we will keep implementing, adding and enhancing this very much product which we have built. We will share all the details here and would love to get your reaction.

At last but not least, in this never-ending, evolving and blissful journey of project completion, you my dear friends play a most vital role as someone who is having the endless capability to suggest and improvise to bring the best out of something. Please do check out our git-repository, videos, snapshots to suggest the out of ordinary…

Thanks a lot for showing your love here…