Stackit - Q&A Platform

Team Member 1 Name : Patel Dhruv Email : [email protected]

Team Member 2 Name : Jain Dhruv Email : [email protected]

Team Member 3 Name : Parth Patel Email : [email protected]

Team Member 4 Name : Prince Chaudhari Email : [email protected]

A modern Q&A platform built with React, TypeScript, Node.js

Features

Frontend (React + TypeScript)

• Modern UI/UX: Clean, responsive design with dark mode support
• Real-time Notifications: Toast notifications for all user actions
• Dynamic Content: Questions, answers, comments, and tags are all dynamic
• Search & Filtering: Advanced search and filtering capabilities
• Pagination: Efficient pagination for large datasets
• Authentication: Secure login/register with JWT tokens
• Voting System: Upvote/downvote questions and answers
• Comment System: Add comments to answers
• Tag Management: Browse and filter by tags
• Error Handling: Comprehensive error handling with user-friendly messages

Backend (Node.js + Express + MongoDB)

• RESTful API: Complete REST API with Swagger documentation
• Authentication: JWT-based authentication with refresh tokens
• Database: MongoDB with Mongoose ODM
• Validation: Comprehensive input validation
• Error Handling: Centralized error handling
• Notifications: Real-time notification system
• Voting System: Secure voting with duplicate prevention
• Search: Full-text search capabilities
• Pagination: Efficient pagination for all endpoints

Getting Started

Prerequisites

• Node.js (v16 or higher)
• MongoDB (v4.4 or higher)
• npm or yarn

Installation

1. Clone the repository

   git clone <repository-url>
   cd stackit

2. Install dependencies

   # Install backend dependencies
   cd backend
   npm install
   
   # Install frontend dependencies
   cd ../frontend
   npm install

3. Environment Setup

   # Copy environment file
   cd ../backend
   cp example.env .env

   Edit .env file with your configuration:

   PORT=5000
   MONGODB_URI=mongodb://localhost:27017/stackit
   JWT_SECRET=your-secret-key
   JWT_REFRESH_SECRET=your-refresh-secret-key
   NODE_ENV=development

4. Start the application

   # Start backend (from backend directory)
   npm start
   # or for development
   npm run dev
   
   # Start frontend (from frontend directory)
   npm run dev

5. Access the application

   • Frontend: http://localhost:5173
   • Backend API: http://localhost:5000
   • API Documentation: http://localhost:5000/api-docs

API Endpoints

Authentication

• POST /api/auth/register - Register new user
• POST /api/auth/login - Login user
• POST /api/auth/logout - Logout user
• GET /api/auth/verify - Verify token

Questions

• GET /api/questions - Get all questions with filtering
• GET /api/questions/:id - Get specific question
• POST /api/questions - Create new question
• PUT /api/questions/:id - Update question
• DELETE /api/questions/:id - Delete question
• POST /api/questions/:id/vote - Vote on question

Answers

• GET /api/answers/:questionId - Get answers for question
• POST /api/answers - Create new answer
• PUT /api/answers/:id - Update answer
• DELETE /api/answers/:id - Delete answer
• POST /api/answers/:id/vote - Vote on answer
• POST /api/answers/:id/comments - Add comment to answer

Tags

• GET /api/tags - Get all tags with filtering
• GET /api/tags/:id - Get specific tag
• GET /api/tags/name/:name - Get tag by name
• GET /api/tags/name/:name/questions - Get questions by tag name
• GET /api/tags/popular - Get popular tags

Notifications

• GET /api/notifications - Get user notifications
• PUT /api/notifications/:id/read - Mark notification as read

Features in Detail

Voting System

• Users can upvote/downvote questions and answers
• Prevents voting on own content
• Toggle votes (click again to remove vote)
• Real-time vote count updates

Comment System

• Add comments to answers
• Comments show author and timestamp
• Real-time comment updates

Tag System

• Browse all tags with search and filtering
• View questions by specific tag
• Tag colors for different categories
• Tag statistics (question count)

Search & Filtering

• Search questions by title and content
• Filter by tags
• Sort by newest, most voted, most viewed
• Pagination for all results

Notifications

• Toast notifications for all actions
• Success, error, and info notifications
• Auto-dismiss after 5 seconds

Error Handling

• Comprehensive error messages
• Network error handling
• Backend connection error handling
• User-friendly error display

Development

Backend Development

cd backend
npm run dev  # Start with nodemon
npm test     # Run tests

Frontend Development

cd frontend
npm run dev  # Start development server
npm run build # Build for production
npm run preview # Preview production build