ccrsxx / twitter-clone

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

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

Preview 🎬

showcase.mp4

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/ccrsxx/twitter-clone.git

2. Install dependencies

   npm i

3. Create a Firebase project and select the web app

4. Add your Firebase config to .env.development. Note that NEXT_PUBLIC_MEASUREMENT_ID is optional

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. At this point, you have two choices. Either run this project using the Firebase on the cloud or locally using emulator.

    1. Using the Firebase Cloud Backend:

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

          firebase deploy --except functions

       2. Run the project

          npm run dev

    2. Using Firebase Local Emulator:

       1. Install Java JDK version 11 or higher before proceeding. This is required to run the emulators.

       2. Set the environment variable NEXT_PUBLIC_USE_EMULATOR to true in .env.development. This will make the app use the emulators instead of the cloud backend.

       3. At this point, you can run the following command to have a fully functional Twitter clone running locally:

          npm run dev:emulators

Note: When you deploy Firestore indexes rules, it might take a few minutes to complete. So before the indexes are enabled, you will get an error when you fetch the data from Firestore.

You can check the status of your Firestore indexes with the link below, replace your-project-id with your project ID: https://console.firebase.google.com/u/0/project/your-project-id/firestore/indexes

Optional:

• If you want to get trending data from Twitter API, you need to create a Twitter developer account and get your API keys. Then add your API keys to .env.development. I hope Elon Musk doesn't make this API paid 😅.
• If you want to make the user stats synced with the deleted tweets, you need to enable the Cloud Functions for Firebase. Then deploy the Cloud Functions.

twitter-clone's Issues

Feature: Enabling Local Emulator for Firebase for local development

Hi, @ccrsxx !

This is a fantastic project that you've created. If you're open to receiving contributions, I'd like to add Firebase emulator as a development mode so that the project can be fully developed locally and people can play with Firebase functions without needing to update to the Blaze plan to deploy the functions.

Great work with the project and maintenance!

where is the sign in page code & the css? i gotta edit it

Site Qustion

So not a bug, but i was wondering if in your free time could you maybe make a step by step tutorial on how to set up our own version of the site because im having a hard time understanding the setup steps as im kinda dumb and usually follow tutorial vids.

Google sign-in method stuck when logging in

Add emoji

This interface looks fantastic. Do you have any idea how to change it, to add emoji in the input dialog? Currently, a stop sign is displayed when trying to click the emoji link. Thanks

infinite scroll

assalamu'alaikum pak/bu,..
website saya -> https://pengepulaksara.com itu punya fitur infinite scroll, cuma gak berfungsi ketika dibuka di web browser mobile, perkiraan karna tab url browsernya yg gk fixed. mungkin bpk/ibu bisa ngasih masukan atau referensi..
terimakasih :)

Suggestion: Persist the scroll position and prevent reload on navigating back

First of all, fantastic project! Really looks like Twitter.

As the title says, if you notice Twitter, it persists your scroll position when you navigate back, and I guess doesn't call the fetch tweets API again if there are no new tweets, due to which the navigation feels instant.

I don't know the complexity that would be involved in such a task, but I feel it would be a great addition to this project.

Can't upload .png

Hello I am having trouble expanding file support to support .png do I got to edit the firebase or storage rules?

Images should not be indexed on alt, but rather unique id

Hi,
I believe that storing images based on the alt is not an good idea and instead unique id should be used. The reason is that, uploading two images with the same filename (thus the same alts), replaces the previous image.

Instead of

twitter-clone/src/lib/firebase/utils.ts

Line 139 in c6bf6fb

const storageRef = ref(storage, `images/${userId}/${alt}`);

I would rather use

const storageRef = ref(storage, `images/${userId}/${id}`);

Add ability to add a link to display or media item?

Would be nice to add ability to have link, or embed a youtube video into the feed.. in a way that keeps it sage and sanitary.

Add or modify support for supabase

Gifs and Verified user

Just wondering how the gifs are used? How is this feature enabled? Also, is there any advantages for the verified users?

dev server not running

#9 (comment)

After running npx next dev, it is not working.

.env.development

// Import the functions you need from the SDKs you need
import { initializeApp } from "firebase/app";
import { getAnalytics } from "firebase/analytics";
// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries

// Your web app's Firebase configuration
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
const firebaseConfig = {
  apiKey: "AIzaSy****************8",
  authDomain: "twitter-cl*******.firebaseapp.com",
  projectId: "twitter-clone-*****",
  storageBucket: "twitter-clo****appspot.com",
  messagingSenderId: "1********99",
  appId: "1:1069671**********************de",
  measurementId: "G-J******FL8"
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);
const analytics = getAnalytics(app);

also used this config but not working

