Inspiration
We love achievements. As #asians we thrive on competition and knowing that we are better than others :) Kidding! Well, mostly. Our teammate loves achievements so much, he has 100% steam achievements in Hades, Terraria, Celeste, Understand and even multiplayer games that weren't made for completionists like Boomerang Fu.
At the same time, our life in NUS isn't getting any shorter, and we want to preserve the unique memories and make the most out of the time we have left. And so we thought, what if our NUS life could be an achievement-based game, with (potential) rewards to be earned along the way (new friends, places to eat, and study spots?)!
Hence, XP NUS was born (XP is meant to look like đ)!
What it does
Upon launch, students are greeted with an achievement map, things to look forward along their life in NUS. Students earn XP by completing activitiesâacademic, social, or exploratoryâsuch as attending events, visiting places on campus, or trying new experiences like joining CCAs. These activities unlock achievements, track progress, and encourage students to step outside of what they're normally comfortable with.
When they've completed these activities, they obtain achievements and can post their photos of their accomplishment! But be warned, some achievements are rather difficult to obtain (did you know: only the top 5% of students in NUS get a dean's list? wouldn't it be funny if that were an achievement to obtain...).
Obtained a series of achievements? Stand a chance to get a unique trophy (67 trophy??) to showcase your insane skills (and probably OCD because wow these achievements aren't all easy)!
There are even special co-op achievements that have to be completed with a friend (like joining a hackathon)!
How we built it
XP NUS is a full stack, single-page web application built as a Vite Project with Supabase as the backend. The frontend uses React with TypeScript and TailwindCSS for styling.
Both Supabase Auth and Supabase Database were used for authentication and storing of user profiles, progress and achievements.
Framer Motion and Aceternity UI were also used for smoother animations and components.
Challenges we ran into
Coming up with the design of the game was rather challenging, as we wanted to make it as appealing as possible, which required a lot of planning and research.
Accomplishments that we're proud of
We are very happy that the project turned out exactly the way we envisioned, with the same elements of satisfaction when an achievement is completed.
What we learned
We probably unknowingly adopted an Agile methodology, as we went back to the drawing board multiple times in the course of designing and during building of the project. Yet, knowing to constantly adapt and not be afraid to try out ideas was perhaps the most fulfilling aspect of this hackathon!
What's next for XP NUS
We would definitely hope to work with NUS partners, including the Office of Student Affairs, to potentially expand this as a possible wellness initiative for students to participate in and make use of their time here!
We would also love to work with companies who might be looking for exciting new ways to help employees onboard, and use this as a platform to support their journey.
Acknowledgements
Animated Gif of My Pixel Character by Rohman Adi Prasetio
Built With
- react
- supabase
- tailwind
- vercel
- vite
Log in or sign up for Devpost to join the conversation.