Dev Overflow: A Next.js Question and Answer Platform

Dev Overflow is a dynamic question and answer platform built with Next.js 13, React, and Tailwind CSS. It leverages Clerk for authentication and MongoDB for database management, providing a seamless experience for developers to ask, share, and find answers to their coding questions.

Table of Contents

• Features
• Tech Stack
• Installation
• Usage
• Project Structure
• Contributing
• License
• Important Links

Features 🌟

• User Authentication: Secure user authentication and management powered by Clerk.
• Question & Answer System: Comprehensive functionality for asking questions, providing answers, and engaging in discussions.
• Rich Text Editor: An integrated TinyMCE editor for rich content creation in questions and answers.
• Code Syntax Highlighting: Enhanced readability with Prism.js for code snippets.
• Tagging System: Organize questions and answers with a robust tagging system.
• Search Functionality: Global and local search capabilities to quickly find relevant information.
• User Profiles: Detailed user profiles showcasing their activity, questions, and answers.
• Theming: Supports both light and dark modes for a customizable user experience.
• Pagination: Efficiently navigate through large datasets with pagination.
• Responsive Design: A clean and responsive UI that works seamlessly across devices.
• AI Answer Generation (Experimental): Feature to generate AI-powered answers for questions.

Tech Stack 🛠️

• Frontend: Next.js (App Router), React, TypeScript, Tailwind CSS
• Backend: Node.js, Next.js Server Actions
• Database: MongoDB (with Mongoose)
• Authentication: Clerk
• State Management: React Context API (for Theme)
• UI Components: Radix UI, Shadcn/ui
• Editor: TinyMCE
• Code Highlighting: Prism.js

Installation 🚀

1. Clone the repository:

   git clone https://github.com/rbishal50/dev-overflow-next-13.git
   cd dev-overflow-next-13

2. Install dependencies:

   npm install
   # or
   yarn install

3. Set up environment variables: Create a .env.local file in the root of the project and add your Clerk API key and MongoDB connection string:

   NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_xxxxxxxxxxxxxxxxxxxxxxxxxxxxx
   CLERK_SECRET_KEY=sk_test_xxxxxxxxxxxxxxxxxxxxxxxxxxxxx
   MONGODB_URL=mongodb+srv://your_username:your_password@your_cluster.mongodb.net/your_database_name?retryWrites=true&w=majority
   NEXT_CLERK_WEBHOOK_SECRET=whsec_xxxxxxxxxxxxxxxxxxxxxxxxxxxxx
   NEXT_PUBLIC_TINY_EDITOR_API_KEY=your_tiny_editor_api_key

   Replace placeholders with your actual credentials.

4. Run the development server:

   npm run dev
   # or
   yarn dev

5. Open in browser: Navigate to http://localhost:3000 in your web browser.

Usage 🧑‍💻

Dev Overflow provides a comprehensive platform for developers to:

• Ask Questions: Utilize the "Ask a Question" feature to post your programming queries.
• Answer Questions: Share your expertise by providing answers to existing questions.
• Discover Content: Browse through questions, tags, and popular users.
• Manage Profile: Edit your profile, showcase your portfolio, and track your activity.
• Save Questions: Bookmark questions for later reference.

Project Structure 📂

.next/
public/
styles/
app/
  (auth)/
    layout.tsx
    sign-in/
      [[...sign-in]]/
        page.tsx
    sign-up/
      [[...sign-up]]/
        page.tsx
  (root)/
    layout.tsx
    (home)/
      page.tsx
    collection/
      page.tsx
    community/
      page.tsx
    profile/
      [id]/
        page.tsx
      edit/
        page.tsx
    question/
      [id]/
        page.tsx
      edit/
        [id]/
          page.tsx
    tags/
      [id]/
        page.tsx
      page.tsx
  api/
    webhook/
      route.ts
  globals.css
  layout.tsx
components/
  home/
    HomeFilters.tsx
  shared/
    AllAnswers.tsx
    AnswersTab.tsx
    EditDeleteAction.tsx
    Filter.tsx
    LeftSidebar.tsx
    Metric.tsx
    NoResult.tsx
    Pagination.tsx
    ParseHTML.tsx
    ProfileLink.tsx
    QuestionsTab.tsx
    RenderTag.tsx
    RightSidebar.tsx
    Stats.tsx
    Votes.tsx
    cards/
      AnswerCard.tsx
      QuestionCard.tsx
      UserCard.tsx
    forms/
      Answer.tsx
      Profile.tsx
      Question.tsx
    navbar/
      MobileNav.tsx
      Navbar.tsx
      ThemeSwitcher.tsx
    search/
      GlobalSearch.tsx
      LocalSearch.tsx
  ui/
    badge.tsx
    button.tsx
    form.tsx
    input.tsx
    label.tsx
    menubar.tsx
    select.tsx
    sheet.tsx
    tabs.tsx
    textarea.tsx
constants/
  filters.ts
  index.ts
context/
  ThemeProvider.tsx
database/
  answer.model.ts
  interaction.model.ts
  question.model.ts
  tag.model.ts
  user.model.ts
lib/
  actions/
    answer.action.ts
    interaction.action.ts
    question.action.ts
    shared.types.d.ts
    tag.action.ts
    user.action.ts
  mongoose.ts
  utils.ts
  validations.ts
middleware.ts
next-env.d.ts

Contributing 🤝

Contributions are welcome! If you'd like to contribute, please:

1. Fork the repository.
2. Create a new branch (git checkout -b feature/your-feature-name).
3. Make your changes.
4. Commit your changes (git commit -m 'Add some feature').
5. Push to the branch (git push origin feature/your-feature-name).
6. Open a Pull Request.

License 📜

This project is not currently under any license. Please refer to the repository owner for licensing information.

Important Links 🔗

• Live Demo: (Link to live demo if available)
• Repository: rbishal50/dev-overflow-next-13
• Author: rbishal50

---

© 2023 Dev Overflow. All rights reserved. Fork me on GitHub Like on GitHub Star on GitHub Report an Issue

---

Generated by ReadmeCodeGen