~
~
- 🔧 Next.js Server Actions: Leverage the power of Next.js server actions for enhanced backend functionality.
- 🔗 Webhooks for Authentication Service: Utilize webhooks for streamlined authentication services.
- ❓ Ask and Answer Questions: Engage in meaningful discussions by posing questions and providing answers
- 🔖 Bookmarking: Save and organize your favorite posts for future reference.
- 🌐 Global Database Data-Fetching: Efficient data fetching from all models of the database for the search bar.
- 🏆 Community Badges & Reputation System: Earn badges and build your reputation within the community.
- 👀 Views and Voting Mechanism: Track views and enable a robust voting mechanism for content.
- 🎯 Filter and Pagination: Enjoy filter and pagination features across various pages for easy navigation.
- 📱 Responsive UI:Experience a responsive user interface that adapts to different screen sizes.
- 🔐 User Authentication: Create a personalized account to fully engage with the community.
- 🌈 Themes: Switch between light and dark themes for a comfortable viewing experience.
- 🧭 Multiple Layouts & Grouped Routes: Explore a well-organized interface with multiple layout options and grouped routes.
- ✨ Form Handling: Efficiently handle forms for seamless user interactions.
- 🏷️ Tag Browsing: Explore content categorically through an intuitive tag-based browsing system.
- 🚀 Next.js 14: A React framework for building server-rendered applications.
- 🌐 Tailwind CSS: A utility-first CSS framework for responsive designs.
- 📘 TypeScript: A typed superset of JavaScript that compiles to plain JavaScript.
- 🔍 ESLint: Pluggable linting utility for JavaScript and TypeScript.
- 📦 MongoDB: Store and manage data efficiently.
- 📚 Mongoose: MongoDB object modeling for Node.js.
- 🚀 clerk: Simplify authentication workflows.
- 🔧 hookform/resolver: Webhooks for authentication services.
- 🎨 Shadcn UI:: Components from the Shadcn UI library.
- 🔤 tailwindcss/typography: Typography plugin for Tailwind CSS.
- 🌈 prismjs: Syntax highlighting for code blocks.
- 📝 react-hook-form: Forms management for React.
- 🛠️ zod: A TypeScript-first schema declaration.
- Clone the repository.
- Install dependency using:
npm install
# or
yarn install- Run the development server:
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev-
Open http://localhost:3000 with your browser to see the result.
-
Create a
.env.localfile in the root directory of the project and add the following environment variables:
# Clerk secrets for api key and webhook
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=
CLERK_SECRET_KEY=
NEXT_CLERK_WEBHOOK_SECRET=
# Clerk routes
NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in
NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up
NEXT_PUBLIC_CLERK_AFTER_SIGN_IN_URL=/
NEXT_PUBLIC_CLERK_AFTER_SIGN_UP_URL=/
# Tiny editor
NEXT_PUBLIC_TINY_EDITOR_API_KEY=
# Database
MONGO_DB_URI=
# OpenAI and public secrets
NEXT_PUBLIC_SERVER_URL=http://localhost:3000
OPENAI_API_KEY=
Notes
- Clerk Authentication: Create a Clerk account here and set the
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEYandCLERK_SECRET_KEYenvironment variables in the.env.localfile. Configure different URLs for Clerk sign-in, sign-up, after sign-in, and after sign-up pages. - MongoDB Database: Create a MongoDB database and connect it to the application. Change the
MONGO_DB_URIenvironment variable in the.env.localfile. - TinyMCE: Create a TinyMCE account here and set the
NEXT_PUBLIC_TINY_EDITOR_API_KEYenvironment variable in the.env.localfile. - OpenAI API: Create an OpenAI account here and set the
OPENAI_API_KEYenvironment variable in the.env.localfile. - After deploy, create a new webhook on Clerk, add the endpoint of
http://<Your-deployed-link>/api/webhook, setuserevents, and set theNEXT_CLERK_WEBHOOK_SECRETenvironment variable in the.env.localfile.