https://github.com/ramya487/chat_application
A comprehensive chat application for both individual and group messaging
https://github.com/ramya487/chat_application
chakraui express nextjs socket-io supabase tailwindcss typescript
Last synced: 2 months ago
JSON representation
A comprehensive chat application for both individual and group messaging
- Host: GitHub
- URL: https://github.com/ramya487/chat_application
- Owner: ramya487
- Created: 2024-11-15T12:13:57.000Z (over 1 year ago)
- Default Branch: master
- Last Pushed: 2024-11-17T10:30:19.000Z (over 1 year ago)
- Last Synced: 2024-11-17T11:30:58.342Z (over 1 year ago)
- Topics: chakraui, express, nextjs, socket-io, supabase, tailwindcss, typescript
- Homepage:
- Size: 11.6 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
Awesome Lists containing this project
README
# Chat Application
A sophisticated chat application that enables one-on-one as well as group messaging with real-time capabilities. This platform demonstrates how modern technologies can be integrated to offer a secure and scalable communication experience.
Check out the [Demo Video](https://youtu.be/zO5b5KigzXU)
## Table of Contents
- [Features](#features)
- [Technologies Used](#technologies-used)
- [Tools Used](#tools-used)
- [Architecture](#architecture)
- [Frontend](#frontend)
- [Backend](#backend)
- [Development](#development)
- [License](#license)
## Features
- **Authentication**
Secure login and registration using email and password with JWT stored in cookies for session management.
- **Search Users**
Search functionality to find users via username or email.
- **Profile Image Management**
Users can upload profile images stored and served via Supabase Storage.
- **Real-time Messaging**
Built using `socket.io` to support instant messaging across devices.
- **One-on-One Chat**
Initiate private conversations between two users.
- **Group Chat**
Chat with multiple users in a shared group space.
- **Create Group**: Add users and name the group.
- **Add Members**: Invite new participants.
- **Remove Members**: Remove existing participants.
- **Rename Group**: Edit group name.
- **Exit Group**: Leave the group.
- **UX Enhancements**
- Loading indicators to show ongoing actions.
- Proper error handling with meaningful messages.
- UI messages for empty states and unavailable data.
- Form validation using `Formik` and `Yup`.
- Fully responsive across devices.
## Technologies Used
### Frontend
- React.js
- Chakra UI / Tailwind CSS
- Formik & Yup (Form handling & validation)
- Axios (HTTP requests)
- Socket.io-client
### Backend
- Node.js
- Express.js
- MongoDB (Database)
- Mongoose (ORM)
- Socket.io
- Supabase Storage
- JSON Web Tokens (JWT)
- Cookie-parser
- Bcrypt (Password hashing)
## Tools Used
- **VS Code** - Development environment
- **Postman** - API testing
- **Render / Vercel** - Deployment
- **GitHub** - Version control
## Architecture
### Frontend
- Built using **React.js**
- Socket connection initialized once and shared via context
- State management with hooks and context API
- Axios interceptors for authenticated API requests
- Modular structure with reusable components
### Backend
- REST API built with **Express.js**
- Socket.io server for real-time communication
- Secure authentication with JWT and cookies
- Modular routes and middleware for scalability
- MongoDB models to manage user and chat data
## Development
To run this project locally:
Navigate to the respective repositories to find the instructions to run this application
## License
This project with a MIT license giving permissive usage. For more information, refer to the [LICENSE](LICENSE) file