Design and Build a Chat App with

Course Overview

In this mini series we are going to Design and Build a chat application using We will first discuss basic design concepts while exploring the design for this application in Sketch. We will then move on to laying out our application in HTML and CSS, and lastly, will add Javascript to complete the functionality. Along the way, we are going to use modern Web Development technologies and features such as Flexbox, CSS Variables, ES6 Arrow Functions, ES6 Map, Let and Const variables, Node.js, Express.js, and

  • HTML, CSS, JavaScript
  • Modern JavaScript - Template Strings, Map(), and Arrow Functions
  • CSS Flexbox and Variables
  • NPM, Node, Express
  • Real-time sockets with Socket.IO
  • Web Design with Sketch

Who Is It For

This course is targeted at beginners developers. I would recommend have very basic knowledge of HTML, CSS, and JavaScript. You'll learn the rest along the way!

Course Outline

Part 1 - App Design

In Part 1 of this series, we are going to explore basic design concepts in Web Development like typography, colors, white space, etc. We will explore the design for this demo application, "Quick Chat", in Sketch, one of the most popular design tools available. Additionally, we will look at a helpful resource for testing different color palettes.

Part 2 - Creating HTML Structure and CSS Helper Classes

In Part 2 of this series, we will create the HTML structure for the application as well as stubbing out our CSS with resets, variables, and helper classes.

Parts 3 and 4 - Styling and Laying Out Our App

In Parts 3 and 4 of this series we will begin to style and organize our application. We will stub out dummy message data, create our login and message forms, and align everything using flexbox. Lastly, we will hide the chat window initially so that we can require the user to login to access the chat window.

Part 5 and 6 - Adding Functionality in Javascript

In Parts 5 and 6 of this series, we will dynamically create the HTML for each message in JavaScript by using ES6 template strings and the Map function. We will create the event handlers for our login and message buttons as well as simulating page navigation by hiding/showing login and chat windows appropriately.

Part 7 - Create Node server and Connection

In Part 7 of this series, we will initialize our code as a Node application by using NPM and install Express and as dependencies. We will move the existing HTML, CSS, and JS files we have been working on to a public directory as well as set up the server to serve our application using Express. Lastly, we will add the necessary code to the server and front-end application to register the socket connection with

Part 8 - Complete Integration for Real-Time Messaging

In Part 8 of this series, we will update the event handler for the send message button to send the new message to the server using the socket connection. The server will then broadcast the message to each client that has registered a connection. In other words, the new message will be broadcasted to each user logged into the application. Lastly, we will update the date property of each message to be more human readable.