Tailwind Resources Logo Tailwind Resources
Twitter Clone screenshot

Twitter Clone

Author Avatar Theme by Ccrsxx
Updated: 4 Mar 2024
876 Stars

Twitter clone built in Next.js + TypeScript + Tailwind CSS using Cloud Firestore and Storage

Github Live Preview

Categories

Nextjs React Scss Firebase Headless ui

Overview:

This product is a Twitter clone built using Next.js, TypeScript, Tailwind CSS, and Firebase. It offers features such as authentication, tweeting, liking, retweeting, replying, following/unfollowing users, customizing site colors, and real-time updates. The project can be run locally or deployed on Firebase’s cloud.

Features:

  • Authentication with Firebase Authentication
  • Strongly typed React components with TypeScript
  • Users can add tweets, like, retweet, and reply
  • Users can delete tweets, add a tweet to bookmarks, and pin their tweet
  • Users can add images and GIFs to tweets
  • Users can follow and unfollow other users
  • Real-time updates for likes, retweets, and user profiles
  • Responsive design for mobile, tablet, and desktop

Installation:

To install and run this Twitter clone locally, follow these steps:

  1. Clone the repository
  2. Install dependencies
  3. Create a Firebase project and select the web app
  4. Add your Firebase config details to .env.development
  5. Enable required Firebase services like Authentication, Cloud Firestore, and Cloud Storage
  6. Install Firebase CLI globally and log in
  7. Choose to run the project using the Firebase cloud backend or locally using an emulator
  8. Set up environment variables and configurations appropriately based on your choice
  9. Ensure necessary rules and indexes are deployed before running the project
  10. Optionally, set up a Twitter developer account and configure API keys if you wish to fetch trending data

Summary:

This Twitter clone project offers a comprehensive set of features similar to the actual platform, making it a good learning resource for developers looking to work with Next.js, TypeScript, Tailwind CSS, and Firebase. The detailed installation guide provides clear steps for setting up the project locally or deploying it on Firebase’s cloud.