Mystery Santa

October 11, 2020

MysterySanta is a simple and free Secret Santa generator app. It takes in a list of people and names and then sends a text to everyone letting them know who they have to get a present for.

The UI is built using React, Apollo GraphQL and ChakraUI. The backend is built using NodeJS and Apollo Server. The entire system is deployed using Heroku.

You can visit the website and try it out yourself at mysterysanta.co.uk.

Source Code:

I was tasked with organising this years Secret Santa for my extended family. Usually we all get together and put all the names in a hat. This year with the whole global epidemic thing going on thats not something that we can do, and I suspected lots of other people might find themselves in a similar position.

I assumed that there would be millions of solutions to this problem already built. I very quickly found out that they all require your participants to sign up, and appear to be fronts to gather personal data and sell you things. Unfortunately that wasn't an option for me because it would have been to confusing to set up all my family members on one of these systems. So I figured I would build something that I could use.

Day to day I build software using agile methodologies so I figured why should side projects be any different. I wanted to get a working iteration of the app deployed and usable as fast as possible. I had a long list of features in my head of what I wanted to be included in the app but I whittled it down to the smallest set possible. I decided the first phase would only include:

Once I had this Minimum Viable Product (MVP) deployed and live I could iterate and add all the other required features.

The first parts I set about building was the backend. I started off with the algorithm to select matches as thats what was going to be all the business logic. I started out with a suite of tests to make sure it only gave everyone out as a match once and didn't give anyone themselves. With this in place it was straight forward to write the algorithm to make the tests pass.

With that built I wrapped it all up in a GraphQL API because I find it the most convenient way to communicate with the client. I also setup the the Twilio integration, which as it happens took about 10 minutes because the docs and API are so fantastic, it really makes a difference when SAAS businesses invest in the developer experience.

I decided to use Chakra UI to power my React frontend because I knew I didn't want to build my own components and I have heard great things about Chakra and it certainly didn't disappoint. I also paired it with react-hook-form to manage my form state which was really easy even though I had a complex use case with an unknown number of input elements all needing validation.

On the backend writing the selection algorithm was actually pretty simple. I decided to TDD the algorithm because I figured it would go wrong easily and this made sure that it worked as designed.

I decided to notify participants of who they have to buy a present for by SMS as it felt like it was the most accessible solution. To send texts to the participants I used Twilio because again I have used it before and the API is so quick to get up and running with.

Lastly, I was keen to get feedback on the application so I grabbed Feedback Fish and integrated it in about two seconds, let me know what you thing of it!

If I was to put more time into the project the first thing I would do is write UI tests using React Testing Library. This would facilitate a refactor of the frontend which is sorely needed, it got pretty messy towards the end. After that I have a pretty long list of features that would be useful for example wish lists. I am probably not going to invest anymore time into this project unless it becomes a roaring success.

Thanks for reading! If you have any questions about this project or any other of my projects, let me know!