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

• Table of Content
• Tech Stack
• Reason for choosing this Tech Stack
  • NextJS
  • TailwindCSS
  • Firebase
• Problems with this Tech Stack
  • TailwindCSS
  • Firestore
• Features of this website.
  • Authentication
  • Tweets
  • Users
  • Firebase Storage Bucket

Tech Stack

The Tech stack that I used for this project is:

• NextJS for the frontend framework
• TailwindCSS for the CSS framework
• Firebase as the Database.

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"
  }
}

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

And a tweets table that looks like

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.