/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.

Primary LanguageJavaScript

💬Chatkro

Chatkro 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:

git clone https://github.com/codERSunny812/ChatKro.git

Move to the directory

  • For the Frontend:
cd ChatKro client
  • For the Backend
git ChatKro server

Install the Dependencies:

  • For the Frontend:
npm install
  • For the Backend
npm install

Start the development Server:

  • For the Frontend:
npm run dev
  • For the Backend
npm run  start

App UI:

Splash Screen of the App:

1712501677029

Home of the App:

1712501743868

Registration Page of the App:

1712501776943

Login Page of the App:

1712501801927

Home Page of the App:

1712501836663

Mobile View of the App:

1712501871372