Fullstack X Twitter Clone: Next.js 13, React, Typescript, Prisma, Clerk, Tailwind CSS, Cloudinary, MySQL, Shadcn UI, Zustand

This project does not implement Websockets, so it still has defects in toggle like, bookmark and follow. and it took me about 3-4 weeks to do it, and of course I learned a lot of new things.

Demo Notice

X Twitter Clone

If you can't open it or there are problems, most likely my railway hobby plan has run out :(. So run it locally if you want to see all the features.

because I use a hobby plan from railway, the performance presented by my website will not be very good, maybe there will be a delay of 1-5 seconds, when querying.

Key Features

• Create Tweet - image upload, link
• Delete Tweet
• Share Tweet
• Reply Tweet
• Like Tweet
• Bookmark Tweet
• Follow User
• Notifications - like, comment, reply, follow
• Search Menu - search for user
• Search and Explore Page
• Edit Profile
• Profile - posts, replies, likes
• Pagination
• Beautiful UI using TailwindCSS and ShadcnUI
• Full responsivity and mobile UI
• MySQL database using Railways
• ORM using Prisma
• Authentication with Clerk

Cloning the repository

git clone https://github.com/weiwei2694/x-twitter-clone.git
cd x-twitter-clone

Install packages

npm install
yarn install
pnpm install
bun install

Setup .env file

# CLERK
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=
CLERK_SECRET_KEY=
NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in
NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up
NEXT_PUBLIC_CLERK_AFTER_SIGN_IN_URL=/onboarding
NEXT_PUBLIC_CLERK_AFTER_SIGN_UP_URL=/onboarding

# DATABASE
DATABASE_URL=

# CLOUDINARY
NEXT_PUBLIC_CLOUDINARY_NAME=
NEXT_PUBLIC_UPLOAD_PRESET=

# NEXT URL
NEXT_PUBLIC_NEXT_URL=http://localhost:3000

Setup Prisma

Add MySQL Database (I used Railway)

npx prisma generate
npx prisma db push

Available commands