Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

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: about 4 hours 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 (9 months ago)
Default Branch: main
Last Pushed: 2025-01-29T22:00:05.000Z (7 days ago)
Last Synced: 2025-01-29T23:18:22.983Z (7 days ago)
Topics: nextjs, supabase, tailwindcss, tanstack-react-query, twitter-clone, typescript
Language: TypeScript
Homepage: https://x-clone-delta.vercel.app
Size: 11.3 MB
Stars: 2
Watchers: 2
Forks: 1
Open Issues: 8
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