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.

Prerequisites
Setup the Project
Design the Frontend
Build the Backend
Socket.IO Integration
Testing and Deployment
Conclusion

Prerequisites

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

Create a new directory for the project and navigate to it using the command line:
```
mkdir chat-app
cd chat-app
```
Initialize a new Node.js project by running npm init -y.
Install the required dependencies:
```
npm install express socket.io
```

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

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

<!DOCTYPE html>
<html lang="en">
<head>
    <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">
</head>
<body>
    <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>
        </div>
    </div>
    <script src="/socket.io/socket.io.js"></script>
    <script src="js/app.js"></script>
</body>
</html>

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

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;

app.use(express.static('public'));

http.listen(PORT, () => {
    console.log(`Server is running on port ${PORT}`);
});

Socket.IO Integration

Add Socket.IO to the server.js file:

const io = require('socket.io')(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);
    });
});

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

Run the application locally:
```
node server.js
```
Open a web browser and navigate to http://localhost:3000.
Test the chat app by sending messages.
Deploy the application to a hosting service like Heroku.

Conclusion

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!