Community Discussion Forum with Real-Time Chat

A full-stack MERN community platform that combines discussion forums and real-time communication. Users can create discussion threads, post comments, manage profiles, receive notifications, and communicate instantly through Socket.IO-powered chat channels.

---

Project Overview

Community Discussion Forum with Real-Time Chat is a modern full-stack web application inspired by platforms like Reddit, Discord, and Slack.

The platform provides two powerful communication methods:

• Structured discussions through forum posts and comments
• Instant communication through real-time chat

Users can register, log in, create discussions, comment on posts, join chat channels, edit profiles, and interact with other community members in real time.

This project demonstrates practical Full Stack Development skills including frontend development, backend API development, database design, authentication, and real-time communication.

---

Problem Statement

Many online communities use separate tools for discussions and live communication. Forums are useful for organized conversations, while chat applications are useful for instant interactions.

This project combines both approaches into a single platform where users can:

• Create and participate in discussions
• Add comments and feedback
• Communicate instantly using real-time chat
• Manage profiles and community participation
• Receive updates and notifications

The result is a complete community collaboration platform.

---

Key Features

Authentication

• User Registration
• User Login
• JWT Authentication
• Secure Password Storage
• Protected Routes

Community Forum

• Create Discussion Threads
• View Discussion Listings
• Discussion Detail Pages
• Categories and Tags
• Upvote and Downvote Actions
• Flag Discussion Feature

Comment System

• Add Comments
• View Comments
• Discussion Engagement
• Community Interaction

Real-Time Chat

• Socket.IO Integration
• Channel-Based Communication
• Instant Messaging
• Online User Indicator
• Multi-Browser Real-Time Testing

User Profiles

• Edit Profile
• Update Name
• Add Avatar URL
• Add Skills
• Update Bio

Notifications

• Notification Panel
• Read Notifications
• Community Activity Tracking

Dashboard

• Community Statistics
• Discussion Feed
• Search Interface
• Navigation Sidebar
• Modern Responsive Layout

---

Real-Time Chat Functionality

The chat module is implemented using Socket.IO.

Features include:

• Join Community Channels
• Send Messages Instantly
• Receive Messages Without Refreshing
• Online User Tracking
• Multi-Browser Synchronization

Example Test

Browser 1:

Hello everyone! I am testing the Community Discussion Forum project.

Browser 2:

Message appears instantly without page refresh.

This demonstrates bidirectional real-time communication between users.

---

Tech Stack

Frontend

• React.js
• Vite
• Tailwind CSS
• React Router DOM
• Axios
• Socket.IO Client

Backend

• Node.js
• Express.js
• MongoDB Atlas
• Mongoose
• JWT Authentication
• bcryptjs
• Socket.IO
• dotenv
• cors

Database

• MongoDB Atlas

Development Tools

• VS Code
• Git
• GitHub
• PowerShell
• Thunder Client / Postman

---

System Architecture

User
 │
 ▼
React Frontend
 │
 ├── REST API Requests
 │
 ▼
Express Backend
 │
 ▼
MongoDB Atlas
 │
 └── Data Storage

React Frontend
 │
 ▼
Socket.IO Client
 │
 ▼
Socket.IO Server
 │
 ▼
Real-Time Message Broadcast

---

Project Workflow

User Registration
        ↓
User Login
        ↓
Dashboard
        ↓
Create Discussion
        ↓
View Discussion
        ↓
Add Comment
        ↓
Join Chat Channel
        ↓
Send Real-Time Messages
        ↓
Receive Notifications
        ↓
Update Profile

---

Folder Structure

Community-Discussion-Forum-RealTime-Chat/
│
├── client/
│   ├── src/
│   ├── package.json
│   ├── .env.example
│   └── index.html
│
├── server/
│   ├── config/
│   ├── controllers/
│   ├── middleware/
│   ├── models/
│   ├── routes/
│   ├── sockets/
│   ├── seed/
│   ├── server.js
│   ├── package.json
│   └── .env.example
│
├── docs/
│   └── screenshots/
│
├── README.md
├── .gitignore
└── .env.example

---

