Skip to content

The NextJS Twitter Clone is a social media application built with Next.js, React, and Firebase. It replicates key features of Twitter, offering user authentication, real-time updates for tweets and likes, and responsive design. The project leverages NextAuth for authentication.

Notifications You must be signed in to change notification settings

Shaban-Eissa/NextJS-Twitter-Clone

Repository files navigation

NextJS Twitter Clone

A full-stack Twitter clone built with Next, React, Firebase. This project aims to replicate the core features of Twitter, allowing users to post tweets, adding comments on tweets.

Table of Contents

Features

  • User Authentication: Secure user authentication system using NextAuth for secure login.
  • Tweeting: Post tweets, complete with text and images, and view tweets from other users.
  • Real-time Updates: Real-time updates for tweets.
  • Tweets Comments: Adding comments on tweets.
  • Responsive Design: Mobile-friendly design to ensure a seamless user experience across devices.

Demo


Check out the live demo https://next-js-twitter-clone-pi.vercel.app

Installation

  1. Clone the repository:

    git clone https://github.com/Shaban-Eissa/NextJS-Twitter-Clone.git
  2. Install dependencies:

    cd NextJS-Twitter-Clone
    npm install
  3. Set up Firebase:

    • Create a Firebase project: Go to the Firebase Console, click on "Add Project," and follow the setup instructions.

    • Get Firebase configuration:

      • In the Firebase Console, navigate to your project settings.
      • Under the "General" tab, scroll down to the "Your apps" section.
      • Click on the web app icon (</>) to create a new web app.
      • Copy the Firebase configuration object.
    • Configure the React app:

      • In your React app, locate the Firebase configuration file (e.g., src/firebase.js).
      • Replace the placeholder values with the Firebase configuration values you copied.

      Example Firebase configuration file:

      // src/firebase.js
      
      const firebaseConfig = {
        apiKey: 'YOUR_API_KEY',
        authDomain: 'YOUR_AUTH_DOMAIN',
        projectId: 'YOUR_PROJECT_ID',
        storageBucket: 'YOUR_STORAGE_BUCKET',
        messagingSenderId: 'YOUR_MESSAGING_SENDER_ID',
        appId: 'YOUR_APP_ID',
      };
      
      export default firebaseConfig;
  4. Set up NextAuth:

    • Add the following environment variables to your .env.local file:

      GOOGLE_CLIENT_ID=your-google-client-id
      GOOGLE_CLIENT_SECRET=your-google-client-secret
      NEXTAUTH_URL=http://localhost:3000
      JWT_SECRET=your-jwt-secret
      • GOOGLE_CLIENT_ID: Your Google OAuth client ID.
      • GOOGLE_CLIENT_SECRET: Your Google OAuth client secret.
      • NEXTAUTH_URL: The URL of your Next.js application.
      • JWT_SECRET: Secret key for JSON Web Token (JWT) encryption. you can generate one through this link https://generate-secret.vercel.app/32
  5. Run the application:

    npm run dev

    The application will be accessible at http://localhost:3000.

Usage

  1. Sign In:

    Allow users sign-in to accounts with NextAuth.

  2. Post Tweets:

    Allow users to post tweets on the home page.

  3. Real-time Interactions:

    Experience real-time updates for tweets as they happen.

  4. Tweet Comments:

    Adding comments on tweets.

  5. Delete Tweet:

    Allowing users to delete there own tweets.

Technologies Used

  • Frontend:

    • React
    • Next
    • Headless-ui
    • Hero-icons
    • Recoil
  • Backend:

    • Firebase
  • Authentication:

    • NextAuth
  • Styling:

    • Tailwindcss

Contributing

Contributions are welcome.

About

The NextJS Twitter Clone is a social media application built with Next.js, React, and Firebase. It replicates key features of Twitter, offering user authentication, real-time updates for tweets and likes, and responsive design. The project leverages NextAuth for authentication.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published