Live Chat Project

The aim of this project is to create an online chat that allows users to chat in different rooms. The project uses Firebase as the backend and JavaScript as the front end.

ScreenShots:

livechat 1 livechat 1

in this project I used:

  • bootstrap to facilitate writing css
  • Firebase as backend of this project.
  • babel compiler to make new JavaScript features recognizable to all browsers.
  • Webpack (wrapper or bundler) to compile all scattered code together.
  • modern javaScript features( like arrow functions, …)
  • Object-oriented programming
  • Promises (async & await)
  • Fetch and http requests

Definitions:

Bootstrap

Bootstrap is the most popular CSS Framework for developing responsive and mobile-first websites.

Firebase

Google Firebase is a Google-backed application development software that enables developers to develop iOS, Android and Web apps. Firebase provides tools for tracking analytics, reporting and fixing app crashes, creating marketing and product experiment

Babel

Babel is a toolchain that is mainly used to convert ECMAScript 2015+ code into a backwards compatible version of JavaScript in current and older browsers or environments.

Webpack

webpack is a static module bundler for modern JavaScript applications. When webpack processes your application, it internally builds a dependency graph from one or more entry points and then combines every module your project needs into one or more bundles, which are static assets to serve your content from.

How to run

To run funny-quiz, Just use steps below:

  1. Install javascript in your system.
  2. Clone the project https://github.com/HassanZz/LiveChatProject/.
  3. go to file:///directory/index.html to see your funny-quiz version.

TODO

  • make an .env file and insert firebase password into it.
  • Add login page.
  • Add private chat sending feature.
  • Insert specific themes for each room.
  • add tests of code

GitHub

View Github