DEV Community


Posted on

Let's build a multiplayer movie trivia/quiz game with, svelte and node. devlog #1


Before getting distracted by the redishackathon I was thinking about making a movie trivia/quiz multiplayer game. Only thing i had started with was doing some experimentation with how the interface should work.

Short overview

The idea is I will fetch data from an api like themoviedb or similar and based on that make questions like:

  • rank these 3 movies from year released, newest to oldest or similar data where can do rank question).

  • pick the movie where actor x is acting in.. or any kind of pick one data

Interface basically be a row of images with the movie covers and you use the mouse to drag them when ranking or select when selecting one. Will also have to work on mobile.


Frontend: Svelte
Backend: Node

Later might add redis/mongodb depending on what features I implement.


I kinda suck at planning so for now like no planning, just straight to code and do some planning a bit later when have gotten the basic stuff working.

Get to work

These devlogs will not be super detailed showing each command and so on..


Then just make a new node server and install express and
Just basic stuff so wont go through it in detail.

Now set up the server. It will need to use cors as I in development run the server and client on different ports.


const express = require('express');
const app = express();
const http = require('http');
const server = http.createServer(app);
const { Server } = require('');
const path = require('path');

//dev shite with cors support.. remember to change this later
const io = new Server(server, {
    cors: {
        origin: ['http://localhost:5173', 'http://localhost:5174'],
        credentials: true,

app.use(express.static(path.join(__dirname, 'public'))); //serve static files from the public folder so can run frontend on the same server

server.listen(3000, () => {
    console.log('listening on *:3000');
module.exports = io;
Enter fullscreen mode Exit fullscreen mode

As u see I require in an eventHandler file. This is where all the junk goes as i want to keep it separate so things wont be too cluttered.


module.exports = function (io) {
    io.on('connection', function (socket) {
        const count = io.engine.clientsCount;
        console.log( + ' connected c:' + count);

        socket.on('disconnect', () => {
            console.log( + ' disconnected');

    io.engine.on('connection_error', (err) => {
        console.log(err.req); // the request object
        console.log(err.code); // the error code, for example 1
        console.log(err.message); // the error message, for example "Session ID unknown"
        console.log(err.context); // some additional error context

Enter fullscreen mode Exit fullscreen mode

As u see this file for now only contains some console logs so see what happens and make sure communication is working.


Start with init a new svelte app.

 npm create vite@latest client
Enter fullscreen mode Exit fullscreen mode

Install socket-io.client

npm install socket-io.client
Enter fullscreen mode Exit fullscreen mode

In App.svelte just delete everything and insert some code

    import { io } from '';

    let connected = '';

    const socket = io('http://localhost:3000');

    socket.on('connect', () => {
        connected = 'We got a signal!';

Enter fullscreen mode Exit fullscreen mode

Start up some dev servers n see if stuff is working!


Bam! Works.. also get console.logs on node when connect and disconnect so that's good.

Rambling over for now.. need to get bed now..! To be continued..

Top comments (0)