Twitter Clone

Twitter Clone is an open-source boilerplate for building a Twitter-style social media application with Next.js, Sanity CMS, TypeScript, Tailwind CSS, and NextAuth authentication.

What is Twitter Clone?

Twitter Clone is a full-stack web application boilerplate that replicates the core experience of Twitter. It runs on Next.js with TypeScript, uses Tailwind CSS for styling, Sanity CMS as the content database, and NextAuth for user authentication. The project is maintained by Ashish (GitHub user Ash1shh) and is deployed as a live demo on Vercel at twitti-clone.vercel.app. As input, it requires environment variables for Sanity and OAuth providers; as output, it provides a functional social feed with user posts, relative timestamps, and light/dark mode.

Key Features

• Next.js with TypeScript — Built on the Next.js React framework with TypeScript, enabling server-side rendering (SSR) and strongly typed code.
• Tailwind CSS styling — Utility-first CSS via Tailwind, configured with PostCSS and template path setup for app, pages, and components directories.
• Sanity CMS backend — Uses Sanity as a headless CMS and database; requires NEXT_PUBLIC_SANITY_PROJECT_ID, NEXT_PUBLIC_SANITY_DATASET, and SANITY_API_TOKEN.
• NextAuth authentication — Integrates NextAuth with Google and GitHub OAuth providers; credentials are set via GOOGLE_CLIENT_ID, GOOGLE_CLIENT_SECRET, GITHUB_ID, and GITHUB_SECRET.
• Dark and light mode — Includes theme switching through next-themes, as indicated by the project's repository topics.
• Framer Motion animations — Uses framer-motion to add UI animations.
• Relative timestamps — Displays post times with react-time-ago.
• Custom scrollbars — Uses tailwind-scrollbar-hide to style or hide scrollbars.

Who should use Twitter Clone?

• Full-stack developers — Learn how Next.js, Sanity CMS, and NextAuth work together in a production-like Twitter clone.
• Startups building social features — Use this as a foundation to create a custom social feed with authentication and a CMS-backed database.
• Portfolio builders — Deploy this clone to showcase ability to build a complete full-stack application.

What can you do with Twitter Clone?

• Create a social feed — Connect a Sanity dataset and launch a Twitter-like timeline with user posts and timestamps.
• Add OAuth login — Configure Google and GitHub developer applications to let users sign in with their existing accounts.
• Deploy to Vercel — Push the repository to Vercel and set the required environment variables for a live production site.

How does Twitter Clone work?

Clone the repository, install dependencies with npm install, and start the development server with npm run dev. Before running, you must create a Sanity account and set the environment variables listed in the README, including Sanity project ID, dataset, API token, and OAuth credentials for Google and GitHub.

Pricing

Twitter Clone is free. The project is open-source and can be cloned and modified from its GitHub repository.

FAQ

Is Twitter Clone free?

Yes, it is open-source and free to use. The code is available on GitHub and can be cloned or forked without cost.

What prerequisites are needed to run it?

You need Node.js installed, a Sanity account, and OAuth credentials from Google and GitHub. The README lists all required environment variables.

Does it support dark mode?

Yes, the project includes both dark and light mode via next-themes.

Can I deploy it to Vercel?

Yes, as a Next.js application it can be deployed to Vercel by importing the repository and adding the environment variables.