Dev4Room

Build a community-driven platform for developers to ask questions, post answers, and get help from other developers.

📋 Table of Contents

1. 🤖 Introduction
2. ⚙️ Tech Stack
3. 🔋 Features
4. 🤸 Quick Start
5. 🗄️ Database Setup
6. 🔗 Assets

🤖 Introduction

Dev4Room is a community-driven Q&A platform for developers, inspired by StackOverflow but enhanced with modern features like AI-powered answers, semantic search, and gamification. Built with Next.js 16, this full-stack application demonstrates production-ready patterns using the latest App Router features, Server Components, and type-safe APIs.

The platform enables developers to ask questions, post answers, leverage AI for answer generation and enhancement, vote on content, organize saved questions, and discover content through semantic search. Users can build their reputation through contributions, earn badges for achievements, and engage with a gamified system that rewards active participation.

The project uses PostgreSQL with Neon for the database layer, Better-Auth for flexible authentication (Email/Password, GitHub, Google OAuth), and pgvector for AI-powered semantic search. The codebase is organized with a clean separation of concerns—server procedures handle business logic, components manage UI, and services encapsulate complex operations like vector embeddings and indexing. Type safety is maintained throughout with oRPC for end-to-end type-safe API calls, Zod for validation, and TypeScript for compile-time safety.

⚙️ Tech Stack

• Next.js
• Better-Auth
• oRPC
• Arcjet
• PostgreSQL
• Neon
• Zod
• OpenAI
• ShadCN UI
• TypeScript
• TailwindCSS

🔋 Features

Authentication & User Management

• Email/Password Authentication - Secure registration and login with email verification
• OAuth Integration - Sign in with Google or GitHub
• Password Management - Forgot password and reset functionality with OTP verification
• User Profiles - Customizable profiles with name, username, portfolio link, location, and bio
• User Statistics - Track questions, answers, reputation points, and badges

Questions

• Create Questions - Post questions with markdown support and tag association
• Edit & Delete - Full CRUD operations for questions
• Question Details - View detailed question pages with answers, author info, and metrics
• Pagination & Filtering - Browse questions with pagination and search filters
• Top Questions - Discover trending questions sorted by views and upvotes
• View Tracking - Automatic view count tracking for questions

Answers

• Post Answers - Answer questions with rich markdown formatting
• Edit & Delete - Manage your answers with full editing capabilities
• AI-Powered Answers - Generate and enhance answers using OpenAI
• Answer Validation - AI validates answer relevance before enhancement
• Pagination - Navigate through answers with pagination support

Tags

• Tag System - Categorize questions with tags
• Tag Pages - Browse questions by specific tags
• Popular Tags - Discover trending tags in the community
• Tag Filtering - Filter questions by tags

Voting System

• Upvote/Downvote - Vote on questions and answers
• Vote Status - Check your voting status on any content
• Reputation Impact - Votes contribute to user reputation

Collections (Bookmarks)

• Save Questions - Bookmark questions for later reference
• Collection Management - View and manage your saved questions
• Toggle Save - Easily add or remove questions from collections

Search

• Semantic Search - AI-powered semantic search using pgvector and OpenAI embeddings
• Global Command Menu - Quick search with Cmd+K (Mac) or Ctrl+K (Windows)
• Multi-Entity Search - Search across questions, answers, tags, and users
• Similarity-Based Results - Results ranked by semantic similarity
• Real-time Search - Debounced search with instant results

AI Features

• AI Answer Generation - Generate answers using OpenAI
• Answer Enhancement - Improve and format your answers with AI assistance
• Relevance Validation - AI validates that answers are related to questions
• Markdown Formatting - AI-generated answers include proper markdown formatting

Reputation & Badges

• Reputation Points - Earn reputation through questions, answers, and votes
• Badge System - Unlock Gold, Silver, and Bronze badges based on:
  • Question count
  • Answer count
  • Question upvotes
  • Answer upvotes
  • Total views

User Interface

• Responsive Design - Fully responsive layout for all devices
• Dark Mode - Seamless dark/light theme switching
• Command Menu - Quick navigation and search with keyboard shortcuts
• Markdown Editor - Rich markdown editor for questions and answers
• Code Highlighting - Syntax highlighting for code blocks
• Loading States - Smooth loading indicators throughout the app
• Error Handling - Comprehensive error handling with user-friendly messages

🤸 Quick Start

Follow these steps to set up the project locally on your machine.

Prerequisites

Make sure you have the following installed on your machine:

• Git
• Node.js
• npm (Node Package Manager)

Cloning the Repository

git clone https://github.com/chef0111/dev4room.git
cd dev4room

Installation

Install the project dependencies using bun:

# Install bun if not installed
curl -fsSL https://bun.sh/install | bash        # Linux & macOS 
powershell -c "irm bun.sh/install.ps1 | iex"    # Windows

# Install dependencies
bun install

Set Up Environment Variables

Create a new file named .env in the root of your project and add the following content:

NEXT_PUBLIC_APP_URL=

# Better-Auth
BETTER_AUTH_SECRET=
BETTER_AUTH_URL=

# Google OAuth
GOOGLE_CLIENT_ID=
GOOGLE_CLIENT_SECRET=

# GitHub OAuth
GITHUB_CLIENT_ID=
GITHUB_CLIENT_SECRET=

# Resend
RESEND_API_KEY=
RESEND_FROM_EMAIL=

# Database
DATABASE_URL=

# Arcjet
ARCJET_KEY=

# OpenAPI
OPENAI_API_KEY=

EMBEDDING_MODEL=
EMBEDDING_DIMENSIONS=

Replace the placeholder values with your actual credentials. You can obtain these credentials by signing up on the respective websites

🗄️ Database Setup

This project uses PostgreSQL hosted on Neon for the database, with Drizzle ORM for schema management.

Cloud Database Setup (Neon)

1. Sign up for a free account at Neon.
2. Create a new project in your Neon dashboard.
3. Obtain the connection string from your project settings.
4. Set the DATABASE_URL environment variable in your .env file to this connection string.

To manage your Neon project via terminal, install neonctl:

bun install -g neonctl

Authenticate with Neon:

neonctl auth login

To open your Neon project in the browser via terminal:

neonctl projects open <project-id>

Replace <project-id> with your project's ID (found in the Neon dashboard or extract from your DATABASE_URL after the '@' and before the first '.').

5. Push the database schema to the cloud:

bun run db:push

This will create the necessary tables and indexes in your Neon database.

Running the Project

bun run dev

Open http://localhost:3000 in your browser to view the project.

🔗 Assets

Assets used in the project can be found here