StackIt – A Minimal Q&A Forum Platform

🧩 Problem Statement (ID: 2)

Design and develop StackIt, a minimal Question-and-Answer platform that supports collaborative learning and structured knowledge sharing. The platform should be simple, intuitive, and focused on the core experience of asking and answering questions within a community.

The system must:

• Allow users to ask and answer questions using a rich text editor.
• Implement voting, tagging, and answer acceptance features.
• Include user roles (Guest, User, Admin) with appropriate permissions.
• Support notifications and moderation controls for admins.

---

📚 Project Overview

StackIt is a lightweight and focused Q&A platform tailored for learning communities. It emphasizes simplicity, collaboration, and meaningful interactions without unnecessary complexity.

🔑 User Roles & Permissions

Role	Permissions
Guest	View all questions and answers
User	Register, log in, post questions and answers, vote on answers
Admin	Moderate content, ban users, send announcements, download reports

---

🧠 Core Features

1. Ask Questions

• Submit questions with:
  • Title – Concise and descriptive
  • Description – Created using a rich text editor
  • Tags – Multi-select input (e.g., React, JWT)

2. Rich Text Editor

Supports formatting options for both questions and answers:

• Bold, Italic, Strikethrough
• Numbered & Bullet lists
• Emoji insertion
• Hyperlinks
• Image uploads
• Text alignment: Left, Center, Right

3. Answering Questions

• Logged-in users can answer any question
• Full formatting supported via the same rich text editor

4. Voting & Accepted Answers

• Users can upvote/downvote answers
• Question owners can mark one answer as accepted

5. Tagging System

• Mandatory tags on questions
• Helps in content discovery and categorization

6. Notification System

• Bell icon shows unread count
• Notifications for:
  • Answers to user’s question
  • Comments on user’s answers
  • Mentions via @username
• Dropdown view for recent activity

🔐 Admin Capabilities

Admins have access to moderation and analytics tools:

• Reject inappropriate or spammy questions
• Ban users violating platform policies
• Send platform-wide messages (e.g., feature updates, downtime alerts)
• Download reports: user activity, feedback, question/answer statistics

⚙️ Tech Stack

• Frontend: Next.js 15.3.5, React 19, TypeScript, Tailwind CSS
• Backend: Next.js API Routes (Serverless)
• Database: MongoDB
• Text Editor: TipTap with rich text extensions
• Authentication: Clerk
• UI Components: Radix UI primitives
• Styling: Tailwind CSS with custom theme
• Animation: Framer Motion
• Icons: Lucide React

---

📁 Project Structure

StackIt/
├── app/                      # Next.js app directory
│   ├── admin/               # Admin dashboard pages
│   ├── api/                 # API routes
│   ├── ask/                 # Question creation page
│   ├── question/           # Question detail pages
│   ├── search/             # Search results page
│   ├── sign-in/            # Authentication pages
│   └── sign-up/            # User registration pages
├── components/              # React components
│   ├── editor/             # Rich text editor components
│   └── ui/                 # Reusable UI components
├── lib/                    # Utility functions and types
└── public/                 # Static assets

🛠️ Setup Instructions

Prerequisites

• Node.js 18+ [Download]
• MongoDB database [MongoDB Atlas]
• Clerk account for authentication [Sign up]

Installation

1. Fork the techy4shri/stackit repository:

2. Clone the repository:

   git clone https://github.com/techy4shri/stackit.git
   cd stackit

3. Install dependencies:

   npm install

4. Run the development server:

   npm run dev

5. Open http://localhost:3000 in your browser.

Build for Production

npm run build
npm start

Development Commands

• npm run dev - Start development server
• npm run build - Build for production
• npm start - Start production server

---

👥 Team Details

Role	GitHub
Team Lead	Garima
Member	Swati Sharma
Member	Priyanshu Aggarwal