TechHelp Hub - Q&A Forum Platform

About This Project

TechHelp Hub is a full-stack web application built using the MERN stack (MongoDB, Express.js, React, Node.js) following a complete 3-tier architecture.

This Q&A forum platform allows users to register, login, ask programming questions, provide answers, vote on content, and build reputation within the community.

The application features a distinctive 1950s hot rod theme with black, chrome, and red styling - combining classic automotive aesthetics with modern web technology.

🎯 Key Features

👤 User Authentication

Secure JWT-based authentication with bcrypt password hashing, user registration, and login functionality.

❓ Q&A System

Ask questions, provide detailed answers, and organize content by technology categories.

⬆️ Voting System

Upvote and downvote questions and answers to highlight the most helpful content.

✅ Accept Answers

Question authors can mark the best answer as accepted to help future visitors.

🌟 Reputation System

Earn reputation points through community participation and helpful contributions.

📁 Category Sidebar

Browse questions by technology category with a scrollable left sidebar navigation.

🔍 Search & Filter

Search questions and filter by category, sort by newest, oldest, views, or votes.

📊 View Tracking

Automatically track and display question view counts.

🏗️ Architecture

Three-Tier Architecture:

Data Layer: MongoDB database with Mongoose ODM for data modeling and validation
Application Layer: Node.js and Express.js RESTful JSON API with JWT authentication
Presentation Layer: React 18 SPA with React Router, Context API, and Axios

💻 Technology Stack

MongoDB Express.js React 18 Node.js JWT Auth Mongoose React Router Axios bcryptjs Context API

🎨 Design Highlights

1950s Hot Rod Theme: Black, chrome, and red color scheme inspired by classic American automobiles
Metallic Gradients: Chrome-effect styling with gradient overlays and shadow effects
Red Neon Glow: Accent lighting effects on headings and interactive elements
Racing Iconography: Checkered flag branding and automotive-inspired design language
Responsive Design: Mobile-friendly layout that adapts to all screen sizes
Form Validation: Real-time inline validation with immediate user feedback

📱 Application Pages

Home/Landing: Hero section with stats, category cards, and feature highlights
Registration: User signup with inline validation and terms checkbox
Login: Secure authentication with JWT token management
Questions Dashboard: Left sidebar category menu with scrollable question list
Question Detail: Full Q&A view with voting, answers, and comment threads
Ask Question: Form for creating new questions with category and tag selection
Users: Community member directory with reputation scores

🚀 Getting Started

Installation:

Clone the repository
Install dependencies: npm run install-all
Set up MongoDB (local or Atlas)
Configure environment variables in server/.env
Seed database: cd server && npm run seed
Run application: npm run dev

Test Credentials:

Email: john@example.com | Password: password123
Email: jane@example.com | Password: password123

View on GitHub Documentation