https://github.com/elyse502/quick-chat
Real-Time Full Stack Chat Application
https://github.com/elyse502/quick-chat
express-js mern-project mern-stack-development mongodb node-js react-vite
Last synced: about 1 month ago
JSON representation
Real-Time Full Stack Chat Application
- Host: GitHub
- URL: https://github.com/elyse502/quick-chat
- Owner: elyse502
- License: mit
- Created: 2025-07-08T14:55:43.000Z (11 months ago)
- Default Branch: main
- Last Pushed: 2025-07-31T14:47:58.000Z (10 months ago)
- Last Synced: 2025-08-10T21:39:55.706Z (10 months ago)
- Topics: express-js, mern-project, mern-stack-development, mongodb, node-js, react-vite
- Language: JavaScript
- Homepage: https://quick-chat-nine-beta.vercel.app
- Size: 1.7 MB
- Stars: 1
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# QUICK-CHAT 💬
Real-Time Messaging, Instant Connections
*Powered by cutting-edge technologies:*
## LIVE - DEMO 🌐
Visit the 👉 [_LINK 🔗_](https://quick-chat-nine-beta.vercel.app)
## Table of Contents
- [Overview](#overview)
- [Key Features](#key-features)
- [Tech Stack](#tech-stack)
- [Project Structure](#project-structure)
- [Getting Started](#getting-started)
- [Prerequisites](#prerequisites)
- [Installation](#installation)
- [Environment Variables](#environment-variables)
- [Usage](#usage)
- [API Endpoints](#api-endpoints)
- [Real-Time Events](#real-time-events)
- [Deployment](#deployment)
- [Contributing](#contributing)
- [License](#license)
---
## Overview
Quick-Chat is a full-stack real-time chat application that enables instant messaging with features like:
- 🔐 Secure user authentication
- ⚡ Real-time message delivery
- 👥 User profiles and status
- 📱 Responsive design for all devices
- 🔄 Message history persistence
- 🔊 Notification system
Built with modern web technologies to deliver a seamless chatting experience.
---
## Key Features
### Real-Time Communication
- Instant message delivery with Socket.io
- Typing indicators
- Online/offline status
- Read receipts
### User Experience
- Clean, modern interface
- Responsive design
- Dark/light mode
- Emoji support
- Message search
### Security
- JWT authentication
- Password encryption
- Protected routes
- Session management
### Advanced Functionality
- Message history
- User profiles
- Notification system
- Image/file sharing (via Cloudinary)
---
## Tech Stack
### Frontend
- **React** with Vite
- **Socket.io-client** for real-time updates
- **Context API** for state management
- **Axios** for HTTP requests
- **Tailwind CSS** for styling
- **React Icons** for beautiful icons
### Backend
- **Node.js** with **Express**
- **Socket.io** for WebSocket communication
- **MongoDB** with **Mongoose**
- **JWT** for authentication
- **Bcrypt** for password hashing
- **Cloudinary** for media storage
### DevOps
- **Vercel** for frontend hosting
- **Render** for backend hosting
- **GitHub Actions** for CI/CD
---
## Project Structure
```groovy
quick-chat/
├── client/ # Frontend application
│ ├── public/ # Static assets
│ ├── src/
│ │ ├── assets/ # Images, icons
│ │ ├── components/ # Reusable components
│ │ │ ├── ChatContainer.jsx
│ │ │ ├── Sidebar.jsx
│ │ │ └── RightSidebar.jsx
│ │ ├── context/ # Global state
│ │ │ ├── AuthContext.jsx
│ │ │ └── ChatContext.jsx
│ │ ├── lib/ # Utilities
│ │ │ └── utils.js
│ │ ├── pages/ # Route pages
│ │ │ ├── HomePage.jsx
│ │ │ ├── LoginPage.jsx
│ │ │ └── ProfilePage.jsx
│ │ └── ... # Other config files
│
├── server/ # Backend application
│ ├── controllers/ # Business logic
│ │ ├── messageController.js
│ │ └── userController.js
│ ├── lib/ # Utilities
│ │ ├── cloudinary.js
│ │ ├── db.js
│ │ └── utils.js
│ ├── middleware/ # Auth middleware
│ │ └── auth.js
│ ├── models/ # Database models
│ │ ├── Messages.js
│ │ └── User.js
│ ├── routes/ # API routes
│ │ ├── messageRoutes.js
│ │ └── userRoutes.js
│ └── ... # Other server files
```
---
## Getting Started
### Prerequisites
- Node.js (v18+)
- npm (v9+)
- MongoDB Atlas account or local MongoDB
- Cloudinary account (for media storage)
### Installation
1. Clone the repository:
```console
git clone https://github.com/elyse502/quick-chat.git
cd quick-chat
```
2. Install dependencies for both client and server:
```console
# Install client dependencies
cd client && npm install
# Install server dependencies
cd ../server && npm install
```
3. Set up environment variables:
Create `.env` files in both `client` and `server` directories with required credentials.
### Environment Variables
**Server (.env)**
```env
MONGO_URI=your_mongodb_connection_string
JWT_SECRET=your_jwt_secret_key
CLOUDINARY_CLOUD_NAME=your_cloudinary_name
CLOUDINARY_API_KEY=your_api_key
CLOUDINARY_API_SECRET=your_api_secret
PORT=5000
```
**Client (.env)**
```env
VITE_API_BASE_URL=http://localhost:5000
VITE_SOCKET_URL=http://localhost:5000
```
4. Start the development servers:
```console
# In one terminal (server)
cd server && npm run dev
# In another terminal (client)
cd client && npm run dev
```
---
## Usage
1. **Register/Login**: Create an account or log in
2. **Find Contacts**: Search for other users
3. **Start Chatting**: Select a contact and begin messaging
4. **Real-Time Updates**: See messages appear instantly
5. **Profile Management**: Update your profile picture and status
---
## API Endpoints
### Authentication
| Method | Endpoint | Description |
|--------|-------------------|----------------------|
| POST | /api/auth/register| Register new user |
| POST | /api/auth/login | Login user |
### Users
| Method | Endpoint | Description |
|--------|-------------------|----------------------|
| GET | /api/users | Get all users |
| GET | /api/users/:id | Get specific user |
| PUT | /api/users/:id | Update user |
### Messages
| Method | Endpoint | Description |
|--------|--------------------|----------------------|
| GET | /api/messages/:chatId | Get chat messages |
| POST | /api/messages | Send new message |
---
## Real-Time Events
### Emitted Events
- `new-user` - When a user connects
- `send-message` - When sending a message
- `typing` - When user is typing
- `stop-typing` - When user stops typing
### Received Events
- `receive-message` - When receiving a message
- `user-connected` - When another user connects
- `user-typing` - When another user is typing
---
## Deployment
### Frontend
[](https://quick-chat-nine-beta.vercel.app)
### Backend
Deploy to Render, Vercel, or other Node.js hosting services with MongoDB connection.
---
## Contributing
1. Fork the repository
2. Create your feature branch (`git checkout -b feature/AmazingFeature`)
3. Commit your changes (`git commit -m 'Add some AmazingFeature'`)
4. Push to the branch (`git push origin feature/AmazingFeature`)
5. Open a Pull Request
---
## License
Distributed under the MIT License. See [LICENSE](https://github.com/elyse502/quick-chat/blob/main/LICENSE) for more information.
---
## 📞 Contact
For any questions or support, please contact:
- [**NIYIBIZI Elysée**](https://linktr.ee/niyibizi_elysee)👨🏿💻 | [Github](https://github.com/elyse502) | [Linkedin](https://www.linkedin.com/in/niyibizi-elys%C3%A9e/) | [Twitter](https://twitter.com/Niyibizi_Elyse).
- **Email**:
[](https://www.linkedin.com/in/niyibizi-elys%C3%A9e/) [](https://twitter.com/Niyibizi_Elyse) [](https://github.com/elyse502)
---
**Quick-Chat** - Where conversations happen in real-time! 🚀✨
**Made with ❤️ by [Elysée NIYIBIZI](https://elyse502.github.io/Elysee-Portfolio/)**
[⬆ Back to Top](#table-of-contents)