Twitter Clone App

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

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 tweet
• Users can follow and unfollow other users
• Users can see their and other followers and the following list
• Users can see all users and the trending list
• Realtime update likes, retweets, and user profile
• Realtime trending data from Twitter API
• User can edit their profile
• Responsive design for mobile, tablet, and desktop
• Users can customize the site color scheme and color background
• All images uploads are stored on Firebase Cloud Storage

Tech 🛠

• Next.js
• TypeScript
• Tailwind CSS
• Firebase
• SWR
• Headless UI
• React Hot Toast
• Framer Motion

Development 💻

Here are the steps to run the project locally.

1. Clone the repository

   git clone https://github.com/piyush168713/twitter-clone-app.git
   

2. Install dependencies

   npm i
   

3. Create a Firebase project and select the web app

4. Add your Firebase config to .env.development.

5. Make sure you have enabled the following Firebase services:

   • Authentication. Enable the Google sign-in method.
   • Cloud Firestore. Create a database and set its location to your nearest region.
   • Cloud Storage. Create a storage bucket.

6. Install Firebase CLI globally

   npm i -g firebase-tools
   

7. Log in to Firebase

   firebase login
   

8. Get your project ID

   firebase projects:list
   

9. Select your project ID

   firebase use your-project-id
   

10. Deploy Firestore rules, Firestore indexes, and Cloud Storage rules

    firebase deploy --except functions
    

11. Run the project

    npm run dev