NUGuessr

• 

  Main Page

• 

  Play Page

• 

  Play Page with user guessing the location

• 

  Results After One Round

• 

  Final Results Page

• 

  Profile Page

• 

  Leaderboards Page

Inspiration

Navigating a new campus can be overwhelming, especially for NUIn and transfer students unfamiliar with Northeastern’s Boston campus layout. As first-years who understand the challenges of adjusting to a new environment, we wanted to create a tool that’s both fun and educational. Inspired by the success of GeoGuessr in making geography engaging, we envisioned NUGuessr as a way to gamify campus exploration and help students feel more at home.

What it does

NUGuessr is an interactive web game where players are tasked with guessing the locations of Northeastern campus landmarks. Players will go through 5 rounds. In each round, players are given a photo of certain locations on campus, whether it be a whole building or a specific statue/point of interest. Players must then search the implemented map and pinpoint the location of which they think the picture was taken at, all within a time limit. Run out of time, and you will be given a score of 0 for that round. Scores are based on accuracy, encouraging both strategic thinking and familiarity with the campus.

How we built it

The project is built using Next.js with TypeScript for the front end, TailwindCSS for styling, and ShadCN components for UI elements. Backend functionality is managed with Supabase for the database. Google Cloud was used for Google OAuth 2.0 login and authentication. This was our first time using Google Cloud, Supabase, and ShadCN, so learning and implementing these tools were key parts of the development journey.

Challenges we ran into

One of the main challenges was using Supabase and implementing Google authentication for the first time. Configuring these tools and ensuring seamless integration consumed a lot of time and required us to troubleshoot extensively. Additionally, we faced struggles with React and Tailwind CSS, particularly in aligning components and maintaining a consistent design. Learning how to effectively utilize these technologies in our workflow was a steep learning curve.

Accomplishments that we're proud of

We’re proud of creating a functional prototype that brings value to the Northeastern community. The interactive design and gamified learning approach make it engaging for users while addressing a real need for campus orientation. Additionally, we successfully implemented a clean and responsive interface that enhances the overall user experience. Finally, we are extremely proud of successfully participating and wrapping up our first-ever hackathon!!!

What we learned

Building NUGuessr taught us the importance of user-centered design and teamwork. We gained experience working with mapping tools, refining user authentication systems, and collaborating using GitHub. Additionally, the project highlighted the value of iterative development, as each challenge pushed us to improve and adapt our approach.

What's next for NUGuessr

Moving forward, we plan to implement the features that we haven't been able to, such as the leaderboards and user statistics. We also hope to collaborate with Northeastern’s administration to incorporate official campus data and promote the game during orientation events. Ultimately, we envision NUGuessr as a must-have tool for all new students at Northeastern, encouraging confidence in navigating their new home.

Built With

• google-cloud
• next.js
• shadcn
• supabase
• tailwindcss
• typescript