Skip to content

Readme.md

Latest commit

 

History

History
239 lines (180 loc) · 5.74 KB

Readme.md

File metadata and controls

239 lines (180 loc) · 5.74 KB

Question Forum - Q&A Platform 💬

A fullstack Q&A (Question & Answer) platform similar to Stack Overflow or Quora, built with React.js and Node.js/Express. Features user authentication, question posting, and community-driven answers.

📋 Overview

Question Forum is a modern Q&A platform that enables users to:

  • Ask questions and get answers from the community
  • Browse and search existing questions
  • Authenticate securely with JWT tokens
  • Participate in knowledge sharing

Perfect for learning fullstack development, REST APIs, and modern web application patterns.

✨ Features

Current Features ✅

  • 🔐 JWT Authentication - Secure user login and registration
  • 📋 Question Listing - Browse all questions with details
  • 🔍 Question Details - View individual questions with answers
  • 👤 User Profiles - User-specific question history

Planned Features 🚧

  • ✏️ Post Questions - Create new questions
  • 💬 Answer Questions - Provide answers to questions
  • 🗄️ Database Integration - Persistent data storage
  • 🗑️ Delete Questions - Remove questions
  • ✏️ Update Questions - Edit existing questions
  • 👤 Enhanced Profiles - Comprehensive user profiles

🛠️ Technology Stack

Frontend

  • React.js - UI library
  • Bootstrap - CSS framework
  • JavaScript (ES6+) - Modern JavaScript features

Backend

  • Node.js - Runtime environment
  • Express.js - Web framework
  • JWT - Authentication tokens
  • REST API - API architecture

🚀 Getting Started

Prerequisites

  • Node.js 12+ and npm
  • Git

Installation

  1. Clone the repository:
git clone https://github.com/bhanuchaddha/Question-Forum.git
cd Question-Forum
  1. Install backend dependencies:
cd backend
npm install
  1. Install frontend dependencies:
cd ../frontend
npm install

Running the Application

  1. Start the backend server:
cd backend
npm start

Backend runs on http://localhost:3001 (or configured port)

  1. Start the frontend development server:
cd frontend
npm start

Frontend runs on http://localhost:3000

📡 API Endpoints

Authentication

POST /api/auth/register
POST /api/auth/login
POST /api/auth/logout

Questions

GET    /api/questions          # Get all questions
GET    /api/questions/:id      # Get question details
POST   /api/questions          # Create question (planned)
PUT    /api/questions/:id      # Update question (planned)
DELETE /api/questions/:id      # Delete question (planned)

Answers

GET    /api/questions/:id/answers  # Get answers for question
POST   /api/questions/:id/answers # Post answer (planned)

🏗️ Project Structure

Question-Forum/
├── backend/                 # Node.js/Express backend
│   ├── src/
│   │   ├── authentication.js
│   │   ├── config.js
│   │   └── index.js
│   └── package.json
├── frontend/                # React.js frontend
│   ├── src/
│   │   ├── components/      # React components
│   │   │   ├── NavBar/
│   │   │   ├── Question/
│   │   │   └── Questions/
│   │   ├── pages/           # Page components
│   │   └── services/        # API services
│   └── package.json
└── README.md

🔐 Authentication Flow

  1. User registers/logs in
  2. Backend generates JWT token
  3. Token stored in localStorage
  4. Token included in API requests
  5. Backend validates token for protected routes

🎨 UI Components

  • NavBar - Navigation with login/logout
  • Questions List - Display all questions
  • Question Detail - Individual question view
  • Login Form - Authentication interface
  • Answer Form - Post answers (planned)

🔧 Configuration

Backend Configuration

// config.js
module.exports = {
  port: process.env.PORT || 3001,
  jwtSecret: process.env.JWT_SECRET || 'your-secret-key',
  // Add database configuration
};

Frontend Configuration

Update API base URL in service files:

const API_BASE_URL = 'http://localhost:3001/api';

🧪 Testing

# Backend tests
cd backend
npm test

# Frontend tests
cd frontend
npm test

📚 Learning Objectives

This project demonstrates:

  • Fullstack JavaScript development
  • RESTful API design
  • JWT authentication
  • React component architecture
  • State management patterns
  • API integration

🛣️ Development Roadmap

  • Implement question posting
  • Add answer functionality
  • Integrate database (MongoDB/PostgreSQL)
  • Add search functionality
  • Implement voting system
  • Add tags/categories
  • User reputation system
  • Rich text editor for questions/answers

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

  1. Fork the repository
  2. Create your feature branch (git checkout -b feature/AmazingFeature)
  3. Commit your changes (git commit -m 'Add some AmazingFeature')
  4. Push to the branch (git push origin feature/AmazingFeature)
  5. Open a Pull Request

📄 License

This project is open source and available for educational purposes.

🔗 Resources

🌟 Use Cases

  • Learning Fullstack Development - Perfect tutorial project
  • Community Q&A Platform - Building knowledge sharing sites
  • Portfolio Project - Showcase fullstack skills
  • API Development - REST API best practices
  • Authentication Patterns - JWT implementation

Built with React & Node.js ❤️