Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/aryman-sharma/advance-chat-app-up.
Advance Chat App offers seamless real-time messaging with support for group chats, file sharing, emoji integration, and instant updates.
https://github.com/aryman-sharma/advance-chat-app-up.
express nodejs reactsjs shadcn tailwindcss zustand
Last synced: 2 days ago
JSON representation
Advance Chat App offers seamless real-time messaging with support for group chats, file sharing, emoji integration, and instant updates.
- Host: GitHub
- URL: https://github.com/aryman-sharma/advance-chat-app-up.
- Owner: Aryman-sharma
- Created: 2024-09-08T09:18:59.000Z (19 days ago)
- Default Branch: main
- Last Pushed: 2024-09-08T10:04:37.000Z (19 days ago)
- Last Synced: 2024-09-25T15:41:30.317Z (2 days ago)
- Topics: express, nodejs, reactsjs, shadcn, tailwindcss, zustand
- Language: JavaScript
- Homepage:
- Size: 8.57 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Advance-Chat-App-Up.
## Overview
**Advance Chat App** is a fully responsive, real-time messaging platform built with modern web technologies. It supports group and personal chats, real-time communication, emoji support, and file handling.
## Features
- **Frontend**: Built with [React](https://reactjs.org/) ⚛️
- **UI Components**: Powered by [ShadCN](https://shadcn.dev/) 🧩
- **Styling**: Tailored with [Tailwind CSS](https://tailwindcss.com/) 🎨
- **Responsiveness**: Fully Responsive Design 📱💻
- **Authentication**: Secure with JWT Tokens 🔑
- **File Handling**: Managed with [Multer](https://www.npmjs.com/package/multer) for File and Image Storage 📁📷
- **File Download**: Easy File Downloading Feature 📥
- **Real-time Messaging**: Instant Communication using [Sockets](https://socket.io/) 💬
- **Chat Support**: Group Chats and Personal Messages 👥💬
- **Fun Conversations**: Emoji Support 😄
## Images
Below are some of the Images that this project showcases:
# Advance Chat App
## Screenshots
## Backend
- **Node.js**: Fast, scalable backend built with [Node.js](https://nodejs.org/) 🛠️
- **Express**: Robust API management using [Express](https://expressjs.com/) 🚀
- **Database**: Efficient Data Storage with [MongoDB](https://www.mongodb.com/) 🗄️
## State Management
- **Zustand**: Seamless State Management with [Zustand](https://zustand-demo.pmnd.rs/) 🧠
## API Calls
- **Axios**: Smooth API Interactions with [Axios](https://axios-http.com/) 🌐
## Code Quality
- **Structured and Maintainable**: Clean, well-organized, and scalable codebase 📚
## Installation
1. Clone the repository:
```bash
git clone https://github.com/your-username/advance-chat-app.git
```
2. Install dependencies:
```bash
cd advance-chat-app
npm install
```
3. Set up environment variables:
- Create a `.env` file in the root directory and add the necessary variables.
```env
MONGODB_URI=your_mongo_uri
JWT_SECRET=your_jwt_secret
SOCKET_PORT=your_socket_port
```
4. Run the development server:
```bash
npm start
```
## Usage
- Open the app in your browser at `http://localhost:3000`.
- Sign up and start chatting with friends or in group chats.
- Share files, images, and emojis with ease.
## Technologies Used
| Technology | Description |
| ------------- | ------------------------------------- |
| React | Frontend JavaScript framework |
| ShadCN | UI Components for React |
| Tailwind CSS | Utility-first CSS framework |
| JWT Tokens | Authentication management |
| Multer | File handling middleware |
| Sockets | Real-time communication |
| MongoDB | NoSQL database |
| Zustand | State management solution |
| Axios | HTTP client for API requests |