ccrsxx / twitter-clone Goto Github PK
View Code? Open in Web Editor NEWTwitter clone built in Next.js + TypeScript + Tailwind CSS using Cloud Firestore and Storage
Home Page: https://twitter-clone-ccrsxx.vercel.app
License: MIT License
Twitter clone built in Next.js + TypeScript + Tailwind CSS using Cloud Firestore and Storage
Home Page: https://twitter-clone-ccrsxx.vercel.app
License: MIT License
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
....
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!
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.
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
I'm trying to speak to u, I have so many questions.
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 alt
s), replaces the previous image.
Instead of
twitter-clone/src/lib/firebase/utils.ts
Line 139 in c6bf6fb
I would rather use
const storageRef = ref(storage, `images/${userId}/${id}`);
Elon Musk made the api paid....
You should probably use batch
here (and in other places) instead of Promise.all
.
twitter-clone/lib/firebase/utils.ts
Line 98 in d8bd401
Great clone btw!
J
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.
Notifications!
It's too bad that the user has to check everywhere to see if someone has responded. So please add this section quickly.
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
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 :)
So i setup my version and i was wondering how you add the verified badge to someones account
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!
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
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
While user/stats/stats/tweets
is incremented/decremented on both client-side
twitter-clone/src/lib/firebase/utils.ts
Line 210 in c6bf6fb
and only decremented on server-side via Cloud functions onDelete trigger)
I think this Firebase Emulator Suite can be used as a private cloud backend
I know you are probably already working on a lot of these, but just sending it in in case you forgot some!
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.
undefined
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 | })
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>;
}
It loads the placeholder successfully on homepage, yet the firebase auth throws 401.
Could someone please point me to the right way get auth info out of this placeholder user for firebase?
when i try to sign in it goes to open the google popup but instantly closes it - https://twitter-clone-jade-zeta.vercel.app/
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
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.
Just wondering how the gifs are used? How is this feature enabled? Also, is there any advantages for the verified users?
how do i verify accounts
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
how do i verify users on my own twitter clone
Implementing Location feature of Tweet:
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
Hello I am having trouble expanding file support to support .png do I got to edit the firebase or storage rules?
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
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.
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
And then store user keyed by uid
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;
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!
I want some changes for this project:
I know it won't be easy, but the contributors to this project, including me, will always support this project.
That is all and thank you
help
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.