https://github.com/brandonperfetti/next-stack-overflow
Dev Flow — A full-stack Stack Overflow clone with AI-generated answers, built with Next.js 14, MongoDB, Clerk, and OpenAI.
https://github.com/brandonperfetti/next-stack-overflow
clerk mongodb mongoose nextjs openai qa-platform react shadcn-ui tailwindcss typescript
Last synced: about 1 month ago
JSON representation
Dev Flow — A full-stack Stack Overflow clone with AI-generated answers, built with Next.js 14, MongoDB, Clerk, and OpenAI.
- Host: GitHub
- URL: https://github.com/brandonperfetti/next-stack-overflow
- Owner: brandonperfetti
- Created: 2024-07-26T20:23:51.000Z (almost 2 years ago)
- Default Branch: master
- Last Pushed: 2026-03-26T04:56:01.000Z (3 months ago)
- Last Synced: 2026-03-27T01:12:22.609Z (3 months ago)
- Topics: clerk, mongodb, mongoose, nextjs, openai, qa-platform, react, shadcn-ui, tailwindcss, typescript
- Language: TypeScript
- Homepage: https://devflow-coral2.vercel.app/
- Size: 2.99 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Dev Flow — Stack Overflow Clone
**A full-stack Stack Overflow-style Q&A platform with AI-generated answers.**
[Live Demo](https://devflow-coral2.vercel.app) · [Report Bug](https://github.com/brandonperfetti/next-stack-overflow/issues)
---
## Overview
**Dev Flow** is a production-grade Stack Overflow clone built with the **Next.js 14 App Router**. It features a complete developer Q&A experience — from posting questions and writing rich-text answers to voting, tagging, reputation tracking, and AI-assisted answers powered by OpenAI.
This project demonstrates advanced Next.js patterns including server actions, route handlers, dynamic OG images, and Clerk webhooks for user sync.
---
## Features
- ❓ **Ask Questions** — Rich text editor (TinyMCE) with code blocks, formatting, and tag support
- 💬 **Answer System** — Write, edit, and delete answers with full rich text
- 👍 **Voting** — Upvote/downvote questions and answers; reputation system updates accordingly
- 🏷️ **Tagging** — Browse and filter by tags; tag detail pages show related questions
- 🔍 **Global Search** — Search across questions, answers, users, and tags simultaneously
- 🤖 **AI Answers** — Generate AI-powered answers via OpenAI integration
- 👤 **User Profiles** — Public profiles with stats, top questions, and top answers
- 🏆 **Reputation & Badges** — Earn reputation through community engagement
- 🌙 **Dark / Light Mode** — Persistent theme preference
- 🔐 **Authentication** — Clerk-powered auth with webhook-based user sync to MongoDB
---
## Tech Stack
| Technology | Purpose |
|---|---|
| [Next.js 14](https://nextjs.org/) (App Router) | Full-stack React framework |
| [TypeScript](https://www.typescriptlang.org/) | Type safety |
| [MongoDB](https://www.mongodb.com/) + [Mongoose](https://mongoosejs.com/) | Database and ODM |
| [Clerk](https://clerk.com/) | Authentication and user management |
| [OpenAI API](https://platform.openai.com/docs/) | AI-generated answer feature |
| [TinyMCE](https://www.tiny.cloud/) | Rich text question/answer editor |
| [Tailwind CSS](https://tailwindcss.com/) | Utility-first styling |
| [shadcn/ui](https://ui.shadcn.com/) | Accessible component library |
| [Radix UI](https://www.radix-ui.com/) | Headless UI primitives |
| [Zod](https://zod.dev/) | Schema validation |
| [React Hook Form](https://react-hook-form.com/) | Form state management |
| [Svix](https://svix.com/) | Webhook verification for Clerk events |
---
## Getting Started
### Prerequisites
- [Node.js](https://nodejs.org/) v18+
- [npm](https://www.npmjs.com/)
- A [MongoDB Atlas](https://www.mongodb.com/atlas) cluster
- A [Clerk](https://clerk.com/) application
- An [OpenAI](https://platform.openai.com/) API key
- A [TinyMCE](https://www.tiny.cloud/) API key
### Installation
```bash
git clone https://github.com/brandonperfetti/next-stack-overflow.git
cd next-stack-overflow
npm install
```
### Environment Variables
Create a `.env.local` file in the project root:
```env
# Clerk Authentication
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_...
CLERK_SECRET_KEY=sk_...
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=/
# Clerk Webhook (for user sync)
CLERK_WEBHOOK_SECRET=whsec_...
# MongoDB
MONGODB_URL=mongodb+srv://...
# OpenAI
OPENAI_API_KEY=sk-...
# TinyMCE
NEXT_PUBLIC_TINY_EDITOR_API_KEY=your_tinymce_api_key
# App
NEXT_PUBLIC_SERVER_URL=http://localhost:3000
```
### Development
```bash
npm run dev
```
Open [http://localhost:3000](http://localhost:3000) in your browser.
### Production Build
```bash
npm run build
npm run start
```
### Linting
```bash
npm run lint
```
---
## Project Structure
```
next-stack-overflow/
├── app/
│ ├── (auth)/ # Sign-in / Sign-up routes
│ ├── (root)/ # Main app routes
│ │ ├── Home/ # Home feed
│ │ ├── jobs/ # Job board
│ │ └── ...
│ └── api/ # Route handlers (webhooks, AI)
├── components/
│ ├── cards/ # Question, answer, user cards
│ ├── forms/ # Ask question, answer forms
│ ├── shared/ # Navbar, sidebar, search
│ └── ui/ # shadcn/ui base components
├── database/ # Mongoose models and schemas
├── lib/ # Server actions, utilities, validations
├── context/ # Theme provider
├── types/ # TypeScript type definitions
└── constants/ # App-wide constants
```
---
## Deployment
Deploy to [Vercel](https://vercel.com/). Add all environment variables in your Vercel project settings. Configure Clerk webhooks to point to `https://your-domain.com/api/webhooks/clerk`.
[](https://vercel.com/new/clone?repository-url=https://github.com/brandonperfetti/next-stack-overflow)
---
## License
MIT © [Brandon Perfetti](https://brandonperfetti.com)