https://github.com/aajafry/communex
this is a real-time chat application frontend repo built with react and more.
https://github.com/aajafry/communex
chat-application group-chat react shadcn-ui socket-io tailwindcss
Last synced: 6 months ago
JSON representation
this is a real-time chat application frontend repo built with react and more.
- Host: GitHub
- URL: https://github.com/aajafry/communex
- Owner: aajafry
- Created: 2024-12-07T14:17:27.000Z (10 months ago)
- Default Branch: main
- Last Pushed: 2025-02-21T15:31:39.000Z (8 months ago)
- Last Synced: 2025-02-21T16:31:11.537Z (8 months ago)
- Topics: chat-application, group-chat, react, shadcn-ui, socket-io, tailwindcss
- Language: JavaScript
- Homepage: https://commun-ex.vercel.app
- Size: 104 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# CommuneX - Frontend 💬
This is the **frontend** for **CommuneX**, a real-time chat application built using React, Socket.IO, and modern UI libraries.
## 🚀 Features
- **User Authentication**: Login, signup, and logout functionality.
- **Real-time Messaging**: Send and receive messages instantly using Socket.IO.
- **Group Chats**: Create and manage group conversations.
- **Media Uploads**: Upload images and attachments (future feature).
- **Responsive Design**: Optimized for all devices (mobile, tablet, desktop).
## 🛠️ Tech Stack
- **React**: Frontend library for building the user interface.
- **Vite**: Fast build tool for development.
- **Socket.IO**: Real-time communication.
- **Axios**: API communication.
- **TailwindCSS / Shadcn**: UI design components.
- **React Router**: Page navigation.
## 📦 Installation
1. Clone the repository:
```bash
git clone https://github.com/aajafry/communex.git
```
2. Install dependencies:
```bash
npm install
```
3. Start the development server:
```bash
npm run dev
```
4. Open the app in your browser:
```arduino
http://localhost:5173
```
## ⚙️ Environment Variables
Create a `.env` file in the root directory and add the following:
```env
VITE_BACKEND=http://localhost:3000
VITE_CLOUDINARY_CLOUD_NAME=(set your cloudinary cloud name)
VITE_CLOUDINARY_UPLOAD_PRESET=(set your cloudinary upload preset)
```
## 🔗 API Integration
The frontend interacts with the backend via REST APIs and socket events. Ensure the backend is running before testing the frontend to avoid API errors.
The CommuneX API can be found at [CommuneX API Repo](https://github.com/aajafry/communex_api.git).