YASAC (Yet Another Social App Clone)

A clone to Thread Social App made with minimal features to learn Nextjs SSR Components and Page Routers.

📋 Table of Contents

1. 👋 Introduction
2. 💻 Tech Stack
3. ✨ Features
4. 🐛 Known Issues
5. 🏁 Quick Start
6. 📢 Shout Outs

👋 Introduction

Build a full stack Threads clone using Next.js 14+ with a redesigned look transformed from a Figma design, user interaction to community management, technical implementation, and various features, including nested deep comments, notifications, real-time-search, responsive for all types of devices and more.

💻 Tech Stack

• Next.js
• MongoDB
• Shadcn UI
• TailwindCSS
• Clerk
• Webhooks
• Serverless APIs
• Uploadthing
• React Hook Form
• Zod
• TypeScript
• Vercel

✨ Features

⭐ Authentication:

Authentication using Clerk for email, password, and social logins (Google and Facebook) with a comprehensive profile management system.

⭐ Visually Appealing Home Page and Landing Page:

A visually appealing home page showcasing the latest threads and landing page for an engaging user experience.

⭐ Create Thread Page:

A dedicated page for users to create threads, fostering community engagement.

⭐ Commenting and Nested Commenting Feature:

A commenting feature to facilitate discussions within threads along with nested threads and commenting, providing a structured discussion.

⭐ Delete Commenting and Nested Commenting Feature:

Users now can delete a thread or a comment and also remove all the nested comments for the user profile screen.

⭐ User / Community Search with Pagination:

A user and community search feature with pagination for easy exploration and discovery of other users and communities.

⭐ 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.

⭐ Follow / UnFollow User:

Follow a user to see its threads in your feed. Users can see their or others open users followers from the user profile screen.

⭐ Private Profile:

Feature to make a profile private and remove all the profile threads from the feed of normal users.

⭐ Create and Invite to Communities:

Allow users to create new communities and invite others using customizable template emails.

⭐ Community Member Management:

A user-friendly interface to manage community members, allowing role changes and removals.

⭐ Admin-Specific Community Threads:

Enable admins to create threads specifically for their community and its members.

⭐ Community Profiles:

Display community profiles showcasing threads and members for a comprehensive overview.

⭐ Blazing-Fast Performance:

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

⭐ Server Side Rendering:

Utilize 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:

File uploads using UploadThing for a seamless media sharing experience.

⭐ Real-Time Events Listening:

Real-time events listening with webhooks to keep users updated.

⭐ Middleware, API Actions, and Authorization:

Utilize middleware, API actions, and authorization for robust application security.

⭐ Next.js Layout Route Groups:

New Next.js layout route groups for efficient routing.

⭐ Data Validation with Zod:

Data integrity with data validation using Zod.

⭐ Form Management with React Hook Form:

Efficient management of forms with React Hook Form for a streamlined user input experience.

and many more, including code architecture and reusability.

🐛 Known Issues

• Webhook to add members to the community is failing on vercel.
• Switching between Organization and User account mess up the profile tab.
• UI of some of the features is implemented but functionality is not there like Repost and Send.

🏁 Quick Start

Follow these steps to set up the project locally on your machine.

Prerequisites

Make sure you have the following installed on your machine:

• Git
• Node.js
• npm (Node Package Manager)

Cloning the Repository

git clone https://github.com/TayyabAsghar/yasac.git
cd yasac

Installation

Install the project dependencies using npm:

npm install

Set Up Environment Variables

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

MONGODB_URL=''
CLERK_SECRET_KEY=''
UPLOADTHING_APP_ID=''
UPLOADTHING_SECRET=''
NEXT_CLERK_WEBHOOK_SECRET=''
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=''
NEXT_PUBLIC_CLERK_SIGN_IN_URL='/sign-in'
NEXT_PUBLIC_CLERK_SIGN_UP_URL='/sign-up'
NEXT_PUBLIC_CLERK_AFTER_SIGN_IN_URL='/home'
NEXT_PUBLIC_CLERK_AFTER_SIGN_UP_URL='/onboarding'

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

Running the Project

npm run dev

Open http://localhost:3000 in your browser to view the project.

📢 Shout Outs

My sincere thanks to JavaScript Mastery for having detailed videos on Nextjs for motivating and helping me creating this project.