/Dev-Forum

DevForum is a Next.js 14 fullstack QA platform for developers to ask questions, share knowledge, and engage in a thriving community.

Primary LanguageTypeScript

DevForum - Full Stack Next.js 14 App

~

DevForum is a Next.js 14 fullstack QA platform for developers to ask questions, share knowledge, and engage in a thriving community.

~

🚀 Features

  • 🔧 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.

🛠️ Tech Stack

  • 🚀 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.

🛠️ Run the project

  • 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.local file 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_KEY and CLERK_SECRET_KEY environment variables in the .env.local file. 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_URI environment variable in the .env.local file.
  • TinyMCE: Create a TinyMCE account here and set the NEXT_PUBLIC_TINY_EDITOR_API_KEY environment variable in the .env.local file.
  • OpenAI API: Create an OpenAI account here and set the OPENAI_API_KEY environment variable in the .env.local file.
  • After deploy, create a new webhook on Clerk, add the endpoint of http://<Your-deployed-link>/api/webhook, set user events, and set the NEXT_CLERK_WEBHOOK_SECRET environment variable in the .env.local file.