A modern, real-time chat application where users can communicate temporarily without registration. Each user receives a random temporary ID valid only for the current session.

TempChat Express Socket.IO

Welcome Screen Initial screen where users can see their temporary ID and connect with others

Incoming Connection Notification when another user wants to connect

Chat Screen Real-time chat interface with message history and typing indicators

✨ No Registration Required - Just open and chat
🔑 Temporary User IDs - Random 6-character IDs generated on connection
⚡ Real-time Messaging - Instant message delivery using WebSocket
🔒 Session-based - All data is temporary and cleared when users disconnect
👥 Peer-to-Peer Connection - Connect directly with another user using their ID
💬 Typing Indicators - See when the other user is typing
📱 Responsive Design - Works seamlessly on desktop and mobile

• React 18 - Modern UI library
• Vite - Fast build tool and dev server
• Socket.IO Client - WebSocket client
• CSS3 - Modern styling with animations

• Node.js - JavaScript runtime
• Express - Web application framework
• Socket.IO - Real-time bidirectional event-based communication
• ES Modules - Modern JavaScript module system

tempchat/
├── client/ # React frontend
│ ├── src/
│ │ ├── components/ # React components
│ │ │ ├── WelcomeScreen.jsx
│ │ │ ├── WelcomeScreen.css
│ │ │ ├── ConnectionRequest.jsx
│ │ │ ├── ConnectionRequest.css
│ │ │ ├── ChatInterface.jsx
│ │ │ ├── ChatInterface.css
│ │ │ ├── MessageList.jsx
│ │ │ ├── MessageList.css
│ │ │ ├── MessageBubble.jsx
│ │ │ └── MessageBubble.css
│ │ ├── context/ # React context for state management
│ │ │ └── ChatContext.jsx
│ │ ├── hooks/ # Custom React hooks
│ │ │ └── useSocket.js
│ │ ├── services/ # Service layer
│ │ │ └── socketService.js
│ │ ├── App.jsx # Main App component
│ │ ├── App.css
│ │ ├── main.jsx # Entry point
│ │ └── index.css # Global styles
│ ├── index.html
│ ├── vite.config.js
│ ├── package.json
│ └── .env
│
├── server/ # Express backend
│ ├── src/
│ │ ├── controllers/ # Request handlers
│ │ │ └── socketController.js
│ │ ├── services/ # Business logic
│ │ │ └── userService.js
│ │ ├── utils/ # Utility functions
│ │ │ └── logger.js
│ │ └── index.js # Server entry point
│ ├── package.json
│ ├── .env
│ └── .env.example
│
├── package.json # Root package.json
├── .gitignore
└── README.md

• Node.js >= 18.0.0
• npm or yarn

# Clone the repository
git clone <your-repo-url>
cd tempchat
# Install root dependencies
npm install
# Install all dependencies (client + server)
npm run install:all

Run both client and server concurrently:

npm run dev

This will start:

• Frontend dev server at http://localhost:5173
• Backend server at http://localhost:5000

Start Backend:

npm run dev:server

Start Frontend:

npm run dev:client

PORT=5000
CLIENT_URL=http://localhost:5173
NODE_ENV=development

VITE_SERVER_URL=http://localhost:5000

1. Open the Application - Navigate to http://localhost:5173

2. Get Your ID - The system automatically assigns you a temporary user ID (e.g., ABC123)

3. Share Your ID - Share your ID with someone you want to chat with

4. Connect - Enter the other user's ID in the connection form and click "Connect"

5. Chat - Once connected, start sending messages in real-time

6. Disconnect - Click the disconnect button (✕) to end the conversation

GET /health # Health check endpoint
GET /api/info # API information

• connection:request - Request connection to another user
• connection:accept - Accept incoming connection request
• message:send - Send a message
• typing:start - Start typing indicator
• typing:stop - Stop typing indicator
• connection:disconnect - Disconnect from current chat

• user:assigned - Receive assigned user ID
• connection:success - Connection established
• connection:request:received - Incoming connection request
• connection:accepted - Connection request accepted
• connection:error - Connection error
• connection:ended - Connection terminated
• message:received - New message received
• typing:user - Other user typing status

• Service Layer Pattern - Business logic separated into services
• Event-driven Architecture - Socket.IO handles real-time events
• In-memory Storage - User data stored temporarily in memory
• Room-based Communication - Isolated chat rooms for each connection

• Context API - Global state management
• Custom Hooks - Reusable logic for Socket.IO integration
• Component-based - Modular and maintainable UI components
• Service Layer - Socket.IO client abstraction

• 6-character alphanumeric IDs (e.g., A1B2C3)
• Generated on connection
• Unique across active sessions
• Automatically cleaned up on disconnect

• No database required
• All data stored in memory
• Automatic cleanup on disconnect
• No persistent user data

• WebSocket-based (Socket.IO)
• Instant message delivery
• Typing indicators
• Connection status updates

1. Backend: Add socket events in socketController.js
2. Frontend: Add event handlers in useSocket.js hook
3. UI: Create components in client/src/components/

• ES6+ features
• Functional components with hooks
• CSS modules for styling
• Comprehensive comments

cd client
npm run build

Update environment variables for production:

• Set proper CORS origins
• Update server URLs
• Set NODE_ENV to production

• Frontend: Vercel, Netlify, or Cloudflare Pages
• Backend: Railway, Render, or Heroku
• Note: Ensure WebSocket support on hosting platform

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)

• No message persistence
• No chat history
• Single active connection per user
• No file sharing
• No group chats

• Message history (in-session)
• File/image sharing
• Group chat support
• Emoji picker
• Message reactions
• Audio/video calls
• End-to-end encryption
• Multiple simultaneous connections
• User status (online/offline)
• Dark mode

Contributions are welcome! Please follow these steps:

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

This project is licensed under the MIT License.

For issues and questions, please open an issue on GitHub.

Made with ❤️ using React and Express