Build a Full Stack Chat App: Beginner's Step-by-Step Guide

Creating a full stack chat application is an excellent project to learn and practice your web development skills. In this tutorial, you will learn how to create a chat application using popular web technologies such as HTML, CSS, JavaScript, Node.js, Express, and Socket.IO.

Table of Contents

  1. Prerequisites
  2. Setup the Project
  3. Design the Frontend
  4. Build the Backend
  5. Socket.IO Integration
  6. Testing and Deployment
  7. Conclusion


Before starting this tutorial, make sure you have the following installed on your system:

  • Node.js (v12.x or higher)
  • npm (v6.x or higher)
  • A code editor (such as Visual Studio Code)

Setup the Project

  1. Create a new directory for the project and navigate to it using the command line:

    mkdir chat-app
    cd chat-app
  2. Initialize a new Node.js project by running npm init -y.

  3. Install the required dependencies:

    npm install express
  4. Create the following directories and files:

    mkdir public
    cd public
    mkdir css
    mkdir js
    touch index.html
    touch css/main.css
    touch js/app.js
    cd ..
    touch server.js

Design the Frontend

  1. Open the public/index.html file and add the following HTML code:

    <!DOCTYPE html>
    <html lang="en">
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Chat App</title>
        <link rel="stylesheet" href="css/main.css">
        <div class="chat-container">
            <div class="chat-header">Chat App</div>
            <div class="chat-messages" id="chat-messages"></div>
            <div class="chat-input">
                <input type="text" id="message" placeholder="Type your message...">
                <button id="send">Send</button>
        <script src="/"></script>
        <script src="js/app.js"></script>
  2. Open the public/css/main.css file and add some basic styles:

    body {
        font-family: Arial, sans-serif;
        background-color: #f0f0f0;
    .chat-container {
        width: 400px;
        margin: 50px auto;
        background-color: #fff;
        border: 1px solid #ddd;
        border-radius: 5px;
    .chat-header {
        background-color: #4caf50;
        color: #fff;
        font-size: 20px;
        padding: 10px;
        text-align: center;
    .chat-messages {
        height: 300px;
        overflow-y: scroll;
        padding: 10px;
    .chat-input {
        display: flex;
        padding: 10px;
    .chat-input input {
        flex: 1;
        padding: 5px;
    .chat-input button {
        background-color: #4caf50;
        color: #fff;
        padding: 5px 10px;
        margin-left: 5px;
        border: none;
        cursor: pointer;

Build the Backend

  1. Open the server.js file and add the following code to set up an Express server:

    const express = require('express');
    const app = express();
    const http = require('http').createServer(app);
    const PORT = process.env.PORT || 3000;
    http.listen(PORT, () => {
        console.log(`Server is running on port ${PORT}`);

Socket.IO Integration

  1. Add Socket.IO to the server.js file:

    const io = require('')(http);
    io.on('connection', (socket) => {
        console.log('A user connected');
        socket.on('disconnect', () => {
            console.log('A user disconnected');
        socket.on('chat message', (msg) => {
            io.emit('chat message', msg);
  2. Open the public/js/app.js file and add the following code to connect the frontend to the backend:

    const socket = io();
    document.getElementById('send').addEventListener('click', () => {
        const message = document.getElementById('message').value;
        socket.emit('chat message', message);
    socket.on('chat message', (msg) => {
        const chatMessages = document.getElementById('chat-messages');
        chatMessages.innerHTML += `<p>${msg}</p>`;

Testing and Deployment

  1. Run the application locally:

    node server.js
  2. Open a web browser and navigate to http://localhost:3000.

  3. Test the chat app by sending messages.

  4. Deploy the application to a hosting service like Heroku.


Congratulations! You have successfully built a full stack chat application using HTML, CSS, JavaScript, Node.js, Express, and Socket.IO. This project can be extended further by adding features such as user authentication, private messaging, and chat rooms. Happy coding!

An AI coworker, not just a copilot

View VelocityAI