An AI-powered developer Q&A community platform inspired by Stack Overflow. Built with modern web technologies including Next.js 16, React 19, Tailwind CSS v4, Prisma, PostgreSQL, and Gemini AI.
Figure 1: Main landing page dashboard.
- 🤖 AI-Powered Answers: Generate detailed, context-aware answers to programming questions in real time using the Vercel AI SDK and the
gemini-3.5-flashmodel. - 📝 Markdown Editor: Create, view, and edit questions or answers using a rich Markdown editor, complete with live previews and syntax highlighting for code blocks.
- 🗳️ Voting & Reputation System: Upvote or downvote questions and answers. Earn reputation points for high-quality contributions.
- 🔖 Collections & Bookmarks: Save and bookmark your favorite questions to access them later from your profile.
- 🏷️ Tagging System: Categorize questions with multiple tags to improve searchability and discoverability.
- 💼 Jobs Portal: Search for developer jobs via an integrated jobs board powered by the JSearch API.
- 🔐 Modern Authentication: Secure social sign-ins (GitHub, Google) and email/password authentication using NextAuth.js v5 (Beta).
- 🌓 Dark & Light Modes: Seamless theme switching using
next-themesstyled with Tailwind CSS v4.
- Framework: Next.js 16 (App Router)
- Frontend library: React 19
- Styling: Tailwind CSS v4
- Database & ORM: PostgreSQL & Prisma ORM
- Authentication: NextAuth.js v5 (Beta)
- AI Integration: Vercel AI SDK & Google Gemini 3.5 Flash
- Markdown Processing: @mdxeditor/editor & next-mdx-remote
Make sure you have the following installed on your machine:
- Node.js (v18.x or higher)
- pnpm (preferred),
npm, oryarn - A PostgreSQL database instance (e.g., Supabase, local PostgreSQL, CockroachDB)
git clone https://github.com/your-username/stackunderflow.git
cd stackunderflowInstall project dependencies using your package manager of choice:
pnpm install
# or
npm install
# or
yarn installCreate a .env file in the root directory and configure the following environment variables:
# NextAuth Configuration
AUTH_SECRET="your_nextauth_secret_key"
AUTH_GITHUB_ID="your_github_oauth_client_id"
AUTH_GITHUB_SECRET="your_github_oauth_client_secret"
AUTH_GOOGLE_ID="your_google_oauth_client_id"
AUTH_GOOGLE_SECRET="your_google_oauth_client_secret"
# Database Configuration (Supabase/PostgreSQL)
# Connection to database (e.g. pooler connection)
DATABASE_URL="postgresql://username:password@host:port/database?pgbouncer=true"
# Direct connection for schema migrations
DIRECT_URL="postgresql://username:password@host:port/database"
# Gemini AI API Key
GOOGLE_GENERATIVE_AI_API_KEY="your_google_gemini_api_key"
# RapidAPI Key for Jobs search (JSearch)
RAPID_API_KEY="your_rapidapi_jsearch_key"Run the Prisma command to sync your database schema and generate the client:
npx prisma db pushIf you need to run/apply migrations:
npx prisma migrate devStart the local development server:
pnpm dev
# or
npm run dev
# or
yarn devOpen http://localhost:3000 in your browser to view the application.
├── app/ # Next.js App Router Pages & API Routes
│ ├── (auth)/ # Authentication views (Login, Register)
│ ├── (root)/ # Main application views (Questions, Profile, Community)
│ ├── api/ # API Endpoints (ai, auth, accounts, users)
│ └── layout.tsx # Root Layout configuration
├── components/ # Reusable UI Components
├── constants/ # Fixed values (navigation links, configurations)
├── context/ # React Context Providers (Themes, Auth)
├── lib/ # Helper functions, schemas, database clients
├── prisma/ # Database schema definitions and migrations
├── public/ # Static assets (images, icons)
│ └── screenshots/ # Project screenshots and visuals
└── types/ # TypeScript interfaces and type definitions