# Dev URL
NEXT_PUBLIC_URL=http://localhost:8080/

# Firebase
NEXT_PUBLIC_API_KEY=AIz*************************M8
NEXT_PUBLIC_AUTH_DOMAIN=twitter-clo**************app.com
NEXT_PUBLIC_PROJECT_ID=twitter-clo**********
NEXT_PUBLIC_STORAGE_BUCKET=twitter-clo*************pot.com
NEXT_PUBLIC_MESSAGING_SENDER_ID=10696**********99
NEXT_PUBLIC_APP_ID=1:106967153**********************9de
NEXT_PUBLIC_MEASUREMENT_ID=G***********L8

[Function request] some suggestions

good job! Thank you for creating this repository
very perfect!
But I have some suggestions
Add video upload
Other login methods: such as email login
....

DM and Search Results

Hello again,
Wondering how difficult it would be to set up Direct messaging and be able to render search results.
Is that what the Twitter Bearer Token is used for? I applied for the Twitter developers free API and entered my Bearer Token but it didn’t change anything within the app itself.
Would really appreciate some input on what I might be missing or doing wrong.

Thank you,
Very very amateur builder

Selfhost

Hey @ccrsxx your project is awesome, UI implementation is close to the original, plus the animations make it more interactive to use.

I'm planning to modify this project with a custom adapter for the backend and am willing to host it on my own server, so I need your permission to use it.

Thankyou

Problem with firebase

Hello,

I can't install the twitter-clone, i get this error using the command: firebase deploy --except functions

Error:

i deploying storage, firestore

There was an issue deploying your functions. Verify that your project has a Google App Engine instance setup at https://console.cloud.google.com/appengine and try again. If this issue persists, please contact support.

Error: Your project is being set up. Please wait a minute before deploying again.

Having trouble? Try firebase [command] --help

I try very much, but no works.

Thank you for help.

respond to me on discord - itsmedxmon

I'm trying to speak to u, I have so many questions.

I love you - I have a request

The most beautiful, safe and complete Twitter clone in the world is this repository. Thank you for making this beautiful and big tank.

I have two requests. A small request and a big request.

Small request (please add this quickly):

Notifications!
It's too bad that the user has to check everywhere to see if someone has responded. So please add this section quickly.

Big request:

Added video upload
Support for correcting tweets, replies, bio
Added search
Add chat (only personal required)
Added mention
Hashtag added
Adding links in the tweet (not mandatory)
Added Explore

Unhandled Runtime Error FirebaseError: Failed to get document because the client is offline.

Unhandled Runtime Error
FirebaseError: Failed to get document because the client is offline.

Running to xampp page

hi first its great source i like it and i learn everything but i have some issue when i run with npm run dev it will give me to local but the local going to xampp pages how i can make it run to twitter page?? pls answer this thx

Multiple Suggestions!

• Working Messaging system
• Working Notifications with Verified Tabr
• Seperate Follower List (Followers) and Follower count and same thing with like, rt count, replys etc. (so the count is editable in firebase)
• Fully working settings system
• Ability to sign up with Email and phone number (maybe email verification)
• Have emails linked to accounts and numbers linked to accounts
• Clickable usernames and hashtags when you put a hashtag or tag someone
• Hashtag system
• Search system
• GIF, Polls, emojis etc for tweets and stuff like that
• Editable tweets
• Account suspensions, private account
• Gold verified badges, Grey badges and blue badges (Don't use Hero Icon, just copy the actual Twitter SVGs)

I know you are probably already working on a lot of these, but just sending it in in case you forgot some!

Why both user/totalTweets and user/stats/stats/tweets.length ?

Hi,
I wonder why do you use both user/totalTweets and user/stats/stats/tweets.length? What is the reason of keeping them in both places? And then when you display user's total tweets in user-header.tsx you add them together in

twitter-clone/src/components/user/user-header.tsx

Line 38 in c6bf6fb

(user?.totalTweets ?? 0) + (tweets?.length ?? 0),

?

I also wonder why are they managed separatelly, i.e. user.totalTweets is incremented/decremented on client-side only

twitter-clone/src/lib/firebase/utils.ts

Line 171 in c6bf6fb

export async function manageTotalTweets(

While user/stats/stats/tweets is incremented/decremented on both client-side

twitter-clone/src/lib/firebase/utils.ts

Line 210 in c6bf6fb

tweets: arrayUnion(tweetId),

and only decremented on server-side via Cloud functions onDelete trigger)

twitter-clone/functions/src/normalize-stats.ts

Line 5 in c6bf6fb

export const normalizeStats = regionalFunctions.firestore

Elon Musk made the api paid....

Elon Musk made the api paid....

= "1" ]; then

