https://github.com/techy4shri/stackit
StackIt is a minimal question-and-answer platform that supports collaborative learning and structured knowledge sharing. It’s designed to be simple, user-friendly, and focused on the core experience of asking and answering questions within a community.
https://github.com/techy4shri/stackit
clerk-authentication forum-site full-stack-web-development mongodb nextjs tailwindcss typescript webapp
Last synced: 3 months ago
JSON representation
StackIt is a minimal question-and-answer platform that supports collaborative learning and structured knowledge sharing. It’s designed to be simple, user-friendly, and focused on the core experience of asking and answering questions within a community.
- Host: GitHub
- URL: https://github.com/techy4shri/stackit
- Owner: techy4shri
- Created: 2025-07-12T03:19:57.000Z (12 months ago)
- Default Branch: dev
- Last Pushed: 2025-07-20T20:01:18.000Z (11 months ago)
- Last Synced: 2025-10-04T17:49:10.820Z (9 months ago)
- Topics: clerk-authentication, forum-site, full-stack-web-development, mongodb, nextjs, tailwindcss, typescript, webapp
- Language: TypeScript
- Homepage: https://stack-it-gold.vercel.app
- Size: 287 KB
- Stars: 1
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
Awesome Lists containing this project
README
# StackIt – A Minimal Q&A Forum Platform
[](https://nextjs.org/)
[](https://reactjs.org/)
[](https://www.typescriptlang.org/)
[](https://www.mongodb.com/)
[](https://tailwindcss.com/)
[](https://clerk.com/)
## 🧩 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](https://nodejs.org)]
- MongoDB database [[MongoDB Atlas](https://www.mongodb.com/atlas/database)]
- Clerk account for authentication [[Sign up](https://clerk.com)]
### Installation
1. Fork the [techy4shri/stackit](https://github.com/techy4shri/stackit) repository:
1. Clone the repository:
```bash
git clone https://github.com/techy4shri/stackit.git
cd stackit
```
2. Install dependencies:
```bash
npm install
```
3. Run the development server:
```bash
npm run dev
```
4. Open [http://localhost:3000](http://localhost:3000) in your browser.
### Build for Production
```bash
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](https://github.com/techy4shri) |
| Member | [Swati Sharma](https://github.com/swatified) |
| Member | [Priyanshu Aggarwal](https://github.com/jindalpriyanshu101) |