Visitor count
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.
- 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.
- 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.
Follow these steps to set up and run the project locally:
-
Clone the Repository:
git clone https://github.com/akashdeep023/Chat_App.git cd Chat_App -
Install Dependencies: Frontend Folder :
cd frontend npm installBackend Folder :
cd backend npm install -
Set Up Environment Variables:
Configure the following environment variables by creating a .env file in the root of Forntend and Backend Folder:
Frontend Folder :
VITE_BACKEND_URL=http://localhost:9000
Backend Folder :
FRONTEND_URL=http://localhost:5173 MONGODB_URI=mongodb://127.0.0.1:27017/chat-app PORT=9000 JWT_SECRET=secret-kvndkvdlkajkhkJkBiu6JJNjkbhkvnskcmhLJ5dKbkjsamnv
Replace the values with your specific configurations.
-
Run the Application:
Frontend Folder :
npm run dev
Backend Folder :
npm run dev
-
Open in Your Browser:
Open http://localhost:5173 in your web browser.
├── 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
Akash Deep
Email: contact.akashdeep023@gmail.com
LinkedIn : https://www.linkedin.com/in/akashdeep023/
Profile
Group Create
Chat & Group Overview
Chat & Group Members
Chat & Group Setting
Add User in Group (Admin Access)
Remove User in Group (Admin Access)
User Search & Chat
Notification Box
Notification Alert
Shimmer
Footer
Thank you for exploring Chat App! Your feedback is valuable. If you have any suggestions or thoughts, feel free to share them with us. 😊