An open API service indexing awesome lists of open source software.

https://github.com/chef0111/dev4room

Dev4Room - Q&A Platform for developers
https://github.com/chef0111/dev4room

nextjs16 orpc platform postgres react typescript

Last synced: 4 months ago
JSON representation

Dev4Room - Q&A Platform for developers

Awesome Lists containing this project

README

          



typescript
nextdotjs
tailwindcss
postgresql
shadcnui
openai

Dev4Room


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

## ๐Ÿ“‹ Table of Contents

1. ๐Ÿค– [Introduction](#introduction)
2. โš™๏ธ [Tech Stack](#tech-stack)
3. ๐Ÿ”‹ [Features](#features)
4. ๐Ÿคธ [Quick Start](#quick-start)
5. ๐Ÿ—„๏ธ [Database Setup](#database-setup)
6. ๐Ÿ”— [Assets](#links)

## ๐Ÿค– 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](https://git-scm.com/)
- [Node.js](https://nodejs.org/en)
- [npm](https://www.npmjs.com/) (Node Package Manager)

**Cloning the Repository**

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

**Installation**

Install the project dependencies using bun:

```bash
# 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:

```env
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](https://neon.tech/).
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:

```bash
bun install -g neonctl
```

Authenticate with Neon:

```bash
neonctl auth login
```

To open your Neon project in the browser via terminal:

```bash
neonctl projects open
```

Replace `` 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:

```bash
bun run db:push
```

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

**Running the Project**

```bash
bun run dev
```

Open [http://localhost:3000](http://localhost:3000) in your browser to view the project.

## ๐Ÿ”— Assets

Assets used in the project can be found [here](https://drive.google.com/file/d/18Lx36LFiQrAhuhmcQYDzG3FgQMCjwXdX/view?usp=sharing)