Tweetsphere

This project is a fully functional X (formerly Twitter) clone built with modern technologies like Next.js 14, TypeScript, TailwindCSS, Framer Motion, MongoDB, Supabase, and more. The project showcases advanced fullstack capabilities and follows scalable architecture patterns.

Live Demo

Watch demo video on X (Twitter)

Features

• Google / GitHub / Email authentication (NextAuth)
• Profile & banner image upload
• Create tweets with up to 4 images & emojis
• Like, Comment, Reply, Bookmark tweets
• Follow / Unfollow users
• Pin or Delete your own posts
• Search tweets & users
• Discover trending hashtags
• Dark / Light theme toggle Alt + T
• Fully responsive for all devices

Tech Stack

• Next.js
• TypeScript
• Tailwind CSS
• Framer motion
• TanStack Query
• NextAuth.js
• Prisma
• MongoDB Atlas
• Supabase (Storage)
• Upstash Redis
• Zustand
• zod
• SWR
• SCSS

Getting Started

Installation

git clone https://github.com/devdignesh/tweetsphere.git
cd tweetsphere
npm install
npm run dev

Environment Variables

Copy the example file and add your secrets:

cp .env.example .env

Required Variables:

• MongoDB connection string
• Supabase project keys
• NextAuth configuration

Prisma Setup (MongoDB)

1. Install dependencies:

npm install

• This will automatically install Prisma and all the necessary dependencies

2. Generate Prisma Client

npx prisma generate

3. MongoDB Configuration

DATABASE_URL="mongodb+srv://username:[email protected]/twitter_clone"

4. Push database schema:

npx prisma db push

Supabase Setup:

1. Create a Supabase Account

• Visit Supabase, sign up, and create a new project.

3. Get API Keys

• After creating your project, go to the API section or connect.
• Find Project URL and API Key/anon key for the following environment variables:

NEXT_PUBLIC_SUPABASE_URL=your_supabase_url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your_anon_key

• Copy these keys and add them to your .env file.

3. Create three public buckets:

   • images
   • banners
   • avatars

4. Ensure public read permissions for these buckets.
   Need help? Read this Supabase Storage guide.

5. That's it!

Once done, your Supabase setup is complete and your application will now be able to store and retrieve images.

Docker Setup (Optional)

1. Pull the pre-built image:

   docker pull devdignesh/twitter_clone_nextjs:v1.1.0

2. Run the container:

   docker run -d -p 8000:3000 devdignesh/twitter_clone_nextjs:v1.1.0

3. Open in browser:

   http://localhost:8000
   

Contributing

We welcome contributions! Whether it's reporting bugs, suggesting features, improving documentation, or submitting PRs — all contributions are appreciated.

To contribute:

1. Fork the repo
2. Create a feature branch
3. Submit a pull request