Quirklr

Quirklr is a dynamic social media platform where users can create threads, engage in discussions, manage communities, and explore personalized user profiles. Built with Next.js, MongoDB, and TailwindCSS, Quirklr offers a seamless experience for connecting and interacting with communities of interest.

➥ Visit Quirklr App

✨ Features

• Thread Creation and Commenting: Users can create new threads on various topics and engage in discussions through comments.

• Notification System: Stay updated with notifications for new comments, replies, and community activities.

• Search Users: Easily find other users by searching their usernames.

• User Profiles: Detailed user profiles showcasing threads created, replies made, and tagged threads.

• Community System: Users can create and manage communities, invite others to join, and post within their chosen communities.

• and many more, including code architecture and reusability.

⚙️ Tech Stack

• Frontend: Next.js, Shadcn UI, TailwindCSS

• Backend: Node.js, Next.js, MongoDB

• Authentication: Clerk for user authentication

• Forms: React Hook Form for form handling

• Validation: Zod for input validation

• Type Safety: TypeScript for type-checking and improved code quality

• Integration: Webhooks for external integrations

• Serverless APIs: Deploy and manage APIs serverlessly

🚀 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/Mahmud0808/Quirklr.git
cd Quirklr

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_SECRET=
UPLOADTHING_APP_ID=
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

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.

🤝 Contributing

Contributions are welcome! Here's how you can contribute:

• Fork the repository.
• Create your feature branch (git checkout -b feature/AmazingFeature).
• Commit your changes (git commit -m 'Add some AmazingFeature').
• Push to the branch (git push origin feature/AmazingFeature).
• Open a pull request.

📬 Contact

Wanna reach out to me? DM me at 👇

Email: mahmudul15-13791@diu.edu.bd