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 ;)