StackIt – A Modern Q&A Platform

Ask It. StackIt - A lightweight, community-driven Q&A platform built for seamless knowledge sharing.

📖 Overview

StackIt is a modern, feature-rich question-and-answer platform designed for collaborative learning and structured knowledge sharing. Built with Next.js 15, TypeScript, and Prisma, it provides a seamless experience for asking questions, providing answers, and building a thriving community of learners and developers.

✨ Features

🔐 Authentication & User Management

• Multi-provider Authentication: Sign in with email/password or Google OAuth
• User Profiles: Customizable profiles with avatars and activity tracking
• Role-based Access: User and Admin roles with different permissions
• Session Management: Secure JWT-based authentication with NextAuth.js

💬 Q&A Core Features

• Rich Text Editor: Advanced editor with TipTap.js supporting:
  • Text formatting (bold, italic, underline, strikethrough)
  • Code blocks with syntax highlighting
  • Headings and lists
  • Images and links
  • Mentions and user tagging
• Question Management: Create, edit, and delete questions with tags
• Answer System: Provide detailed answers with approval workflow
• Voting System: Upvote/downvote answers to highlight quality content
• Comments: Threaded discussions on answers with mentions

🏷️ Content Organization

• Tag System: Categorize questions with custom tags
• Search & Discovery: Find questions and answers easily
• Feed System: Browse latest questions with pagination
• User Activity: Track questions, answers, and comments per user

🔔 Notifications & Engagement

• Real-time Notifications: Get notified for mentions, answers, and comments
• Mention System: Tag users in comments with @username
• Activity Tracking: Monitor user engagement and contributions

🛡️ Moderation & Admin Features

• Answer Approval: Admin-controlled answer approval workflow
• Content Moderation: Edit and delete inappropriate content
• Admin Dashboard: Comprehensive analytics and user management
• User Management: View user statistics and activity

📊 Analytics & Insights

• Content Statistics: Track questions, answers, and comments
• Engagement Metrics: Monitor voting activity and popular tags
• User Analytics: Detailed user activity and contribution metrics
• Visual Charts: Interactive charts and graphs for data visualization

🎨 Modern UI/UX

• Dark Theme: Beautiful dark mode interface
• Responsive Design: Mobile-first responsive layout
• Smooth Animations: Framer Motion powered interactions
• Modern Components: Built with Radix UI and Tailwind CSS

🛠️ Tech Stack

Frontend

• Next.js 15 - React framework with App Router
• TypeScript - Type-safe development
• Tailwind CSS 4 - Utility-first CSS framework
• Framer Motion - Animation library
• TipTap.js - Rich text editor
• Radix UI - Accessible component primitives
• Lucide React - Icon library

Backend & Database

• Next.js API Routes - Server-side API endpoints
• Prisma ORM - Database toolkit and ORM
• PostgreSQL - Primary database
• NextAuth.js - Authentication solution
• bcryptjs - Password hashing

Development Tools

• ESLint - Code linting
• Prettier - Code formatting
• Turbopack - Fast bundler for development

🚀 Getting Started

Prerequisites

• Node.js 18+
• PostgreSQL database
• pnpm (recommended) or npm

Installation

1. Clone the repository

   git clone https://github.com/Ravi0529/StackIt.git
   cd stackit

2. Install dependencies

   pnpm install

3. Set up environment variables Create a .env.local file in the root directory:

   # Database
   DATABASE_URL="postgresql://username:password@localhost:5432/stackit"
   
   # Authentication
   AUTH_SECRET="your-secret-key"
   GOOGLE_CLIENT_ID="your-google-client-id"
   GOOGLE_CLIENT_SECRET="your-google-client-secret"
   
   # NextAuth
   NEXTAUTH_URL="http://localhost:3000"
   NEXTAUTH_SECRET="your-nextauth-secret"

4. Set up the database

   # Generate Prisma client
   pnpm prisma generate
   
   # Run database migrations
   pnpm prisma db push

5. Start the development server

   pnpm dev

6. Open your browser Navigate to http://localhost:3000

Environment Variables

Variable	Description	Required
DATABASE_URL	PostgreSQL connection string	Yes
AUTH_SECRET	Secret key for authentication	Yes
GOOGLE_CLIENT_ID	Google OAuth client ID	Yes
GOOGLE_CLIENT_SECRET	Google OAuth client secret	Yes
NEXTAUTH_URL	NextAuth.js URL	Yes
NEXTAUTH_SECRET	NextAuth.js secret	Yes

📁 Project Structure

StackIt/
├── src/
│   ├── app/                    # Next.js App Router
│   │   ├── (app)/             # Protected app routes
│   │   │   ├── admin/         # Admin dashboard
│   │   │   ├── feed/          # Questions feed
│   │   │   ├── profile/       # User profiles
│   │   │   ├── question/      # Q&A pages
│   │   │   └── search/        # Search functionality
│   │   ├── (auth)/            # Authentication pages
│   │   ├── api/               # API routes
│   │   └── globals.css        # Global styles
│   ├── components/            # Reusable components
│   │   ├── ui/               # UI components
│   │   ├── RichTextEditor/   # TipTap editor
│   │   └── ...               # Other components
│   ├── context/              # React contexts
│   ├── lib/                  # Utilities and configs
│   ├── types/                # TypeScript type definitions
│   └── utils/                # Helper functions
├── prisma/                   # Database schema and migrations
├── public/                   # Static assets
└── assets/                   # Project assets

🗄️ Database Schema

The application uses PostgreSQL with the following main entities:

• Users: Authentication and profile information
• Questions: Main Q&A content with tags
• Answers: Responses to questions with approval workflow
• Comments: Threaded discussions on answers
• Votes: Upvote/downvote system for answers
• Tags: Content categorization
• Notifications: User engagement tracking
• AdminPanel: Moderation and admin actions

🔧 Available Scripts

# Development
pnpm dev          # Start development server with Turbopack

# Production
pnpm build        # Build the application
pnpm start        # Start production server

# Database
pnpm prisma generate    # Generate Prisma client
pnpm prisma db push     # Push schema changes to database
pnpm prisma studio      # Open Prisma Studio

# Linting
pnpm lint         # Run ESLint

🚀 Deployment

Vercel (Recommended)

1. Connect your repository to Vercel
2. Set environment variables in Vercel dashboard
3. Deploy - Vercel will automatically detect Next.js

Other Platforms

The application can be deployed to any platform that supports Next.js:

• Netlify
• Railway
• DigitalOcean App Platform
• AWS Amplify

👥 Team

• Ravi Mistry - mistryravi051005@gmail.com
• Govind Gupta - govind12771277@gmail.com
• Richa Chauhan - chauhanricha2911@gmail.com

🙏 Acknowledgments

• Next.js - React framework
• Prisma - Database toolkit
• TipTap - Rich text editor
• Tailwind CSS - CSS framework
• Radix UI - UI primitives
• Framer Motion - Animation library

📞 Support

If you have any questions or need help, please:

1. Check the Issues page
2. Create a new issue with detailed information
3. Contact the team members directly

---

Made with ❤️ by the StackIt Team