Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/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.
https://github.com/shahadat3669/threads-clone

clerk commitlint cz-customizable eslint git gitflow github husky lint-staged mongodb nextjs prettier tailwindcss typescript

Last synced: 5 days ago
JSON representation

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.

Awesome Lists containing this project

README 

        





  logo

  logo

  
Threads Clone





# 📗 Table of Contents



- [📖 About the Project](#about-project)

  - [🛠 Built With](#built-with)

    - [Tech Stack](#tech-stack)

    - [Key Features](#key-features)

  - [🚀 Live Demo](#live-demo)

- [💻 Getting Started](#getting-started)



  - [Setup](#setup)

  - [Prerequisites](#prerequisites)

  - [Install](#install)

  - [Environment Variables](#environment-variables)

  - [Obtaining Clerk Keys](#obtaining-clerk-keys)

  - [Obtaining MongoDB URL](#obtaining-mongodb-url)

  - [Obtaining UploadThing Keys](#obtaining-uploadthing-keys)

  - [Development Workflow](#development)

  - [Run tests](#run-tests)

  - [Build](#build)

  - [Deployment](#deployment)



- [👥 Authors](#authors)

- [🔭 Future Features](#future-features)

- [🤝 Contributing](#contributing)

- [⭐️ Show your support](#support)

- [🔭 Acknowledgements](#acknowledgements)

- [❓ FAQ](#faq)

- [📝 License](#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

  



  Backend

  



  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.



```bash

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

```



Go to the project directory.



```bash

  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:



```bash

  npm install

```



### Environment Variables 



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



```plaintext

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](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](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://:@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 `` and `` 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](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:



```bash

  npm run dev

```



Open [http://localhost:3000](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:



```bash

  npm test

```



### Build 



Builds the app for production to the `build` folder.



```bash

  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**



[![portfolio](https://img.shields.io/badge/my_portfolio-000?style=for-the-badge&logo=ko-fi&logoColor=white)](https://github.com/shahadat3669) [![linkedin](https://img.shields.io/badge/shahadat_cseng-0A66C2?style=for-the-badge&logo=linkedin&logoColor=white)](https://linkedin.com/in/shahadat-cseng) [![twitter](https://img.shields.io/badge/@shahadat3669-1DA1F2?style=for-the-badge&logo=twitter&logoColor=white)](https://twitter.com/shahadat3669)



(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](../issues/).



(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) License, allowing you to use, modify, and distribute the code for personal and commercial purposes.



(back to top)