https://github.com/mohit-rajak/chat_application
CHAT APPLICATION
https://github.com/mohit-rajak/chat_application
authentication expressjs mongodb nodejs reactjs redux session socket-io tailwind
Last synced: 5 days ago
JSON representation
CHAT APPLICATION
- Host: GitHub
- URL: https://github.com/mohit-rajak/chat_application
- Owner: Mohit-Rajak
- License: mit
- Created: 2025-01-22T04:13:39.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-01-23T05:48:22.000Z (over 1 year ago)
- Last Synced: 2025-02-22T06:18:23.925Z (over 1 year ago)
- Topics: authentication, expressjs, mongodb, nodejs, reactjs, redux, session, socket-io, tailwind
- Language: JavaScript
- Homepage: https://chat-frontend-zeta-ecru.vercel.app/
- Size: 499 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
- Security: SECURITY.md
Awesome Lists containing this project
README
# Chat Application MERN-Stack Web Application.
---
---
## Project Overview
_A real-time **Chat application** built using the MERN stack (MongoDB, Express, React, Node.js) and styled with Tailwind CSS. It supports user authentication, group chats, and instant messaging with real-time updates via Socket.IO. The application is fully responsive and provides smooth communication with features like notifications and state management using Redux._
## Technologies & Packages Used
- **MongoDB**: NoSQL database for flexible and scalable data storage.
- **Express.js**: Web application framework for Node.js, providing robust features for web and mobile applications.
- **Node.js**: JavaScript runtime for server-side development.
- **React.js**: A JavaScript library for building reusable UI components and efficient single-page application views.
- **Tailwind CSS**: A utility-first CSS framework for rapid UI development.
- **Socket.IO**: Enables real-time, bidirectional and event-based communication.
- **JWT (JSON Web Tokens)**: Securely transmits information between parties as a JSON object.
- **Redux**: A Predictable State Container for JavaScript Apps.
- **React-Toastify**: A JavaScript library for providing toast notifications in React.
## Key Features
- **User Authentication:** SignIn, SignUp, and Logout functionality.
- **Real-time Chat:** Users can send and receive messages in real-time.
- **Group Chat:** Create and participate in group chats.
- **Message Notifications:** Get notified of new messages with sound and visual alerts.
- **State Management:** Manage application state efficiently using Redux.
- **Responsive Design:** Tailwind CSS for a responsive and modern user interface.
## How to Install
Follow these steps to set up and run the project locally:
1. **Clone the Repository:**
```bash
git clone https://github.com/Mohit-Rajak/CHAT_APPLICATION.git
cd CHAT_APPLICATION
```
2. **Install Dependencies:**
Frontend Folder :
```bash
cd frontend
npm install
```
Backend Folder :
```bash
cd backend
npm install
```
3. **Set Up Environment Variables:**
Configure the following environment variables by creating a .env file in the root of Forntend and Backend Folder:
Frontend Folder :
```bash
VITE_BACKEND_URL=http://localhost:8080
```
Backend Folder :
```bash
FRONTEND_URL=http://localhost:5173
MONGODB_URI=mongodb://127.0.0.1:27017/ChattinApp
PORT=8080
JWT_SECRET=secret-kvndkvdlkajkhkJkBiu6JJNjkbhkvnskcmhLJ5dKbkjsamnv
```
Replace the values with your specific configurations.
4. **Run the Application:**
Frontend Folder :
```bash
npm run dev
```
Backend Folder :
```bash
npm run dev
```
5. **Open in Your Browser:**
Open `http://localhost:5173` in your web browser.
## Project Structure
├── frontend
│ ├── public
│ ├── src
│ │ ├── assets
│ │ ├── components
│ │ ├── pages
│ │ ├── redux
│ │ ├── socket
│ │ ├── utils
│ │ ├── App.jsx
│ │ ├── main.jsx
│ │ └── index.css
│ ├── index.html
│ ├── tailwind.config.js
│ ├── .env
│ └── package.json
├── backend
│ ├── config
│ ├── controllers
│ ├── middlewares
│ ├── models
│ ├── routes
│ ├── server.js
│ ├── .env
│ └── package.json
└── README.md
## Author
Mohit Rajak \
Email: contact.mohitrajak022004@gmail.com \
LinkedIn : https://www.linkedin.com/in/mohit-rajak/
## Thank You
Thank you for exploring Chat App! Your feedback is valuable. If you have any suggestions or thoughts, feel free to share them with us. 😊
---