Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/aajafry/communex
this is a 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: 20 days ago
JSON representation
this is a 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 (27 days ago)
- Default Branch: main
- Last Pushed: 2024-12-07T16:29:06.000Z (26 days ago)
- Last Synced: 2024-12-07T17:21:05.992Z (26 days ago)
- Topics: chat-application, group-chat, react, shadcn-ui, socket-io, tailwindcss
- Language: JavaScript
- Homepage: https://commun-ex.vercel.app
- Size: 103 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_BACKED=http://localhost:3000
VITE_AUTH=http://localhost:3000/auth
VITE_USER=http://localhost:3000/user
VITE_GROUP=http://localhost:3000/group
VITE_MESSAGE=http://localhost:3000/message
VITE_CLOUDINARY=http://localhost:3000/cloudinary
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).