DEV Community

Cover image for Creating a Real-time Chat App with Javascript, PHP, MySQL and Firebase
Samson Andrew
Samson Andrew

Posted on

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


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:


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

Discussion (0)