Twitter Clone
Social timeline
- Year
- 2022 — 23
- Built with
- Next.js 13, React 18, TypeScript, Tailwind CSS 3 +7 more ↓
- Links
- Live site ↗Source ↗
(01) Overview
A Twitter-style social app on the T3 stack. Post to a shared timeline, like and reply in threads, open anyone’s profile, and see the most-liked posts in the sidebar.
(02) Features
- 01Three ways inA username and password, or OAuth with Facebook or Discord.
- 02Endless timelineCursor-paginated, and the next page loads as you near the end.
- 03ThreadsEvery tweet has a page of its own with its replies; delete a tweet and its replies go with it.
- 04Likes and top postsLike and unlike, and a sidebar ranks the most-liked posts.
- 05ProfilesEvery author has a profile with their tweets.
(03) Screens
(04) On a phone
Same app, smaller screen.
Captured from the live site at 390 pixels wide — the width of most phones in a hand.
(05) Stack
Eleven tools, and the job each one does here.
- FrameworkNext.js13Pages Router, scaffolded with create-t3-app
- UIReact18Timeline, threads, modals and toasts
- LanguageTypeScriptOne set of types from the database to the button
- StylingTailwind CSS3The interface
- APItRPC10Public procedures for reading, protected ones for writing
- DataTanStack Query4Infinite queries for the timeline, replies and top posts
- DataPrisma4Schema, six migrations and a Faker seed
- DataPostgreSQLUsers, tweets and likes
- DataZodProcedure input and the environment schema
- AuthNextAuthCredentials with bcrypt, Facebook and Discord
- HostingVercelProduction hosting
(06) Under the hood
- 01
tRPC routers carry types from the Prisma schema to the React components; anything that writes — tweet, like, unlike, delete — is a protected procedure.
- 02
Lists are cursor-paginated on the server and read with TanStack Query’s infinite queries, so the timeline, replies and top posts share one pattern.
- 03
Accounts made with a password and accounts made through Facebook or Discord share one users table through the NextAuth Prisma adapter.
- 04
A Faker seed script fills the database with users and tweets for local development.
Next case
POJO Generator
