Twitter Clone

A full-stack Twitter clone built with Next.js 13, React, Tailwind CSS, Prisma, and MongoDB. This application replicates core features of Twitter, allowing users to register, create posts (tweets), follow other users, comment on posts, and receive notifications.

🚀 Features

Authentication & User Management

• User Authentication: Secure credential-based login and registration system.
• Profile Management: Users can edit their profile, including changing their bio, profile image, cover image, name, and username.
• Image Uploads: Base64 image upload functionality using react-dropzone for avatars and cover photos.

Social Features

• Follow System: Users can follow and unfollow other users.
• Tweeting: Create text-based posts (tweets).
• Interactions:
  • Like and unlike posts.
  • Reply to posts with comments.
• Notifications: Real-time notification system. Users receive notifications when someone follows them, likes their post, or replies to their post.

UI & UX

• Responsive Design: Fully responsive layout that looks great on mobile, tablet, and desktop devices.
• Modals: Custom modals for Login, Register, and Edit Profile actions to ensure a seamless user experience.
• Toast Notifications: Interactive toast notifications for user feedback (success/error messages) using react-hot-toast.
• Loading States: Spinners and loading states for data fetching and mutations.

🛠️ Technologies & Tools Used

• Framework: Next.js 13 (React Framework)
• Styling: Tailwind CSS
• Database: MongoDB (NoSQL Database)
• ORM: Prisma
• Authentication: NextAuth.js
• State Management: Zustand
• Data Fetching: SWR
• Icons: React Icons
• Date Formatting: date-fns
• Password Hashing: bcrypt

⚙️ Getting Started

Prerequisites

Before you begin, ensure you have the following installed:

• Node.js (v14 or higher)
• npm or yarn
• A MongoDB database URL (You can set up a free cluster on MongoDB Atlas)

Installation

1. Clone the repository (if applicable) or download the source code.

   git clone <repository-url>
   cd twitter-next13

2. Install dependencies

   npm install
   # or
   yarn install

3. Set up Environment Variables Create a .env file in the root directory and add the following variables:

   DATABASE_URL="your_mongodb_connection_string"
   NEXTAUTH_JWT_SECRET="your_jwt_secret"
   NEXTAUTH_SECRET="your_nextauth_secret"

   Note: You can generate a random string for the secrets using openssl rand -base64 32 or any password generator.

4. Initialize Prisma Push the Prisma schema to your MongoDB database to sync the structure:

   npx prisma db push

5. Run the Development Server

   npm run dev
   # or
   yarn dev

   Open http://localhost:3000 with your browser to see the result.

🗄️ Database Models

The project uses the following core entities via Prisma:

• User: Stores user details (username, email, bio, images) and tracks relationships like following/followers, posts, comments, and notifications.
• Post: Represents a tweet. Contains the content (body), timestamp, the author (userId), and an array of likedIds.
• Comment: Represents a reply to a post. Linked to both a User and a Post.
• Notification: Stores notifications for users regarding interactions (likes, follows, replies).

📄 License

This project is open-source and available for educational purposes.