[FEATURE] Add MERN + Realtime Socket.io Template #168
Description
Description:
Add a new MERN template that demonstrates real-time communication using Socket.io. The template will provide an example setup for chat, notifications, or live task updates — allowing developers to quickly bootstrap apps that require instant data sync between client and server.
Motivation
Enable developers to create full-stack real-time applications instantly. This template will serve as a starting point for features like:
- Live chat systems
- Real-time dashboards or task boards
- Notifications or activity feeds
Proposed Features
-
Backend (Express + Socket.io)
- Preconfigured Socket.io server integrated with Express
- Example event listeners for
connection,message, anddisconnect - Separate socket handler file for scalability
- CORS and environment variable setup for frontend URL
-
Frontend (React + socket.io-client)
socket.io-clientintegration with connection handling- Example real-time component (e.g., chat box or live task board)
- State management for live updates
.env.exampleshowing API and socket URLs
-
Common
- Dockerfile and
docker-compose.yml(optional) README.mdwith quickstart instructions.env.examplefor both client and server
- Dockerfile and
Folder Structure Example
mern-realtime/
├── server/
│ ├── index.js
│ ├── socket/
│ │ └── socketHandler.js
│ ├── package.json
│ └── .env.example
├── client/
│ ├── src/
│ │ ├── App.js
│ │ ├── components/ChatBox.js
│ │ └── socket.js
│ ├── package.json
│ └── .env.example
├── Dockerfile
├── docker-compose.yml
└── README.md