A Secret Santa App On Dropserver

Inspired by Simon Willison’s post on making a Secret Santa app as a Datasette plugin I decided to write a minimalist Secret Santa app for Dropserver.

Dropserver is my attempt at building a platform for hosting my own personal apps. A primary objective of DS is that it should be really easy for a developer, particularly a frontend developer, to write an app that can be hosted by Dropserver.

DS accomplishes this by using a JavaScript runtime (Deno) and by providing many of the hard parts of backend apps baked in. This means that in a few lines of business logic, written in a language you likely know well, you can build a useful app with many of the bells and whistles of a bigger SaaS app.

Writing the app

Anyways, let’s get going.

This project builds on the Dropserver app tutorial. We will use no new concepts, we will just add more business logic, more routes and more static files to serve (CSS, a font file and a santa-hat.png for cuteness).

Here is the GitHub repo if you want to follow along.

Users

In its current incarnation Dropserver does all the user management for the app. That means the app developer does not need to code any user registration login, password storage, etc… Users even have avatars, which helps make apps more friendly looking.

All the app needs to do is call the getUsers() method to get a list of users. Users are identified by a “proxy ID”, which is a string of alphanumeric characters that is stable and unique for each user. Personally identifying information, such as login email, is not accessible from the app.

As I began writing this app I remembered that I have not yet implemented the user permission system for Dropserver apps. That means that each user is at the same level: and there is no way to distinguish an admin user from a regular user. This is something I will add in a future version of Dropserver, but for now I’ll just have to be a bit clever about when pairings can be generated.

The app will detect whether Secret Santa pairings have been been made already and if the list of users in the pairings match the list of existing users for the app. If not, it will offer to generate the pairings. If a user tries to regenerate the pairings when they have already been generated and match the user list, they will get a message saying they can’t do that.

Once the pairings have been generated a user signing on to their Dropserver and clicking through to the appspace will see who they are paired with, as shown below:

Screenshot of the Secret Santa App showing one user and their Secret Santa. The Secret Santa has a santa hat on. Cute.

Generating pairings

To generate the pairings, we will shuffle an array of users, then make a pair out of a user and the one preceding it in the array. This is simple and guarantees that you don’t pair a user with themselves.

We write the pairs of proxy ids as a json object to a file in the appspace. (An appspace is an app instance, an address where this app can be reached, and a dedicated directory where it can write files. For more details see Dropserver application model.)

While there are no routes that show all the pairings, the user who owns the appspace could download a backup and look at the json file and the user metadata to know what the pairings are. I think this is reasonable for such an app. I could encrypt each pairing like Simon did, but it means asking users to remember yet another pass code. I suspect the most likely outcome is someone not getting a gift because a user forgot their additional pass phrase.

The rest of the app

The entire server side code fits in a single 120 line TypeScript file, including comments and blank lines.

The browser side consists of plain HTML responses generated on the backend via Mustache templates. Hand coded CSS is served statically along with a few image assets and a fun little Christmasy font.

There is no build or packaging step for the frontend or for the Dropserver side.

Hosting your own Secret Santa App

If you have a Dropserver instance running, you just upload the app directory, and click through a confirmation. Then you choose an address (usually a subdomain on a domain you’ve already configured) for your appspace and start adding your users.

Note: you should be running ds-host v0.8.1 or later (I ran into a bug while writing this app and had to push a fix 😬). Documentation on running ds-host is sparse for now. For hints see the Readme.

Currently each user must have a Dropserver login to access an appspace, however it can be on any instance. In the future, users who don’t have a login will be able to access an appspace with just an email address where they will receive a secret login link.

Playing with this app locally

If you don’t have a Dropserver instance handy (and let’s face it, in December 2022 if your name is not Olivier Forget you probably do not) you can install ds-dev (v0.8.1 or later) and Deno to run it on localhost. Using ds-dev you can emulate users to see the different pairings show up. Read about how to use ds-dev here.

Go and fork it

The Secret Santa app is usable as-is, yet there is plenty of room for improvement. The good news is: there is no build step, it’s just plain HTML and CSS, so if you don’t like the background color, just fork it, open it in ds-dev, and tweak it to your liking.

I wrote this app to demonstrate that Dropserver is a platform that makes building simple, almost toy-like multi-user server apps approachable. You can make something basic but useful and fun and you can host it and use it with your friends. Others who want to use it can host their own copy with just a few clicks. And if you want to change something, it will only take a couple minutes to understand the code.

Happy Holidays! I hope your Secret Santa, whoever they are, and however they were selected, gets you something nice.

Olivier Forget

Los Angeles, USA
RSS Email Mastodon

Aerospace Engineer turned sofware developer and bootstrappin' entrepreneur.