TAMU Guessr

• 

  Homepage

• 

  Game Selection

• 

  Login Page

• 

  Gameplay

Inspiration

We identified that many new and current students are unfamiliar with how large their own campus is. Texas A&M spans over 5,000 acres, and as a result, most students have not been fully exposed to the campus they call home. To tackle this issue, we drew inspiration from GeoGuessr, a game that places you in a random location worldwide and challenges you to guess where you are. This model successfully exposes people to new places and motivates them to explore in person. We wanted to bring this concept to Texas A&M, creating a game with weekly themes. This approach not only helps students find new places on campus to hang out but also guides them to locations where they can connect with others who share their interests.

What it does

TAMU Guessr is a geography guessing game themed around Texas A&M University. Players are placed in a random location on the Texas A&M campus using Google Street View and must navigate their surroundings to guess their exact location. The closer the guess, the more points earned!

How we built it

We built our front-end using a strategic stack of technologies, with Node.js as the foundational runtime, allowing us to leverage the Next.js framework, which we chose to organize the entire application and provide critical features like file-based routing and server-side rendering. Within this structure, we used React to build our user interface as a set of reusable components, keeping our code clean and maintainable. Our components were written in TypeScript, a crucial choice that added static type-safety to our code and helped us catch errors during development.

For the game's core functionality, we integrated the Google Maps JavaScript API to display both the interactive guess map and the immersive Street View environment. This API interfaces directly with our React components, which handle all the button logic and state management for the game. For the visual design, we primarily used Tailwind CSS to rapidly apply utility-first styles, supplemented by standard CSS for global styling. While our initial campus locations are hardcoded, this entire tech stack creates a performant and reliable website with a flexible data structure, allowing us to add new and diverse locations easily.

Challenges we ran into

Our main challenge was skill acquisition, which required us to master an entirely new language and its frameworks under a tight deadline. We also had to overcome the steep learning curve of new syntax, like Tailwind CSS, to successfully integrate custom fonts and specific design elements. Further hurdles included complex feature implementation, such as navigating the technical difficulties of building a secure user login page, integrating the Google Maps JavaScript API, and ensuring all buttons were stateful and fully interactive. Overall, we were learning new languages and frameworks and faced challenges in those regards. Still, thanks to documentation and YouTube videos, we were able to get a grasp of what we needed and execute.

Accomplishments that we're proud of

We are proud of our team's technical achievements in such a short timeframe. A significant success was not just implementing the Google Maps API, but successfully harnessing its complex Street View and mapping functionalities to serve as the core engine for our game. Furthermore, we learned and effectively utilized a modern stack of languages and frameworks, including React, Next.js, and TypeScript, to build this application from the ground up. Overall, our team is proud to have created a functioning prototype that brings a meaningful idea to life, one we believe can genuinely help new and current students connect with and learn about the campus they call home.

What we learned

Programming isn't just about technology; it's about teamwork and creative problem-solving. Throughout the project, we had to work together to create a viable idea that met the requirements and that everyone was excited to do. This experience generated an environment to develop team bonding and collaboration. This allowed us to not only learn new languages and frameworks in a short amount of time but also to effectively implement them into the project and produce something of value. We see this as a reason to be sensitive to group health and dynamics. When projects get tough, we plan to encourage our peers to look beyond the book and think outside the box for solutions.

What's next for TAMU Guessr

Our site's front-end is currently functional, but it's not yet in its final, shippable state. The next critical step is to implement a robust backend, which will transform the game into a full-scale web application by handling secure user login, score tracking, and competitive leaderboards. Simultaneously, we plan to significantly enhance the user experience by adding polished animations, more iconic A&M branding, and engaging feedback to make the site feel more dynamic. These additions are intended to infuse the site with the "spirit of Aggieland," ensuring users feel a sense of university pride and connection as they explore and learn about their campus.

Built With

• css
• javascript
• next.js
• node.js
• react
• tailwind
• typescript