Facebook Clone App

December 28, 2022

Jimmy Pranata

Most famous social media clone self-made

Product

Next JS 12

Next Step Clone

After i cloned Messenger app, i decided to learn and cloned Facebook Main Page, including responsive design including scren size for mobile, tablet, or desktop.

Basic desktop view, it mimics most ui possible.

Tablet View

Basically it hides messenger addons now since it takes alot of space, while trying to copy how the real one looks.

Mobile View

This is one of the most compact, removing search box too just to copy mobile version.

Using Next-Auth

Next-auth provides alot of functionality and perks to help making login attempt legally, it could be github, google, or even facebook, which helps alot for authentication.

With proper login data, it can uses login user profile picture and name to differentiate between posting user. This makes the app super powerful since it almost work like the real one, despites most of the button are not functional.

Posting

The Clone can take posts, make it a block of text, or even add an picture, works just how like the real one. It helps to make the apps more interactive to play around.

Storing the database using google firebase. i had problem since i didn't know i was using old version of firebase, took me a lot of time to figure out and start migrating it to newer codes.

The picture that has been selected will be stored as preview on the side, so it doesn't take a lot of space.

Post Result

Links :

If you wanted to try the app, i deployed it on vercel to test different user posting,

Here's the link:

https://fb-clone-yt-orpin.vercel.app/

That's all for now,

Thank You !