Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/adityaghode92/chat_app
About Chat Application 😊 using MERN Stack with Tailwind CSS
https://github.com/adityaghode92/chat_app
chat-application expressjs mongodb nodejs react redux rest-api socket-io tailwindcss
Last synced: 6 days ago
JSON representation
About Chat Application 😊 using MERN Stack with Tailwind CSS
- Host: GitHub
- URL: https://github.com/adityaghode92/chat_app
- Owner: adityaghode92
- Created: 2024-09-14T08:39:19.000Z (about 2 months ago)
- Default Branch: main
- Last Pushed: 2024-10-07T06:31:35.000Z (about 1 month ago)
- Last Synced: 2024-10-31T13:05:03.786Z (6 days ago)
- Topics: chat-application, expressjs, mongodb, nodejs, react, redux, rest-api, socket-io, tailwindcss
- Language: JavaScript
- Homepage: https://chat-app-frontend-ashen-five.vercel.app
- Size: 505 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Chat Application MERN-Stack Web Application.
---
.png?alt=media&token=272bf43a-d10b-4b95-bb8e-bfc80da94603)
---
## Project Overview
Chat Application 😊 using MERN Stack with Tailwind CSS
## 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/adityaghode92/Chat_App.git
cd Chat_App
```
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=https://chat-app-backend-ala4.onrender.com
```
Backend Folder :
```bash
FRONTEND_URL=https://chat-app-frontend-ashen-five.vercel.app
MONGODB_URI=mongodb://127.0.0.1:27017/chat-app
PORT=9000
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
## 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. 😊
---