Chat Messaging Application

This is a chat messaging application built using JavaScript, Firebase, SASS, React, Vue, and HTML. It allows users to communicate in real-time and offers a seamless and engaging user experience.
Explore the docs »

View Demo

Table of Contents

1. About The Project
   • Built With
2. Features
3. Getting Started
   • Prerequisites
   • Installation
4. Usage
5. Contact

About The Project

This repo consists of a Chat Application built with the React , MUI and firebase. I built this because I was wanted to create a messaging app with a realtime database and be able to incorporate it into other projects.

This is a full-stack chat application that can be up and running with just a few steps. Its frontend is built with Material UI running on top of React. The backend is built with firebase and Node.js. Real-time message broadcasting is developed using Socket.IO.

(back to top)

Built With

• React: A JavaScript library for building user interfaces.
• Vite: A fast build tool for modern web development.
• JavaScript: The programming language used for the application logic.
• HTML: The markup language for structuring the application.
• SASS: A CSS preprocessor for efficient styling.
• Material-UI (MUI): A popular React UI framework for creating beautiful and responsive designs.

(back to top)

Features

• Real-time messaging: Users can send and receive messages instantly, enabling smooth and efficient communication.
• User authentication: The application provides secure user authentication and authorization features to ensure only authorized users can access the chat.
• Responsive design: The user interface is designed to be responsive, providing a consistent experience across different devices.
• Message threading: Users can engage in threaded conversations, making it easier to follow and respond to specific messages.
• Notifications: The application sends notifications to users when they receive new messages or when they are mentioned in a conversation.
• Online presence indicators: Users can see the online status of other users, allowing them to know who is currently active.

(back to top)

Getting Started

These are instructions on setting up your project locally. To get a local copy up and running follow these simple example steps.

Prerequisites

You will need to have an account with firebase, and Node.js installed

This is an example of how to list things you need to use the software and how to install them.

• yarn

  yarn add

Installation

_Below is an example of how you can install and set up your app.

1. Clone the repo

   git clone https://github.com/shawndreifuss/chat-app

2. Navigate to the project directory:

   cd chat-app

3. Install dependencies:

   yarn

4. Set up Firebase:

   • Create a Firebase project and obtain the necessary credentials.
   • Update the Firebase configuration in src/firebase.js with your own credentials.

5. Start the development server

   yarn run dev 

(back to top)

Usage

Create a free account and upload a profile image to begin, once you have signed up you can then use this chat application to message friends, family or anyone that creates an account. With the search feature you can find anyone by their display name and begin!

(back to top)

License

Distributed under the Apache-2.0 License. See LICENSE.txt for more information.

(back to top)

Acknowledgements

• Firebase for providing real-time database and authentication services.
• React and Vite for building the user interface.
• SASS for efficient styling.
• HTML for structuring the application.

Contact

Shawn Dreifuss - [email protected]

Project Link: https://github.com/shawndreifuss/chat-app

(back to top)