Database Collections

Users

Stores:

• Name
• Email
• Password
• Bio
• Skills
• Avatar

Discussions

Stores:

• Title
• Description
• Tags
• Votes
• Author

Comments

Stores:

• Comment Text
• Discussion Reference
• Author Reference

Messages

Stores:

• Channel Messages
• Sender Information
• Timestamps

Notifications

Stores:

• Notification Content
• User Reference
• Read Status

---

API Endpoints

Authentication APIs

POST /api/auth/register
POST /api/auth/login
GET  /api/auth/me

Discussion APIs

GET    /api/discussions
POST   /api/discussions
GET    /api/discussions/:id
PUT    /api/discussions/:id
DELETE /api/discussions/:id
POST   /api/discussions/:id/vote

Comment APIs

GET  /api/comments/:discussionId
POST /api/comments/:discussionId

Profile APIs

GET /api/profile
PUT /api/profile

Notification APIs

GET /api/notifications
PUT /api/notifications/read-all

---

Socket.IO Events

Client → Server

join_room
send_message
typing_start
typing_stop

Server → Client

receive_message
user_online
user_offline
notification
typing

---

Installation Guide

Clone Repository

git clone https://github.com/VaidehiDeore/Community-Discussion-Forum-RealTime-Chat.git
cd Community-Discussion-Forum-RealTime-Chat

---

Environment Variables

server/.env

PORT=5000

MONGO_URI=your_mongodb_connection_string

JWT_SECRET=your_secret_key

CLIENT_URL=http://localhost:5173

client/.env

VITE_API_URL=http://localhost:5000/api

VITE_SOCKET_URL=http://localhost:5000

⚠️ Never upload .env files to GitHub.

Use .env.example instead.

---

Run Backend

cd server

npm install

npm run dev

Expected Output:

MongoDB Connected Successfully
Server running on port 5000
Socket.IO server ready

Backend URL:

http://localhost:5000

---

Run Frontend

Open another terminal:

cd client

npm install

npm run dev

Expected Output:

VITE ready
Local: http://localhost:5173

Frontend URL:

http://localhost:5173

---

Screenshots

Place screenshots inside:

docs/screenshots/

Required Screenshots:

auth-page.png
dashboard.png
create-discussion.png
discussion-comments.png
real-time-chat.png
mongodb-collections.png

Authentication Page

Dashboard

Create Discussion

Discussion Comments

Real-Time Chat

---

Testing Guide

Test the following modules:

Authentication

• Register User
• Login User

Discussion Forum

• Create Discussion
• View Discussion
• Upvote Discussion
• Flag Discussion

Comments

• Add Comment
• View Comment

Chat

• Open Two Browsers
• Join Same Channel
• Send Message
• Receive Message Instantly

Profile

• Update Profile Information

Notifications

• Open Notification Panel

Database

• Verify Data in MongoDB Atlas

---

Learning Outcomes

Through this project I learned:

• Full Stack MERN Development
• React Component Architecture
• Express API Development
• MongoDB Database Design
• Mongoose Modeling
• JWT Authentication
• Password Security using bcrypt
• REST API Design
• Socket.IO Real-Time Communication
• Frontend and Backend Integration
• Profile Management Systems
• Notification Systems
• Git and GitHub Workflow
• Modern UI Development
• Debugging and Testing Techniques

---

Future Enhancements

• Direct Messaging
• Typing Indicators
• Moderator Dashboard
• Admin Dashboard
• Bookmark Discussions
• Rich Text Editor
• Email Notifications
• File Upload Support
• Advanced Search
• Deployment on Cloud Platforms

---

Why This Project Matters

This project demonstrates both traditional web application development and modern real-time communication systems.

It showcases:

• Frontend Development Skills
• Backend Development Skills
• Database Management
• Authentication Systems
• Real-Time Communication
• Software Architecture
• Full Stack Engineering Practices

Making it highly relevant for:

• Full Stack Developer Roles
• MERN Stack Developer Roles
• Backend Developer Roles
• Frontend Developer Roles
• Software Engineer Roles

---

Author

Vaidehi Deore