Introduction
This is a tutorial article series on making a collaborative drawing app using Javascript, Express (NodeJS), Sequelize, and SQLite. We’ll also be using web sockets, HTML5 canvas, and object oriented programming. This project is written using Node 14.18.2, but really any reasonably modern version of Node should be fine. Note that we’re not using a frontend framework for this project.
This is intended for programmers who already have a basic grasp of Javascript, SQL, and the like. It’s a good project for doing something a little more advanced than the typical beginner’s tutorial you find online. I encourage you to follow along with the project, renaming things and doing things in a way you think makes more sense. I also encourage you to make your own additions to the project. Following tutorials only gets you so far. Adding unique additions of your own show genuine understanding of the code.
Setup
After you’ve created the folder and initialized npm (mkdir collab-draw; cd collab-draw; npm init , etc.), it’s time to install the backend node modules needed.
npm install express body-parser path sequelize sqlite3 ws --save
To organize our code, we’ll create two folders, client and server. Within server, we’ll create the SQLite database. There’s only one table we need, calledroom. This is where we’ll store the images drawn in the app. Create the SQLite database using your tool of choice (I use sqlite3, a command line tool), and create the session table as so:
CREATE TABLE room (id INTEGER PRIMARY KEY AUTOINCREMENT, name TEXT, image TEXT);
Proof of Concept
Before starting too much of the actual project, let’s ensure we can get the Express server handling API requests and serving the frontend.
In the client folder, create index.html as such:
In the server folder, create index.js as such:
Then run node server/index.js
Now we can check if the code is working properly. Go to http://localhost:3000 in your browser. You should see “testing!” Then go to http://localhost:3000/api/test , which should show “test works!”
In the next section we’ll get the basic structure of the frontend up, as well as code to generate the color palette.