undefined

Localhost When Logging In

Evening Bud!

Impressed with the clone but I'm stuck on the logging in, I Press sign in with Google but then it'll return with

Hmmm.... cant reach this page

local host refused to connect.

I'm sure it's something I'm doing wrong but I'm just not sure what, thanks! I plan to use this for a project I'm working on so will buy you alot of coffee's once I get the project up and running and pay you a percentage of revenue for the help!

promise.all

You should probably use batch here (and in other places) instead of Promise.all.

twitter-clone/lib/firebase/utils.ts

Line 98 in d8bd401

await Promise.all([

Great clone btw!

J

Hello!

Hello! Love the app, I’m a new self taught “developer”. I’ve cloned and started my own copy but I’m having a couple issues.
Firstly, is made to be deployable by anyone, totally new to all the and GitHub.
Also, I have everything up and running and tweaked it a bit to my liking. Just wondering, how do you assign/give out the Verified Badges?
Thanks again, super appreciate this repository!

verification

how do i verify accounts

not letting me sign in

when i try to sign in it goes to open the google popup but instantly closes it - https://twitter-clone-jade-zeta.vercel.app/

I can't run the server

When installing the dependencies I get this error message

The machine I am using is one based on the ARM architecture.

[FEATURE] Add location to Tweets

Implementing Location feature of Tweet:

1. User can add location tag from a search bar to a tweet when drafting
2. User can edit/remove location tag of a tweet draft
3. The location will be shown in tweet detail page if there is one tagged

Are users keyed by username?

Hi,
Thank you for sharing this code. I highly appreciate it. I would love to inspire and build my website on top of this codebase.

I wonder why do you check whether the document keyed by username exists in the user collection if it's always stored with uid

You check whether the username exists:

twitter-clone/src/lib/context/auth-context.tsx

Lines 68 to 74 in c6bf6fb

	randomUsername = `${normalizeName as string}${randomInt}`;
	const randomUserSnapshot = await getDoc(
	doc(usersCollection, randomUsername)
	);
	if (!randomUserSnapshot.exists()) available = true;

And then store user keyed by uid

twitter-clone/src/lib/context/auth-context.tsx

Line 106 in c6bf6fb

setDoc(doc(usersCollection, uid), userData),

Why do you check whether there exists an document keyed by the username?
Shouldn't you query based on the child elementusername in the collection, instead of the key?

I believe you intended to implement it like this

      const randomUserSnapshot = await getDocs(
        query(usersCollection, where('username', '==', randomUsername))
      );
      if (randomUserSnapshot.empty) available = true;

verify

how do i verify users on my own twitter clone

Can't run dev server

Trying to implement a permissionless home and user profile page

Scenario

I'm trying to implement a placeholder user for home and user profile page.

auth-context.tsx

// ... (other imports)
import { useRouter } from 'next/router';
...
export function AuthContextProvider({
  children
}: AuthContextProviderProps): JSX.Element {
...

  // Use useRouter from next/router to determine the current route
  const router = useRouter();

  // Placeholder user object
  const placeholderUser: User = useMemo(() => ({
    id: 'placeholder',
  }), []);

  useEffect(() => {
    // Check if the current page is the homepage or user profile homepage
    const isHomeOrUserProfile = router.pathname === '/' || router.pathname === '/[id]';
    
    // If it is, set the user state to the placeholder user
    if (isHomeOrUserProfile) {
      setUser(placeholderUser);
      setLoading(false);
    }
  }, [router.pathname, placeholderUser]);

  // Modify the handleUserAuth function to update the placeholder user when explicitly logging in
  const handleUserAuth = (authUser: AuthUser | null): void => {
    setLoading(true);

    if (authUser) {
      manageUser(authUser);
    } else if (!router.pathname.startsWith('/[id]')) {
      // Only set to null if not on a user profile page
      setUser(null);
      setLoading(false);
    }
  };

...
  return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;
}

Problem

It loads the placeholder successfully on homepage, yet the firebase auth throws 401.

Question

Could someone please point me to the right way get auth info out of this placeholder user for firebase?

(not an issue) Question

So i setup my version and i was wondering how you add the verified badge to someones account

Error: HTTP Error: 403, The caller does not have permission

help

Cannot read properties of undefined (reading 'createdBy')

hello , I killed a lot of time and did not solve this problem.
please, help(

TypeError: Cannot read properties of undefined (reading 'createdBy')

src\lib\hooks\useArrayDocument.ts (48:58) @ _callee$

46 | currentData?.map(async (currentData) => {
47 |   const user = (

48 | await getDoc(doc(usersCollection, currentData.createdBy))
49 | ).data();
50 | return { ...currentData, user };
51 | })