SETUP-GUIDE.md

Discord-Like Chat Application

A comprehensive real-time chat application with Discord-like features including user profiles, friends system, shop, voice channels, and media sharing.

Features

User Management

• User registration and login with email/password
• JWT-based authentication
• Editable user profiles with bio and avatar
• Persistent accounts saved in MongoDB

Chat & Messaging

• Real-time messaging with Socket.IO
• Text channels and voice channel support
• Typing indicators
• Media sharing (photos & videos)
• Message history

Social Features

• Friends list system
• Friend requests with accept/reject
• Online status tracking
• Member list with online indicators

Shop & Economy

• In-game shop with purchasable items
• Coin currency system (1000 starting coins)
• User inventory
• Purchase tracking

UI/UX

• Discord-inspired dark theme
• Responsive design (desktop, tablet, mobile)
• Channel sidebar with quick access
• Member sidebar
• Profile panel

Installation & Setup

Prerequisites

• Node.js (v14 or higher)
• MongoDB (local or cloud)
• npm (comes with Node.js)

Step 1: Install Dependencies

npm install

Step 2: Configure Environment Variables

1. Copy .env.example to .env:

cp .env.example .env

2. Edit .env and set your MongoDB connection:

MONGODB_URI=mongodb://localhost:27017/discord-app
JWT_SECRET=your_secret_key_here

Step 3: Start MongoDB

Make sure MongoDB is running on your system.

Windows (if using local MongoDB):

mongod

Or use MongoDB Atlas (cloud):

• Sign up at https://www.mongodb.com/cloud/atlas
• Create a cluster
• Get your connection string
• Update MONGODB_URI in .env

Step 4: Start the Server

npm start

Or for development with auto-reload:

npm run dev

The server will start at http://localhost:3000

How to Use

1. Create Account

• Click "Register"
• Enter username, email, and password
• Click "Create Account"

2. Log In

• Enter your email and password
• Click "Login"

3. Send Messages

• Select a channel from the left sidebar
• Type your message in the input box
• Press Enter or click the send button

4. Share Media

• Click the paperclip icon in the message input
• Select an image or video from your computer
• The file will be sent in the message

5. Manage Profile

• Click the profile icon (top right)
• Edit your username and bio
• Click "Save Profile"
• Check your inventory and coins

6. Add Friends

• Click the Friends icon (users icon) in the left guild sidebar
• Accept friend requests from others
• View your current friends list

7. Use the Shop

• Click the Shop icon (store icon) in the left guild sidebar
• Browse available items
• Click "Buy" to purchase items (uses coins)
• Check inventory in your profile

Project Structure

message-app/
├── server.js              # Express & Socket.IO backend
├── client.js              # Frontend JavaScript
├── index.html             # Frontend HTML
├── package.json           # Dependencies
├── .env                   # Environment variables (create this)
├── .env.example           # Example environment file
└── README.md              # This file

API Endpoints

Authentication

• POST /api/register - Register new user
• POST /api/login - Login user

Profile

• GET /api/profile/:userId - Get user profile
• PUT /api/profile - Update profile

Friends

• POST /api/friends/request - Send friend request
• GET /api/friends/requests - Get pending requests
• POST /api/friends/accept - Accept friend request
• GET /api/friends - Get friends list

Shop

• GET /api/shop - Get shop items
• POST /api/shop/buy - Purchase item
• GET /api/inventory - Get user inventory

Channels

• POST /api/channels - Create channel
• GET /api/channels - Get channels

🔌 Socket.IO Events

Client to Server

• join - User joins with token
• join channel - Join a channel
• leave channel - Leave a channel
• send message - Send message
• typing - User is typing
• stop typing - User stopped typing
• start voice call - Start voice call

Server to Client

• users update - Online users list updated
• message - New message received
• user typing - User is typing
• user stop typing - User stopped typing
• voice call started - Voice call started

🛠️ Configuration

MongoDB

You can use either:

1. Local MongoDB: Install MongoDB Community Edition
2. MongoDB Atlas: Free cloud hosting at https://www.mongodb.com/cloud/atlas

JWT Secret

Change the JWT_SECRET in .env to a secure random string for production:

node -e "console.log(require('crypto').randomBytes(32).toString('hex'))"

Port

Default port is 3000. Change in .env:

PORT=8080

Mobile Support

The app is fully responsive and works on:

• Desktop (Chrome, Firefox, Safari, Edge)
• Tablet (iPad, Android tablets)
• Mobile phones (iOS, Android)

Troubleshooting

"Cannot connect to MongoDB"

• Make sure MongoDB is running (mongod command)
• Check MONGODB_URI in .env
• Verify MongoDB port (default 27017)

"Port already in use"

• Change PORT in .env
• Or kill the process: lsof -ti:3000 | xargs kill -9

"Socket.IO connection failed"

• Check if server is running
• Verify correct server URL
• Check CORS settings in server.js

Files not uploading

• Check file size (max 50MB)
• Verify file type (images/videos only)
• Check browser console for errors

Default Shop Items

The shop comes with these starting items (add more by modifying server.js):

• Discord Nitro Badge - 500 coins
• Profile Border - 300 coins
• Custom Status - 200 coins
• Emote Pack - 250 coins

Security Notes

1. Change JWT_SECRET in production
2. Use strong MongoDB passwords
3. Enable HTTPS in production (use setup-https.ps1)
4. Keep dependencies updated with npm update

Support

For issues or questions:

1. Check the troubleshooting section
2. Review server console for errors
3. Check browser console (F12) for client errors

Future Enhancements

• Direct messaging (DMs)
• Message reactions with emojis
• Message editing and deletion
• Voice call with WebRTC
• Video streaming
• File storage with cloud services
• Admin commands
• Server roles and permissions
• Message pins
• Custom emoji upload

---

Made with using Node.js, Express, Socket.IO, and MongoDB