https://github.com/yyq1025/x-clone

Twitter/Threads clone web application based on Next.js and Supabase
https://github.com/yyq1025/x-clone

nextjs supabase tailwindcss tanstack-react-query twitter-clone typescript

Last synced: 10 months ago
JSON representation

Twitter/Threads clone web application based on Next.js and Supabase

• Host: GitHub
• URL: https://github.com/yyq1025/x-clone
• Owner: yyq1025
• Created: 2024-05-21T00:17:12.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2025-04-08T22:08:14.000Z (10 months ago)
• Last Synced: 2025-04-08T23:20:44.354Z (10 months ago)
• Topics: nextjs, supabase, tailwindcss, tanstack-react-query, twitter-clone, typescript
• Language: TypeScript
• Homepage: https://x-clone-delta.vercel.app
• Size: 11.2 MB
• Stars: 4
• Watchers: 2
• Forks: 1
• Open Issues: 11
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# X-clone by Richard Yang

Twitter/Threads clone web application based on Next.js and Supabase.

[![TypeScript](https://img.shields.io/github/package-json/dependency-version/yyq1025/X-clone/dev/typescript?logo=typescript&logoColor=white&label=TypeScript&color=3178c6)](https://www.typescriptlang.org/)

[![Next.js](https://img.shields.io/github/package-json/dependency-version/yyq1025/X-clone/next?style=flat&logo=nextdotjs&logoColor=white&label=Next.js&color=black)](https://nextjs.org/)

[![Supabase](https://img.shields.io/github/package-json/dependency-version/yyq1025/X-clone/%40supabase%2Fsupabase-js?logo=supabase&logoColor=white&label=Supabase&color=3fcf8e)](https://supabase.com/)

[![TanStack Query](https://img.shields.io/github/package-json/dependency-version/yyq1025/X-clone/%40tanstack%2Freact-query?logo=reactquery&logoColor=white&label=TanStack%20Query&color=ff4154)](https://tanstack.com/query/latest)

[![shadcn/ui](https://img.shields.io/badge/shadcn%2Fui-black?logo=shadcnui)](https://ui.shadcn.com/)

[![Tailwind CSS](https://img.shields.io/github/package-json/dependency-version/yyq1025/X-clone/dev/tailwindcss?logo=tailwindcss&logoColor=white&label=Tailwind%20CSS&color=06b6d4)](https://tailwindcss.com/)

## Features

### Infinite Scroll Everywhere

### Optimistic Updates

Immediate update before the server responds

Example




![update.gif](/docs/images/update.gif)

### Route-based Modals

Keep the modal even after refresh

Example




![modal.gif](/docs/images/modal.gif)

### Crop Images Before Upload

Crop avatars and banners before upload

Example




![crop.gif](/docs/images/crop.gif)

### Polling-based Notifications

Stabilize server load during peak time

Example




![notification.gif](/docs/images/notification.gif)

### Logic Delete

Keep parent/reply relations after posts are deleted

Example




![delete.gif](/docs/images/delete.gif)

## Database Design

[![X-clone.png](/docs/images/X-clone.png)](https://dbdiagram.io/d/X-clone-6676ef015a764b3c72253078)

## Todo