shahadat3669/threads-clone

Welcome to the Threads Clone Project, a full-stack web application that aims to replicate the functionality of the popular social media platform "Threads". This project is built using React, Next.js, TypeScript, MongoDB, and Tailwind CSS. Additionally, development best practices such as ESLint, Prettier, lint-staged, commitlint are also configured.

Threads Clone

📗 Table of Contents

• 📖 About the Project

  • 🛠 Built With
    • Tech Stack
    • Key Features
  • 🚀 Live Demo

• 💻 Getting Started

  • Setup
  • Prerequisites
  • Install
  • Environment Variables
  • Obtaining Clerk Keys
  • Obtaining MongoDB URL
  • Obtaining UploadThing Keys
  • Development Workflow
  • Run tests
  • Build
  • Deployment

• 👥 Authors

• 🔭 Future Features

• 🤝 Contributing

• ⭐️ Show your support

• 🔭 Acknowledgements

• ❓ FAQ

• 📝 License

🎯 Threads Clone

📢 Threads Clone Project is a full-stack web application that replicates the functionality of the popular social media platform "Threads" operated by Meta Platforms. Through this clone, you can explore and interact with features like posting and sharing text, images, videos, and engaging with other users' content through comments, likes, and reposts.

🛠 Built With

Tech Stack

Frontend

• React
• Next.js
• TypeScript
• Tailwind CSS

Backend

• Node.js
• MongoDB

Tooling

• ESLint
• Prettier
• lint-staged
• commitlint
• Cz-Customizable

Key Features

Discover the culmination of our dedication and expertise, where every keystroke and pixel is a testament to our commitment to excellence.📢 The main features are:

• User authentication and registration system.
• Create, edit, and delete posts containing text, images, and videos.
• Interact with posts through comments, likes, and reposts.
• User profile pages showcasing posts and activity.
• Explore and discover content from other users.
• Responsive design for various devices.

(back to top)

🚀 Live Demo

• coming soon.

(back to top)

💻 Getting Started

To get a local copy up and running follow these simple example steps.

Setup

Clone the project.

  git clone [email protected]:shahadat3669/threads-clone.git

Go to the project directory.

  cd threads-clone

Prerequisites

you have to those tools in your local machine.

• NPM
• GIT & GITHUB
• Any Code Editor (VS Code, Brackets, etc)

Install

Install all the necessary packages:

  npm install

Environment Variables

Create a .env.local file in the root directory of your project and add the following environment variables:

NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=CLERK_PUBLISHABLE_KEY_HERE
CLERK_SECRET_KEY=CLERK_SECRET_KEY_HERE
NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in
NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up
NEXT_PUBLIC_CLERK_AFTER_SIGN_IN_URL=/onboarding
NEXT_PUBLIC_CLERK_AFTER_SIGN_UP_URL=/
UPLOADTHING_SECRET=UPLOADTHING_SECRET_KEY_HERE
UPLOADTHING_APP_ID=UPLOADTHING_APP_ID_HERE
MONGODB_URL=MONGODB_URL_HERE

Obtaining Clerk Keys

To obtain the Clerk keys needed for the environment variables, follow these steps:

1. Sign up for a Clerk account at https://clerk.dev.
2. Log in to your Clerk dashboard.
3. Generate the Clerk Publishable Key and Secret Key from the dashboard.
4. Replace CLERK_PUBLISHABLE_KEY_HERE and CLERK_SECRET_KEY_HERE in your .env.local file with the respective keys you obtained.

For the other NEXT_PUBLIC_CLERK_* environment variables, you can configure the appropriate URLs based on your application's requirements.

Obtaining MongoDB URL

To obtain the MongoDB URL, follow these steps:

1. Sign up for a MongoDB Atlas account at https://www.mongodb.com/cloud/atlas.

2. Create a new cluster by following the MongoDB Atlas documentation.

3. Once your cluster is set up, navigate to the "Database Access" tab and create a new database user with a username and password.

4. Go back to the "Clusters" view and click the "Connect" button on your cluster card.

5. Select "Connect your application" and copy the connection string provided. It should look like:

   mongodb+srv://<username>:<password>@threads-cluster.jvsd6uc.mongodb.net/?retryWrites=true&w=majority
   

6. Replace MONGODB_URL_HERE in your .env.local file with the respective url you obtained. Don't forget to change <username> and <password> in the connection string with the credentials you created.

Obtaining UploadThing Keys

To obtain the UploadThing keys, follow these steps:

1. Sign up for an UploadThing account at https://uploadthing.com.
2. Log in to your UploadThing dashboard.
3. Generate the UploadThing Secret Key and App ID from the dashboard.
4. Replace UPLOADTHING_SECRET_KEY_HERE and UPLOADTHING_APP_ID_HERE in your .env.local file with the respective keys you obtained.

Development Workflow

The project is set up with development tools such as ESLint and Prettier to ensure code quality and consistency. Lint-staged, commitlint, and Cz-Customizable are configured to enhance the development workflow, providing a standardized and efficient approach to committing code.

In the project directory, run the project in the development server:

  npm run dev

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

The page will reload when you make changes.You may also see any lint errors in the console.

Run tests

Launches the test runner in the interactive watch mode:

  npm test

Build

Builds the app for production to the build folder.

  npm run build

Your app is ready to be deployed!

Deployment

Deploying the Threads Clone project can be done using various platforms and hosting services. Choose the one that best suits your requirements and follow their deployment guidelines to make your clone accessible to others.

(back to top)

👥 Authors

First Author:

Shahadat Hossain

(back to top)

🔭 Future Features

Here are some potential future features that WebWrap Studio consider implementing to further enhance its web development services:

• Real-time Notifications: Implement a real-time notification system that alerts users when they receive likes, comments, or reposts on their posts. This feature would enhance user engagement and keep users informed about their interactions with others.
• User Interactions Analytics: Provide users with insights into how their posts are performing, including the number of likes, comments, and reposts. This feature could help users understand their audience better.
• Localization and Internationalization: Add support for multiple languages and regions, allowing users from different parts of the world to use the platform in their preferred language.

(back to top)

🤝 Contributing

Contributions to the Threads Clone Project are encouraged! Whether you're fixing bugs, adding new features, or improving documentation, your input is valuable.

Feel free to check the issues page.

(back to top)

👋 Show your support

Give a ⭐️ if you like this project!

(back to top)

🔭Acknowledgments

• My Family.

(back to top)

❓ FAQ

Here are some frequently asked questions (FAQs) that users might have for WebWrap Studio, along with their respective answers:

• What is the purpose of the Threads Clone Project?

  • The Threads Clone Project is a full-stack web application aimed at replicating the features of the popular social media platform "Threads." It provides an opportunity for developers to learn and practice modern web development technologies while building a clone of the original platform.

• What technologies are used in the Threads Clone Project?

  • The Threads Clone Project is built using the MERN stack, which includes React, Next.js, TypeScript, MongoDB, Node.js, and Express.js. It also utilizes Tailwind CSS for styling and incorporates development tools like ESLint, Prettier, lint-staged, commitlint, and Cz-Customizable.

• Can I use the code or design elements for my own project?

  • While this project is open-source under the MIT License, we encourage you to review the license terms and ensure compliance before using any code or design elements for your own projects.

(back to top)

📝 License

This project is licensed under the MIT License, allowing you to use, modify, and distribute the code for personal and commercial purposes.

(back to top)