is an alternate reality game that I developed in the city of San Francisco. My goal was to create something exciting for people-a mysterious journey designed to fulfill the thrill of adventure that everyone craves.
From the initial planning stages during October, 2024 to the finale in late May, 2025- this eight month endeavor was the culmination of all that I had learned whilst living in San Francisco. The locations found from my various journies across the city and the website crafted from late nights of research and caffeine fueled determination.
Running from April to May of 2025, it was my most grueling and rewarding project yet. Gaining over 200 participants, it provided countless learning experiences as well as an invaluable lesson on the importance of not planning projects during university finals. The Sigil Hunt was a wonderful experience which I was ecstatic to share with my community.
The Sigil Hunt was my first web development project that required a database, which required me to learn backend programming. The service I decided to use was Digital Ocean, a hosting service which allowed me to purchase a remote server that I installed PostgreSQL onto. Structured Query Language (SQL) was relatively new to me, but I started learning how to create and manipulate tables.
The next stepping stone was learning how to edit backend table data via the frontend. The first requirement was to connect to my remote server using a database pool-a way of sending requests to the database that held SQL code which attempted to be ran. Creating Application Programming Interface (API) routes, I was able to write dynamic SQL code that took in unique parameters to write in the backend. For example, when creating users, I take a username from the frontend, pass it to the backend via the API route, and then gets written into the database!
Another important aspect of web development that I learned is ensuring accessibility for users. When players joined The Sigil Hunt, I wanted to make the process of exploring and learning seamless. Part of that was creating a navigation bar that made it easy to traverse the site.
I spent more time than I would like to admit creating the animation for the opening and closing of the dropdown, utilising tailwind, a CSS framework which comes with a lot of functionality for concise and easily understandable inline-CSS.
Throughout the hunt, I scattered small secrets around for players to discover. One of these utilized this glitch effect. The essence of this one was simple, as the players noticed the mixed up text at the top, they would attempt to copy it in hopes to decoding it. However, as soon as they approach it, it disappears and the actual hunt clue appeared. If they wished to decipher it, they were forced to input the text by hand without copying it. To solve, they would have to figure out it was a caesar cipher and input the word that does not belong.
In a few of the hunts, there were locations which I scouted that contained many intriguing spots or items of interest. In hunts like these, multiple parts were required to solve the entire one. I made an image slider (which took more time than I'd like to admit) that the players could scroll through to access different parts. For example in the second hunt, Archivist's Trail, Players were led through each floor of the San Francisco Public Library. It reminded me of a roguelike dungeon crawler, where solving each level led you to the next.
Security was of tremendous important to me, as the solving process was the most important part of the hunts, and I didn' want plauers skipping it, so I looked into password hashing. Password hashing is the process of changing a plaintext password into a string of random letters that look nothing like the original. I used an online service called BCrypt which turned turned the keys for the hunts into secure strings which I stored in the hunt data table. After this, I created an API call which used the answer submission box to check whether the player's input matched the hash stored in the database. If it matched then I added the found answer to that player's data, otherwise I told them to get lost.
During the development process, I knew that I had to create custom assets of my own, and so I decided to call upon a genius connection of mine, Rigel Bayha. Rigel is a professional artist of which I am thankful to have made friends with, and I knew that with his expertise, Sigil Hunt would truly gain the mysterious and creative look I was aiming for. Over the course of a few weeks, Rigel created custom viking-based runic logos for each hunt. His contribution was an invaluable part of the design process and I paid him back handsomely with the $12 that I had sitting in my wallet - truly I could not have done this without him.
I knew that the act of completing a hunt would feel like a great accomplishment, and so I sought to design something that would reflect that sense of achievement. Using the custom made runic icons and a lot of CSS magic, I was able to create a dynamic animation, that filled up the hunt logo with gold, as well as translating the title into english to signify that the player had conquered it.
This compass was part of one of the most difficult hunts to program. On top of requiring knowledge of how to use latitude, longitude, and directional data, I had to figure that all out on top of figuring out how to make sure it worked on a mobile device. This required countless tests of pushing to production, testing the website on my phone, discovering there was another issue (what no way), debugging the issue, trying another fix, and repeating. Through sheer willpower and persistence I managed to actually create a functional compass using mobile device data via a website!
Definitely one of the coolest user interface designs for a hunt, this one centered around using a blacklight to find a hidden message painted in San Francisco. The difficult part of programming this was updating the user' mouse placement or finger placement on the screen. At first, it updated every few seconds and then seemed to not update at all, but eventually I figured it out. Using React useStates and screen coordinates, I was able to dynamically update a layer for the flashlight effect which revealed hidden text.
Things don't always go as planned when creating, and this hunt was a great example. As seen in the video, there was a circular maze game which players would have been able to move to different orientations. This hunt was based on a stone labyrinth located in Land's End. The player would have had to hike to this hidden spot, match the orientation of the maze, and at which point they would have solved the hunt and been led to a wonderful lookout point. Unfortunately, one week before this hunt would have opened, I visited to make sure everything was good to go and someone had destroyed it, forcing me to quickly figure something out. Shame on you random person.
Another one of my secrets is seen here. I will replace this eventually, as there are more intricacies than seen in the video. For this secret, players were directed to Lyon's Road by an audio recording of your's truly. However, if players were clever enough to look into the audio file, by looking at the spectrogram of my voice recording, the words FRACTURED POINT could be seen, leading users to one of the hidden pages.
The time had finally arrived. I had completed all of the basic functionality and my school semester was coming to an end. I created a countdown for when the Sigil Hunt would open up. At this point, I printed out nearly one hundred fliers and scattered them throughout San Francisco, taping onto telephone poles and bus stops whenever I had the chance. It was here were my excitement started ramping up, and when the curious started to flood in.
