Inspiration
My family has done a cousins secret santa gift exchange at Christmas every year for as long as I can remember. Last year I organized the gift exchange, and I wish I'd had a tool like this to help: both to automatically make the assignments, and to manually adjust them based on what I know about them as people. I had a lot of fun developing this block using my cousins' names as my example data! (But made up fake names for the demo video).
What it does
Once you select a table, view, and assignment field (a link field to the same table), the block makes an assignment so that each record is assigned to one other person, in a cycle. If you specify a "group" field, nobody will be assigned to anyone in the same group.
If you want to keep the assignment a secret, you can choose a hidden column to store the assignments -- that way the organizer never even needs to know who is assigned to who. Or, if you'd rather know the secret, you can visualize the assignment, with each record (color coded by its group) pointing to the record its assigned to. The visualization updates as you manually update the data in the airtable column; it also continually checks about whether your match is valid (each person assigned to give and get exactly 1 gift, and not to themself or somebody in their group) to help you understand which issues still need to be fixed.
How I built it
The airtable custom blocks API provides a great UI toolkit, react hooks to enable responding to changes in the underlying data, and of course the source of data itself.
I used animate.css for making the settings pane and success present animations, and cytoscape.js with the avsdf layout for visualizing the match.
Challenges I ran into
Near the end I found a number of bugs when I would update the schema of the base or the table or view in settings, and my code would fail because it hadn't considered that case. Alongside the flexibility/power of the airtable custom blocks SDK comes a number of ways to shoot yourself in the foot! But using the "Polish your block" guide I was able to test for a number of this pitfalls and fix them.
Accomplishments that I'm proud of
I love the happy present wiggle when the match is successful!
What I learned
I investigated so many cytoscape layouts -- there are a lot of really neat options out there. I decided on avsdf because I liked everything in a neat circle, even when the graph wasn't a cycle. But I'd be excited about building something else with cytoscape because it's so flexible, versatile... and pretty!
What's next for Gift Exchange Block
I have a few ideas for more features: allowing you to specify a list of records for each record (via another link field) to never match to (similar to the group constraint, but it wouldn't have to be symmetric), or extending to allow matching between the same group of people in multiple years (it sucks to get a present for the same person 2 years in a row!).
Built With
- airtable
- animate.css
- cytoscape
- javascript
- react
Log in or sign up for Devpost to join the conversation.