ChatApp is a real-time chatting application built with the MERN stack and powered by socket.io to enable real-time messaging between users. It supports user authentication, dynamic conversations, image uploads, and responsive design — all packed into a full-stack modern web app.
- User authentication (JWT-based)
- Real-time messaging with Socket.IO
- Upload profile pictures using Cloudinary
- Global state management using Zustand
- Toast alerts for user feedback
- Responsive and modern UI (Tailwind + Lucide icons)
- Environment-based configuration using
.env
- React.js + Vite.js – Fast and modern React tooling
- Zustand – Lightweight global state management
- Tailwind CSS – Utility-first responsive styling
- Lucide-react – Clean and scalable icons
- Toast – In-app notifications
- Render – Full-stack deployment (frontend + backend)
- Node.js + Express.js – RESTful API backend
- Typescript - Type Safety
- Socket.IO – Real-time WebSocket communication
- MongoDB – NoSQL database for storing users and messages
- Cloudinary – Image upload and storage
- API Rate Limits - Rate limit for security purposes
- Render – PaaS that redeploys on every Git commit
- Postman – API testing
- Git – Version control
- .env – Environment configuration
Both the frontend and backend are deployed together using Render, a platform-as-a-service (PaaS) that integrates with GitHub and automatically redeploys on each commit.
- Live App: https://chatapp-xlyo.onrender.com/
- Repository: https://github.com/Venkateshkamat/ChatApp
Make sure the following are installed:
- Node.js (v16+)
- npm or yarn
- MongoDB Atlas account or local instance
- Cloudinary account (for image uploads)
-
Clone the repository and navigate to the backend:
git clone https://github.com/Venkateshkamat/ChatApp.git cd ChatApp/backend -
Install backend dependencies:
npm install
-
Create a
.envfile with the following variables:MONGODB_URI=your_mongodb_connection_string PORT=3001 JWT_SECRET=your_jwt_secret NODE_ENV=development CLOUDINARY_CLOUD_NAME=your_cloudinary_cloud_name CLOUDINARY_API_KEY=your_api_key CLOUDINARY_API_SECRET=your_api_secret
-
Start the backend server:
npm run dev
-
Navigate to the frontend directory:
cd ../frontend -
Install frontend dependencies:
npm install
-
(Optional) Create a
.envfile if using environment-based API URLs:VITE_API_URL=http://localhost:3001
-
Start the frontend development server:
npm run dev
Contributions are welcome!
To contribute:
- Fork the repository
- Create a new branch:
git checkout -b feature/your-feature-name - Commit your changes:
git commit -m "Add your message" - Push to your forked branch:
git push origin feature/your-feature-name - Submit a pull request
Please follow standard contribution practices. No special guidelines required.
No license has been assigned to this project yet. All rights reserved.
ChatApp · Live Demo · GitHub Repo