Mastering React and Firebase in combination with a Third-Party API Integration
In cooperation with my group in the course "Interaction Programming", I developed SpaceGuesser using React, Firebase, and Tailwind CSS. The project involved wireframing, user interviews and testing, and iterations to ensure a smooth and engaging experience for the space quiz.
Learning Agenda
Ideation
The concept for SpaceGuesser emerged from our interest in space and the desire to create a unique, educational experience centered around planetary exploration. Inspired by GeoGuessr, we wanted to craft a game where users receive information about a specific planet and then make guesses. This interactive approach allows players to learn and engage with planetary data in a fun and challenging way, blending education with immersive gameplay.
Wireframing
At the start of the design process for SpaceGuesser, we created several wireframes using Figma and a basic wireframing library. These wireframes outlined key screens and user flows like a login screen, the initial information display about a planet, the guessing interactions based on size and distance, following the results of the guess as well as personal and general scoreboards. By visualizing the core structure of the app early on, we were able to gather valuable user feedback before any coding began. This approach helped us refine the layout, ensure a smooth user experience, and identify potential improvements before moving into development.
User Interviews and Testing
To ensure the development of SpaceGuesser aligned with user expectations, we conducted multiple rounds of user interviews and testing. The first round took place during the wireframing stage to gather initial feedback on the quiz format, features, and design. Participants tested the prototype in person and provided insights through the thinking-aloud method, helping us identify key usability issues early on. For example, users found the next button unclear for guessing and had difficulty with the resizing and slider controls for planet size and distance. The user suggestions influenced our design improvements.
As the project progressed, we conducted additional interviews during the first and second iterations of the React application. These interviews highlighted more specific issues, such as confusion around the units that should be guessed, guessing the distance in light-years and login-related navigation bugs. Feedback from these tests allowed us to refine both the user interface and the overall gameplay experience, ensuring a smooth and engaging application.
Development
For the development we used React for building a dynamic, interactive front-end, and Firebase for backend services like user authentication and data storage. We followed the Model-View-Presenter (MVP) approach to keep the application architecture clean and scalable, separating concerns between the logic (model), user interface (view), and user input handling (presenter). This structure helped ensure that each part of the app could be developed and tested independently, streamlining the development process. For styling, we implemented Tailwind CSS, which allowed us to quickly build a responsive and visually appealing interface with utility-first classes, maintaining consistency across the application. This combination of technologies enabled a smooth user experience and efficient development workflow.
