Fullstack Twitter Web Clone

View Demo · Documentation · Report Bug · Request Feature

A Fullstack Twitter web app clone built with the MERN stack and Next js as the Fullstack framework.

Password for Twitter Blue: spaceX

🤔 Reason For Project

I wanted to challenge myself and see how long it would take me to create and complete a full stack project. initially i wanted to use firebase as the backend but i felt that would have been a cheap and easy way out.

Why I did not use the App router ?

1. Most Next js codebases are still in the Page Router, so it pays to soildify your knowledge in the workings of the page router.

2. My laptop is too slow for the App router some how. if you really want this project to be in the App router here is a challenge for you rewrite the codebase.

⭐ Features

• user authentication with google.
• user profile
• creation, ability to edit tweet visibility and deletion of tweets
• image upload functionality for tweets, profile image and banner.
• retweeting
• adding comments to tweets.
• replying commments to tweets.
• user's profile search
• bookmarking tweets
• liking tweets
• personalized tweet feed.
• follow user functionality
• user follow suggestions
• notifications
• custom api
• user verification (check readme for password)

📷 Screen Shots

Figma file link

Home Page

Sign in Page

Tweet Details Page

User Profile Page

Bookmark Page

Settings Page

Search Page

Onboarding Page

🛠️ Tech Stack

💻 Front End

• React (Ui Library)
• Shadcn Ui (Components Library)
• Tailwind Css (Css Framework)
• Framer Motion (Animation Library)
• Next js (Meta Framework)
• Redux (State Management)
• Redux Toolkit (So as not to suffer, like who writes plain redux these days?)

🖥️ Back End

• Next Auth (Authentication Handler)
• Uploadthing (Media Uploader)
• Node js runtime
• Mongoose (Object Data Modeler)
• Next js (Full Stack Meta Framework)
• Zod (Schema Validator)
• Mongodb (NoSql Database)

🔑 Enviroment Variables

Add the following environment variables unless the app will not work as intended.

MONGO_URL

GOOGLE_CLIENT_ID

GOOGLE_CLIENT_SECRET

JWT_SECRET

NEXTAUTH_URL

NEXTAUTH_SECRET

UPLOADTHING_SECRET

UPLOADTHING_APP_ID

SITE_URL

TWITTER_BLUE

⚙️ Installation

1. Clone the Repository

    $ git clone https://github.com/nathan-somto/twitter-clone.git

2. Enter into the directory

    $ cd Twitter-Clone

3. Create .env file at the root of project : Important Step Get all your credentials from google and uploadthing.

  $ touch .env

4. Install all dependencies

   $ npm install

5. Start the Development Server

    $ npm run dev

🐞 Issue Guidelines

1. Search First: Check if your issue already exists before creating a new one.

2. Clear Title: Use a concise title that describes the problem or request.

3. Details Matter: Provide clear details, steps to reproduce, and expected outcomes.

4. Be Respectful: Keep discussions polite and on-topic.

5. Stay Updated: Follow your issue for updates and respond promptly when needed.

👥 Contributors

Nathan Somto