# 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 ```bash npm install ``` ### Step 2: Configure Environment Variables 1. Copy `.env.example` to `.env`: ```bash 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):** ```bash 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 ```bash npm start ``` Or for development with auto-reload: ```bash 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: ```bash 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**