Git Product home page Git Product logo

chat-app's Introduction

How to Build Full React Chat App

Table of Contents

No. Topics
1 About Code Courses
2 Live Demo
3 Technologies
4 Running the demo
5 Useful links

1. About Code Courses

Code Courses is a website where people learn about coding and different technologies/frameworks/libraries. To help people learn, all of the courses are FREE and DETAIL. Hopefully, after following the content on Code Courses, you will find your dream jobs, and build any applications that you want.

2. Live Demo

  • For the full course, You can refer to this link.

  • You can refer to this Youtube video for the live demo.

3. Technologies

This demo uses:

  • CometChat Pro 3.0.0
  • CometChat UI Kit
  • Firebase
  • React.js
  • Uuid
  • Validator
  • @emotion/core
  • dateformat
  • emoji-mart
  • html-react-parser
  • twemoji

4. Running the demo

To run the demo follow these steps:

  1. Head to CometChat Pro and create an account
  2. From the dashboard, add a new app called "chat-app"
  3. Select this newly added app from the list.
  4. From the Quick Start copy the APP_ID, APP_REGION and AUTH_KEY. These will be used later.
  5. Also copy the REST_API_KEY from the API & Auth Key tab.
  6. Navigate to the Users tab, and delete all the default users and groups leaving it clean (very important).
  7. Download the repository here or by running git clone https://github.com/codecourses-site/chat-app.git and open it in a code editor.
  8. Head to Firebase and create a new project
  9. Create a file called .env in the root folder of your project.
  10. Import and inject your secret keys in the .env file containing your CometChat and Firebase in this manner.
REACT_APP_FIREBASE_API_KEY = xxx - xxx - xxx - xxx - xxx - xxx - xxx - xxx;
REACT_APP_FIREBASE_AUTH_DOMAIN = xxx - xxx - xxx - xxx - xxx - xxx - xxx - xxx;
REACT_APP_FIREBASE_DATABASE_URL = xxx - xxx - xxx - xxx - xxx - xxx - xxx - xxx;
REACT_APP_FIREBASE_STORAGE_BUCKET =
  xxx - xxx - xxx - xxx - xxx - xxx - xxx - xxx;

REACT_APP_COMETCHAT_APP_ID = xxx - xxx - xxx - xxx - xxx - xxx - xxx - xxx;
REACT_APP_COMETCHAT_REGION = xxx - xxx - xxx - xxx - xxx - xxx - xxx - xxx;
REACT_APP_COMETCHAT_AUTH_KEY = xxx - xxx - xxx - xxx - xxx - xxx - xxx - xxx;
REACT_APP_COMETCHAT_API_KEY = xxx - xxx - xxx - xxx - xxx - xxx - xxx - xxx;
  1. Make sure to exclude .env in your gitIgnore file from being exposed online.
  2. Run the following command to install the app.
    npm install
    npm run start

Questions about running the demo? Open an issue. We're here to help โœŒ๏ธ

5. Useful links

chat-app's People

Contributors

hieptl avatar

Watchers

 avatar

Forkers

willsnomercy

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.