Ecosyste.ms: Awesome

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

Awesome Lists | Featured Topics | Projects

https://github.com/meeruzairwashere/threads-clone

Threads Clone: A visually stunning full-stack web app using Next.js, MongoDB, Shadcn UI, TailwindCSS, Clerk, Serverless APIs, React Hook Form, Zod, and TypeScript. It offers robust authentication, threaded discussions, user profiles, and notifications. Admins oversee community-specific threads.
https://github.com/meeruzairwashere/threads-clone

clerk mongodb nextjs react-hook-form shadcn-ui tailwindcss tyepscript uploadthing zod

Last synced: about 2 months ago
JSON representation

Threads Clone: A visually stunning full-stack web app using Next.js, MongoDB, Shadcn UI, TailwindCSS, Clerk, Serverless APIs, React Hook Form, Zod, and TypeScript. It offers robust authentication, threaded discussions, user profiles, and notifications. Admins oversee community-specific threads.

Awesome Lists containing this project

README 

        





  

    Logo

  



  
Threads-clone



  


    A sleek platform for threaded discussions

    


    


    Explore the docs »

    


    


    View Demo

    .

    Report Bug

    .

    Request Feature

  



## Table Of Contents



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

* [Built With](#built-with)

* [Getting Started](#getting-started)

  * [Prerequisites](#prerequisites)

  * [Installation](#installation)

* [Usage](#usage)

* [Roadmap](#roadmap)

* [Contributing](#contributing)

* [License](#license)

* [Authors](#authors)

* [Acknowledgements](#acknowledgements)



## About The Project



![Screen Shot](https://res.cloudinary.com/dkozeltxi/image/upload/v1705165530/portfolio/rxrpjgghzvuwp47rvc9b.png)



The Threads Clone is a visually stunning full-stack web application crafted with Next.js, MongoDB, Shadcn UI, TailwindCSS, Clerk, Serverless APIs, React Hook Form, Zod, and TypeScript. It features robust authentication, engaging threaded discussions, nested comments, user profiles, and notifications. Admins can manage community-specific threads and members. 



## Built With



* [Next.js 14](https://nextjs.org/)

* [MongoDB](https://www.mongodb.com/)

* [Shadcn UI](https://ui.shadcn.com/)

* [TailwindCSS](https://tailwindcss.com/)

* [Clerk](https://clerk.dev/)

* [React Hook Form](https://react-hook-form.com/)

* [Zod](https://github.com/colinhacks/zod)

* [TypeScript](https://www.typescriptlang.org/)



## Getting Started



### Prerequisites



Make sure you have the following installed on your machine:



- Git

- Node.js

- npm (Node Package Manager)



## Cloning the Repository



```sh

git clone https://github.com/MeerUzairWasHere/threads-clone

cd threads

```



### Installation



Install the project dependencies using npm:



```sh

npm install

```



## Set Up Environment Variables



Create a new file named `.env` in the root of your project and add the following content:



```env

MONGODB_URL=

CLERK_SECRET_KEY=

UPLOADTHING_SECRET=

UPLOADTHING_APP_ID=

NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=

```



Replace the placeholder values with your actual credentials. Obtain these credentials by signing up for the corresponding websites on MongoDB, Clerk, and Uploadthing.



## Running the Project



```sh

npm run dev

```



Open [http://localhost:3000](http://localhost:3000) in your browser to view the project.



## Usage



**Features**



- **Authentication:**

  - Secure user authentication using Clerk for email, password, and social logins (Google and GitHub) with a comprehensive profile management system.



- **Visually Appealing Home Page:**

  - Engaging home page design showcasing the latest threads for an immersive user experience.



- **Create Thread Page:**

  - Dedicated page enabling users to easily create threads, fostering community engagement.



- **Commenting Feature:**

  - Facilitate discussions within threads with a robust commenting feature.



- **Nested Commenting:**

  - Commenting system with nested threads for a structured and organized conversation flow.



- **User Search with Pagination:**

  - User-friendly search feature with pagination for convenient exploration and discovery of other users.



- **Activity Page:**

  - Display notifications on the activity page when someone comments on a user's thread, enhancing user engagement.



- **Profile Page:**

  - User profile pages for showcasing information and enabling modification of profile settings.



- **Figma Design Implementation:**

  - Transform Figma designs into a fully functional application with pixel-perfect and responsive design.



- **Blazing-Fast Performance:**

  - Optimal performance and instantaneous page switching for a seamless user experience.



- **Server Side Rendering:**

  - Leverage Next.js with Server Side Rendering for enhanced performance and SEO benefits.



- **MongoDB with Complex Schemas:**

  - Handle complex schemas and multiple data populations using MongoDB.



- **File Uploads with UploadThing:**

  - Seamless media sharing experience with file uploads using UploadThing.



- **Real-Time Events Listening:**

  - Stay updated with real-time events listening through webhooks.



- **Middleware, API Actions, and Authorization:**

  - Robust application security through the use of middleware, API actions, and authorization mechanisms.



- **Next.js Layout Route Groups:**

  - Utilize new Next.js layout route groups for efficient routing.



- **Data Validation with Zod:**

  - Ensure data integrity with data validation using Zod.



- **Form Management with React Hook Form:**

  - Efficiently manage forms with React Hook Form for a streamlined user input experience.



## Roadmap



See the [open issues](https://github.com/MeerUzairWasHere/Threads-clone/issues) for a list of proposed features (and known issues).



## Contributing



Contributions are what make the open source community such an amazing place to be learn, inspire, and create. Any contributions you make are **greatly appreciated**.

* If you have suggestions for adding or removing projects, feel free to [open an issue](https://github.com/MeerUzairWasHere/Threads-clone/issues/new) to discuss it, or directly create a pull request after you edit the *README.md* file with necessary changes.

* Please make sure you check your spelling and grammar.

* Create individual PR for each suggestion.

* Please also read through the [Code Of Conduct](https://github.com/MeerUzairWasHere/Threads-clone/blob/main/CODE_OF_CONDUCT.md) before posting your first idea as well.



### Creating A Pull Request



1. Fork the Project

2. Create your Feature Branch (`git checkout -b feature/AmazingFeature`)

3. Commit your Changes (`git commit -m 'Add some AmazingFeature'`)

4. Push to the Branch (`git push origin feature/AmazingFeature`)

5. Open a Pull Request

 



## Authors



* [Mir Uzair](https://github.com/MeerUzairWasHere)