Virtual Easter Egg Hunt! Is it Virtual? How?
Introduction
I usually organized for youth group at my church, but because of the pandemic, we cannot do the in-person event. Therefore, I should use my creativity to create an event, and usually, we are using Zoom for our video conference platform. However, I found a cool video conference called gather.town, and it is really unique because it looks like a virtual space.
Users can move their characters to meet other users, and they can talk if their characters are close together. The host also could create their room, and the room could connect between other rooms. When I tried this application at the Flatiron reunion, I was so excited to explore many things. I figured that the host could create objects and embed a link in there. Therefore, I came up with an idea, which is to create a “Virtual Egg Hunt” for kids in my Indonesian Catholic Community.
Project Overview
Gather Town is just the platform to meet virtually. I should create another web application to play the egg hunt because they do not have an egg hunt feature there. I started to think about the use cases of the app, and the main idea is the app can produce dynamic links to grab each egg, count each person’s egg, and see the leaderboard.
Next, what language should I use to build this project? Because I was learning Next.js from the React2025 course by Lee Robinson, I thought it was a great project to try my understanding. Also, Next.js is zero configs, so people do not care about react-router. The Easter egg hunt app needs many dynamic links for the eggs too, so I guess it is a great choice. in the React2025 course, Lee used Firebase for the backend, and it was a great time to play with Firebase.
Authentication
Firebase is also helpful for application authentication because Firebase provides backend services for authentication with many identity providers such as Google, Facebook, or Apple. I used google authentication to identify the users, so whenever the user grabs the egg it will count to that user. Firebase authentication is cut off a lot of development time, and I don’t really need to think about JWT and authentication anymore because it is handled by Firebase.
Routing
Next.js is also helpful for the routing part. We just need to create a component inside the ./pagesfolder, and it will automatically create a new link. For example, I want to create /egg/1 route, so I just need to create a folder called egg inside ./pages folder and create a new component called [eggId]. eggId is a query parameter, so it could be anything. I’m using uuid to create unique id to prevent users access the egg directly via browser.
Whenever the user accesses the egg route, the component will check first if the egg is already taken by other. If the egg has been taken, so the egg could be taken anymore
Also, I should prevent users to grab the egg if the games have not started yet. Users mustn't get the egg if the admin has not started the game.
Embed the link to gather.town object
After the app is ready, so I should prepare the gather maps. Luckily, my friends helped me to build an amazing virtual space with many rooms. They designed the map to teach the kids about the holy weeks.
After the map is ready we can spread the egg and embed the link to the egg. Because this is Easter season, gather.town gives Easter egg object there.
The object that can be interacted with will be light up if the users are in the range of activation distance, and the user could press x on the keyboard.
Lastly, people can have access to the leaderboard, so it makes people compete to find more eggs.
Conclusion
This simple project is challenging for me because I do not have much experience in Next.js and Firebase. However, the project turned out to be really fun because I love this idea, and with this idea, I also could give some entertainment to kids in the middle of the pandemic situation.
Please let me know if you have some ideas to improve the game or maybe do you have any idea playing around with gather? Please leave some comments!
Github: https://github.com/raaynaldo/virtual-easter-egg-hunt
Website: https://virtual-easter-egg-hunt.vercel.app/
