Skip to content

Thread is a Next.js 13-powered web app that enables threaded discussions, community creation, and user interaction. Join discussions, explore communities, and connect with users in this dynamic platform.

Notifications You must be signed in to change notification settings

Ganeshshinde-2003/NextJS-Threads

Repository files navigation

🧵 Thread Clone

Thread is a modern, responsive, and feature-rich web application built using Next.js 13. It allows users to create and participate in threaded discussions on various topics and also offers the functionality to create and join communities where users can post and discuss anything related to that community's theme. Additionally, Thread provides robust user profiles, user search, and activity tracking features, enhancing the overall user experience.

Table of Contents

🌟 Features

  • 🗨️ Threaded Discussions: Create and participate in threaded discussions on a wide range of topics.
  • 📷 Rich Media Support: Share images and other media in your threads to enhance your conversations.
  • 🔗 Hyperlinks: Embed hyperlinks to external websites or resources in your posts.
  • 🎉 Interactive UI: Enjoy a dynamic and user-friendly interface for an enhanced user experience.
  • 🔒 User Authentication: Secure your discussions with user authentication powered by @clerk/nextjs.
  • 🌐 Communities: Create and join communities with specific themes and interests.
  • 📢 Community Posts: Post and discuss topics within communities, fostering a sense of belonging and engagement.
  • 👤 User Profiles: View user profiles to learn more about other members of the community.
  • 🔍 User Search: Easily find and connect with other users using the search functionality.
  • 📝 Create Posts: Share your thoughts and ideas by creating posts within communities.
  • 📈 Activity Tracking: Keep track of your own and others' activity within the platform.
  • 🚀 Performance: Benefit from the speed and performance optimizations of Next.js 13.

🛠️ Installation

To run Thread on your local machine, follow these steps:

  1. Clone this repository to your local machine:

      git clone https://github.com/Ganeshshinde-2003/NextJS-Threads.git
  2. Navigate to the project directory:

      cd thread
  3. Install the project dependencies:

      npm install
  4. Start the development server:

      npm run dev

💡 Usage

  • Sign Up/Login: Create an account or log in to start using Thread.
  • 🔍 Explore Communities: Browse and discover communities that align with your interests.
  • 🤝 Join a Community: Join communities you're interested in by clicking the "Join" button.
  • 👤 View User Profiles: Click on user profiles to view their activity, posts, and other details.
  • 🔎 User Search: Utilize the search feature to find other users and connect with them.
  • 📢 Create a Thread: Click the "New Thread" button to initiate a new discussion within a community. Add a title, content, and any media you want to share.
  • 💬 Participate in Discussions: Explore existing threads within communities and reply to them. Engage in meaningful conversations with other community members.
  • 📝 Create Posts: Share your thoughts, ideas, and updates by creating posts within communities.
  • 📈 Activity Tracking: Keep track of your own activity through your profile and see what other users are up to.
  • 🖌️ Customize Your Profile: Personalize your profile with avatars, bios, and more.
  • 📊 Explore Trends: Discover popular and trending threads and community discussions in the Thread community.

📦 Packages Used

Thread is built using a variety of packages and libraries to provide a seamless and feature-rich experience:

  • @clerk/nextjs (v4.23.2): User authentication for securing your discussions.
  • @clerk/themes (v1.7.5): Themes for customizing the user interface.
  • @hookform/resolvers (v3.2.0): Resolver library for form validation.
  • @radix-ui/react-label (v2.0.2): UI component for labels.
  • @radix-ui/react-slot (v1.0.2): UI component for slots.
  • @radix-ui/react-tabs (v1.0.4): UI component for tabs.
  • @types/node (v20.5.1): Type definitions for Node.js.
  • @types/react (v18.2.20): Type definitions for React.
  • @types/react-dom (v18.2.7): Type definitions for ReactDOM.
  • @uploadthing/react (v5.3.0): 📁 A library for handling file uploads.
  • autoprefixer (v10.4.15): 🚀 PostCSS plugin for adding vendor prefixes.
  • class-variance-authority (v0.7.0): 📊 A utility library.
  • clsx (v2.0.0): 📂 A library for managing CSS classes.
  • lucide-react (v0.268.0): 🎨 SVG icons library.
  • mongoose (v7.4.3): 📦 MongoDB ODM for database operations.
  • next (v13.4.19): ➡️ The Next.js framework.
  • postcss (v8.4.28): 🎨 CSS post-processing tool.
  • react (v18.2.0): ⚛️ The React library.
  • react-dom (v18.2.0): ⚛️ React's DOM rendering library.
  • react-hook-form (v7.45.4): 📝 A library for building forms in React.
  • svix (v1.8.1): 📤 A library for managing webhooks.
  • tailwind-merge (v1.14.0): 🧩 A utility library for merging Tailwind CSS classes.
  • tailwindcss (v3.3.3): 🎨 A utility-first CSS framework.
  • tailwindcss-animate (v1.0.6): 🔄 Animations for Tailwind CSS.
  • typescript (v5.1.6): 🔄 A statically typed superset of JavaScript.
  • uploadthing (v5.3.3): 📁 A library for handling file uploads.
  • zod (v3.22.2): 🏷️ A TypeScript-first schema and validation library.

🤝 Contributing

We welcome contributions from the open-source community.

About

Thread is a Next.js 13-powered web app that enables threaded discussions, community creation, and user interaction. Join discussions, explore communities, and connect with users in this dynamic platform.

Topics

Resources

Stars

Watchers

Forks