https://github.com/codersunny812/stellarchat
This is an chat application which is made using mern stack. In this mern application in which the user can logged in into the app and communicate with other person in real time and also user can make video and audio call and also upload status which is visible for 24Hr.
https://github.com/codersunny812/stellarchat
chat-application expressjs nodejs reactjs socket-io webapp webrtc
Last synced: 3 months ago
JSON representation
This is an chat application which is made using mern stack. In this mern application in which the user can logged in into the app and communicate with other person in real time and also user can make video and audio call and also upload status which is visible for 24Hr.
- Host: GitHub
- URL: https://github.com/codersunny812/stellarchat
- Owner: codERSunny812
- Created: 2024-02-05T13:44:20.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-12-26T14:08:27.000Z (over 1 year ago)
- Last Synced: 2026-01-03T11:39:01.990Z (6 months ago)
- Topics: chat-application, expressjs, nodejs, reactjs, socket-io, webapp, webrtc
- Language: JavaScript
- Homepage: https://chat-kro-two.vercel.app
- Size: 676 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 💬Stellar Chat
StellarChat is a cutting-edge messaging platform designed to bring people closer together, no matter where they are. With our intuitive interface and robust features, staying connected with friends and loved ones has never been easier.
# 📦Tech Stack
- **ReactJs**: Frontend library for building user interfaces.
- **React Icons**: Library providing popular icons for React projects.
- **NodeJs**: It's used for creating the backend of this.
- **ExpressJS**: Backend framework for building APIs and handling server logic.
- **MongoDB**: NoSQL database for storing user data and chat history.
- **Socket.io**: Library for enabling real-time, bidirectional communication.
- **Lottie Animation**: To add animation to our Website.
- **React-Toastify:** To Show animation to the user.
- **Cloudinary:** To upload the image on the server.
- **Multer:** A middleware which is used to manage the file upload in form.
# 👨🏼🍳Features
ChatApp offers a comprehensive suite of features designed to facilitate seamless communication between users:
- **User Authentication**: Create personalized accounts and securely log in.
- **Real-time Messaging**: Engage in text-based communication with instant message delivery.
- **Video Calls**: Initiate video calls directly within the app.
- **Audio Calls**: User can make audio call with his friend with in the app.
- **Responsive Design**: Enjoy a consistent and intuitive user experience across all platforms.
- **Data Persistence**: MongoDB ensures the persistence of user data and chat history.
- **Status Upload:** The User can upload any picture as his/her Status and also also see the status of the people who loggedIn into the app and upload any status.
- **Profile Picture:** User can upload a picture during the registration in the app and that picture will be shown as the profile picture of the app.
# ⛏️Process
1. ### Planning and Setup
The development process began with thorough planning to outline the project's requirements, features, and technologies to be used.
2. ### Backend Development
We built the backend using Express.js to create RESTful APIs for user authentication, message handling, and video call functionality.
3. ### Frontend Development
With the backend in place, we focused on front-end development using React. We designed and implemented the user interface, leveraging React hooks and state management libraries for efficiency.
4. ### Testing and Debugging
Thorough testing was conducted to identify and address any bugs or issues. Unit tests, integration tests, and end-to-end tests were performed to ensure reliability.
5. ### Deployment and Optimization
The application was deployed to a hosting platform, with optimization for performance, scalability, and security. Continuous integration and deployment pipelines were set up for smooth updates.
6. ### Monitoring and Maintenance
Monitoring tools were implemented to track the application's performance, uptime, and user activity. Regular maintenance and updates were performed to address security vulnerabilities and enhance user experience.
# 📚Learning
We gained insights and skills in various areas during the development process:
- **Real-Time Communication**: Mastered Socket.io for real-time messaging and optimizing performance.
- **Authentication with JWT**: Implemented secure user authentication using JSON Web Tokens.
- **MongoDB Integration**: Gained expertise in NoSQL databases and efficient data retrieval.
- **Frontend Development**: Developed interactive interfaces with React and CSS.
- **CI/CD Implementation**: Set up continuous integration and deployment pipelines for efficiency.
- **Collaboration Skills**: Improved communication and teamwork through collaborative project work.
- **Cloudinary :** Gained expertise in file upload and how to the file upload will work behind the scene.
# ✨Improvement
Feel free to provide suggestions or contribute to the project. Your feedback is valuable to us!
# 🚦Running Projects
## Clone the repo:
```bash
git clone https://github.com/codERSunny812/ChatKro.git
```
## Move to the directory
- For the Frontend:
```bash
cd ChatKro client
```
- For the Backend
```bash
git ChatKro server
```
## Install the Dependencies:
- For the Frontend:
```bash
npm install
```
- For the Backend
```bash
npm install
```
## Start the development Server:
- For the Frontend:
```bash
npm run dev
```
- For the Backend
```bash
npm run start
```
## App UI:
###### Splash Screen of the App:
---
###### Home of the App:
---
###### Registration Page of the App:
---
###### Login Page of the App:
---
###### Home Page of the App:
---
###### Mobile View of the App:
---
