/chat-app

Realtime chat application that created using MERN stack

Primary LanguageJavaScriptMIT LicenseMIT

Forks Stargazers Issues MIT License LinkedIn


Logo

Chat Application

An awesome chat application based on website
Explore the docs »

View Demo · Report Bug · Request Feature

Table of Contents
  1. About The Project
  2. Getting Started
  3. Contributing
  4. License
  5. Contact
  6. Acknowledgments

About The Project

Chat Application is a web application that allows their user to communicate with each other. This application has realtime messageing feature, search people by their ID, add friend, audio and video call, voice recorder, and other cool features as well, of course with the support of complete authentication flow.

back to top

Built With

Main technology used to built this application are listed below:

back to top

Getting Started

To get started with this project locally, follow below steps:

Prerequisites

Make sure you have package manager (either npm or yarn)

FYI: This project uses npm as package manager, but you're free to use yarn too.

  • Install Yarn (Only for user who want to use yarn)
    npm i -g yarn
    

Installation

Below steps will guide you through the local installation process of this application

  1. Get your Google Client ID, Google Client Secret, and also GMail Refresh Token from here
  2. Get your facebook app ID at here
  3. Get your MongoDB cloud connection at here
  4. Clone the repo
    git clone https://github.com/stanleyclaudius/chat-app.git
    
  5. Install project dependency
    Make sure that your terminal pointing at the root directory of this project (chat-app folder).
    npm i && cd client && npm i
    
  6. Complete the .env variable
    Rename .env.example file at server/config directory become .env, then fill the value for every key. Below is the guideline for filling the .env value:
    Key What To Fill Example Value
    PORT Your server port 5000
    CLIENT_URL Your client side URL http://localhost:3000
    MONGO_URL Your MongoDB URL mongodb://user:user1234@main-shardxxxx
    ACCESS_TOKEN_SECRET Random complex string for JWT DUhxdx183)_--aACN#2%
    REFRESH_TOKEN_SECRET Random complex string for JWT 17hdjcD7ud(-*&732~
    ACTIVATION_TOKEN_SECRET Random complex string for JWT kc81i^&%`-Did##1Z
    GOOGLE_CLIENT_ID Your google client ID 3392348929324-tarur228dxxx
    GOOGLE_CLIENT_SECRET Your google client secret GOCSPX-xxxxxxx
    GMAIL_REFRESH_TOKEN Your gmail refresh token 1//028dhdjBMudu2829xxx
    MAIL_SENDER_ADDRESS Email that want to be used to send mail example@gmail.com
  7. Complete the constant.ts value
    Rename constant.example.ts file at client/src/utils directory become constant.ts, then fill the value for every constant. Below is the guideline for filling the constant.ts value:
    Key What To Fill Example Value
    GOOGLE_CLIENT_ID Your google client ID 3392348929324-tarur228dxxx
    FACEBOOK_APP_ID Your facebook app ID 18239943847394
  8. Lastly, run below command at your terminal to spin off the application
    npm run dev && cd client && npm start
    

back to top

Contributing

If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement". Don't forget to give the project a star! Thanks again!

  1. Fork the Project
  2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
  3. Commit your Changes (git commit -m 'Add some AmazingFeature')
  4. Push to the Branch (git push origin feature/AmazingFeature)
  5. Open a Pull Request

back to top

License

Distributed under the MIT License. See LICENSE.txt for more information.

back to top

Contact

LinkedIn: Stanley Claudius

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

back to top

Acknowledgments

Special thanks to:

  • Othneildrew for providing an amazing README template.
  • React Icons for providing icon to be used in this application.
  • Tailwind CSS for providing CSS framework to be used in this application.
  • Heroku for providing hosting service for this application.

back to top