DEV Community

Cover image for Tweeter - A Twitter clone made using React + Firebase
Shubham Verma
Shubham Verma

Posted on • Originally published at blogs.shubhamverma.me

Tweeter - A Twitter clone made using React + Firebase

For the curious ones:

Live Demo : https://tweeter-eight.vercel.app


GitHub Repo : https://github.com/ShubhamVerma1811/Tweeter

Table of Content

Tech Stack

The Tech stack that I used for this project is:

That's it!

Here's the look at the dependencies in the package.json file

{
  "dependencies": {
    "@material-ui/core": "^4.11.1",
    "@material-ui/icons": "^4.9.1",
    "firebase": "^8.1.1",
    "next": "10.0.2",
    "react": "17.0.1",
    "react-dom": "17.0.1",
    "shortid": "^2.2.16"
  }
}
Enter fullscreen mode Exit fullscreen mode

Reason for choosing this Tech Stack

NextJS

  • I chose NextJS because it has SSR capabilities, built-in Routes support.

TailwindCSS

  • I chose TailwindCSS because it's the best! I didn't have to care about class names. Even though Tailwind has its limits.

Firebase

  • The big one, Firestore. Now Twitter is highly SQL based and Firestore is a NoSQL DB. The reason I chose Firestore because I wanted to learn it.

Problems with this Tech Stack

TailwindCSS

  • The problem with Tailwind is that it has its limits. Not every CSS styles are supported, you need to extend it if you need to use it.
  • This is a great feature, but for a person like me who never worked with the tailwind.config.js file, it was an issue and I had to use inline style to achieve certain looks.

Firestore

  • Firestore is a NoSQL DB and Tweeter uses SQL relationships.
  • So to solve this, I created SQL-like relations in Firestore.
  • But due to the nature of Firestore which is NoSQL and me writing SQL-like relationships, the query takes a long time to execute.
  • This is the thing I realized that why Firebase was a bad choice. -The major feature of Twitter would be "retweets", but I had to skip that implement' in FIrestore because the query would take even more time to execute.
    • Use of Firestore made me realize how powerful SQL databases are.

For example:
A user table that looked like

userID email name username createdAt
JK12Ac test@test.com Rick Roll rickroll68 1st Jan 13:00

And a tweets table that looks like

tweetID authorID tweet parentTweet createdAt
JL150 JK12Ac Hello null 2nd Jan 2:30

Features of this website.

Authentication

  • The authentication was implemented using Firebase Authentication. It used the "Email/Password" method to authenticate.
  • To use the service, a user needs to sign up.

Tweets

  • A User can post tweets, add a single image to tweets, comment on other tweets.
  • User can also Like tweets and Save them as Bookmarks.
  • Deletion of a tweet can also be done.

Users

  • Users can follow other users.
  • Followed user tweets are visible on the Home Page.
  • The user can also delete their tweets and account.

Firebase Storage Bucket

  • The images present in a tweet are stored in the Firebase Storage Bucket.

If you liked this blog then do let me know. I am new to blogging and would love to know your thoughts.

Top comments (0)