Creating a Real-time Chat App with Javascript, PHP, MySQL and Firebase

Introduction

With the rise in the use of the internet, the need for real-time communication has officially evolved from SMS texts with friends and family to just about any online interaction with anyone.

That's why many companies (not just chat-based companies) are incorporating chat features into their apps.

In this series, I will be taking you step by step on how to build a chat feature into your new or existing app. The chat app will feature 3 screens for simplicity - the login screen, the chat-heads screen and the chat-details screen. Basic functions like image sharing and replying a chat message would be added.

This project will be hosted on GitHub where you would have access to the source code, once completed.

Enough of the intro! I know you're not ready for those stories, so let's dive into action:

Requirements

• A local PHP server or Postman
• A Firebase Project

File Structure

Below is the file structure for the project:

• MyChatApp
• -- index.html
• -- index.js
• -- index.css
• -- img
• ---- avatar.png
• ---- sprite.png
• -- api
• ---- user_access.php
• ---- my_curl.php
• ---- database_files.php
• ---- chat
• ------ chat_read.php
• ------ chat_write.php

Wrapping it up

In this article, I have given you the necessary links to set up your development environment and have shown you the file structure for the project.

In the next article, I will show you how to create the database tables for our real-time chat app and how to create the scripts for performing CRUD operations on the database.

Thank you for reading my article ;)