Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/weiwei2694/x-twitter-clone
Fullstack X Twitter Clone: Next.js 13, React, Typescript, Prisma, Clerk, Tailwind CSS, Cloudinary, MySQL, Shadcn UI, Zustand
https://github.com/weiwei2694/x-twitter-clone
clerk cloudinary mysql nextjs13 prisma react shadcn-ui tailwindcss typescript zustand
Last synced: about 1 month ago
JSON representation
Fullstack X Twitter Clone: Next.js 13, React, Typescript, Prisma, Clerk, Tailwind CSS, Cloudinary, MySQL, Shadcn UI, Zustand
- Host: GitHub
- URL: https://github.com/weiwei2694/x-twitter-clone
- Owner: weiwei2694
- Created: 2023-09-21T15:02:36.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2023-10-29T06:45:35.000Z (about 1 year ago)
- Last Synced: 2024-10-01T00:43:26.333Z (about 2 months ago)
- Topics: clerk, cloudinary, mysql, nextjs13, prisma, react, shadcn-ui, tailwindcss, typescript, zustand
- Language: TypeScript
- Homepage: https://x-twitter-clone-weiwei2694.vercel.app/
- Size: 1.61 MB
- Stars: 46
- Watchers: 2
- Forks: 6
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 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
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
```bash
git clone https://github.com/weiwei2694/x-twitter-clone.git
cd x-twitter-clone
```
## Install packages
```bash
npm install
yarn install
pnpm install
bun install
```
## Setup .env file
```bash
# 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)
```bash
npx prisma generate
npx prisma db push
```
## Available commands
| Command | Description |
| ---------------------- | ---------------------------------------- |
| `npm run dev` | Starts a development instance of the app |
| `npm run build` | Builds the app for production |
| `npm run start` | Starts the app in production mode |
| `npm run prettier` | Check and format code using Prettier |
| `npm run prettier:fix` | Format code using Prettier (fix issues) |