Johnny Aldeb

GitHub: Johnny-Aldeb
Student ID: 40187248

To develop the skills needed for my contributions to the GameOn project, I relied on official documentation, team collaboration, YouTube tutorials, and hands-on experimentation with both backend and frontend technologies.

Backend Architecture & API Gateway

I learned how to configure and use Spring Cloud Gateway, Eureka, and Config Server by reading the official Spring Cloud documentation and following practical guides on microservice integration. I experimented with routing and authentication setups to understand how API requests move through distributed systems.

Reflection:
This process taught me the importance of centralized configuration and how a properly designed gateway can make the system more reliable, scalable, and secure.

Docker & Local Environment Setup

I learned Docker through the official documentation and online tutorials, creating custom Dockerfiles and Docker Compose configurations for our backend services. I practiced running multiple containers for the API Gateway, microservices, and PostgreSQL to simulate real deployment environments.

Reflection:
Working with Docker helped me understand how isolated, consistent environments improve testing and debugging. It made local development faster and reduced environment-related issues.

Documentation & UML Diagrams

I learned to create and refine UML diagrams using tools like draw.io and PlantUML by studying examples from software architecture resources and team references. I also reviewed best practices for writing clear technical documentation.

Reflection:
This experience taught me that good documentation makes complex systems easier to understand and maintain. It also helped improve team collaboration by aligning everyone on shared design principles.

Frontend Development with React Native

I strengthened my understanding of React Native (Expo) by reading the official documentation and reviewing existing code from teammates. I practiced using TanStack Query for API integration and explored Clerk documentation to connect frontend authentication with backend services.

Reflection:
Through trial and error, I learned how state management and data fetching differ in mobile environments. This made me more confident building features that rely on asynchronous data and authentication flows.

System Design & Testing

I learned about system design and testing practices by studying architecture references, backend design patterns, and reading through our integration and unit test suites.

Reflection:
This helped me see the bigger picture of how frontend and backend systems interact. I realized how important structured design and proper testing are for long-term maintainability and team scalability.

---

Asim Rahman

GitHub: AsimRahman88
Student ID: 40207553

To acquire the skills and technologies needed for my contributions to the GameOn project, I used a combination of tutorials, official documentation, teammate collaboration, and independent research.

Figma Mockups

I explored Figma Community mockup libraries and analyzed how designers structured their layouts and components. This helped me understand design consistency and how to align my mockups with the project’s visual identity.

Reflection:
Through this process, I realized the importance of following design systems and maintaining UI consistency across screens. It also taught me how small layout details significantly impact user experience.

React Native with Expo

I read the official Expo documentation at https://docs.expo.dev and watched YouTube tutorials to understand how Expo simplifies React Native development. I also reviewed teammates’ code to learn how they structured screens and navigation.

Reflection:
This helped me gain confidence working in a mobile environment. I learned that reading existing project code is one of the best ways to grasp new frameworks quickly.

React Hooks & Optimization

I studied the official React documentation at https://react.dev/reference/react and observed how useMemo and useContext were applied in our authentication components. I also searched online for examples to understand their real-world use.

Reflection:
By experimenting and debugging, I understood not just how these hooks work, but also when to use them effectively to improve performance and code readability.

Unit Testing with Jest

I learned Jest by reviewing my teammates’ test files and reading the official documentation at https://jestjs.io/docs/getting-started. I also watched online tutorials to understand how to mock sign-in and sign-up flows.

Reflection:
Initially, writing tests felt repetitive, but I came to appreciate how essential they are for preventing regressions. This experience taught me how to write cleaner, testable code.

Spring Boot Fundamentals

I followed YouTube tutorials and read my teammates’ backend code to understand how REST APIs interact with the frontend. I also referred to the official Spring Boot documentation at https://spring.io/projects/spring-boot.

Reflection:
Learning Spring Boot gave me a better appreciation for backend logic and how the frontend depends on well-structured APIs. It helped me communicate better with backend teammates and understand integration challenges.

TanStack Query (useQuery & useMutation)

I learned TanStack Query through the official documentation at https://tanstack.com/query/latest and experimented with examples to understand how data fetching and caching work.

Reflection:
At first, I found asynchronous data handling confusing, but TanStack Query made the process clearer. It improved my understanding of how to manage API state efficiently in real-world applications.

Glass UI with Expo Swift

I learned about Glass UI effects by watching tutorials and reading the Expo Swift UI documentation at https://docs.expo.dev/swift/overview/. I practiced by experimenting with blur and transparency to achieve a clean, modern look.

Reflection:
This experience allowed me to combine technical implementation with creativity. It showed me how front-end aesthetics can elevate user perception and make an app feel more polished.

---

Lara Louka

GitHub: laraxl
Student ID: 40227840

To acquire the skills and knowledge required for my contributions to the GameOn project, I used a mix of official documentation, peer collaboration, and hands-on experimentation through GitHub workflows and frontend development.

Role Manager (RBAC System)

I learned how to design and document the Role-Based Access Control (RBAC) system by looking at examples of permission-based systems and studying UML diagrams. I used tools like PlantUML and draw.io to show how roles and permissions connect and work together.

Reflection:
This process helped me understand how to turn design ideas into real features. I learned that setting up user roles early in development helps avoid access issues and keeps the system more secure and organized.

Feature Flags (Frontend)

I learned about feature flag systems by studying React Context API and reading documentation on conditional rendering and state management. I also analyzed how large-scale applications like LaunchDarkly handle dynamic feature toggling to inform our project’s frontend approach. https://launchdarkly.com/core-services/releases/

Reflection:
Working on this feature taught me how modular design improves flexibility during development. I also learned how good it is to have a clean, maintainable code when introducing UI logic.

GitHub Actions & CodeQL

I learned how to configure GitHub Actions by studying the GitHub Docs at https://docs.github.com/actions and experimenting with different workflow triggers. For CodeQL, I followed the GitHub Security Lab documentation and tested workflow configurations locally before committing them to the repository.

Reflection:
This experience taught me how CI/CD automation enhances team productivity and security. Understanding CodeQL’s static analysis gave me insight into how large organizations maintain secure pipelines and prevent vulnerabilities early in the process.

UML Design & Wiki Documentation

I improved my UML and documentation skills by referring to UML diagram standards and reviewing previous design examples within the team. I practiced translating technical logic into diagrams and detailed written explanations for the Wiki pages.

Reflection:
Through this process, I learned that good documentation is as important as the code itself. Clear visuals and concise explanations made it easier for teammates to understand the system architecture and maintain consistency across modules.

Figma Mockups & UX Review

I improved my design and UX skills by using Figma Community templates and learning how to keep designs consistent across different screens. I also worked with my teammates to make sure the design matched for pages like Leagues, Roles, and Security Settings.

Reflection:
This taught me how design thinking is important to development. Paying attention to spacing, color, and flow improved my understanding of how user experience directly impacts engagement and accessibility.

---

Danny Mousa

GitHub: F4KER-X
Student ID: 40226912

To acquire the technical knowledge and backend development skills required for my contributions to the GameOn project, I relied on a combination of official documentation, YouTube tutorials, team collaboration, and hands-on experimentation.

Spring Boot and Microservice Development

I learned Spring Boot through the official documentation at https://spring.io/projects/spring-boot and several YouTube tutorials that explained REST API design and the MVC structure. I also studied existing code examples shared by teammates to understand how controllers, services, and repositories interact in a layered architecture.

Reflection:
Working with Spring Boot helped me grasp how backend logic powers frontend functionality. I learned how to structure code for scalability and maintainability while improving my ability to debug integration issues.

Service Discovery and Configuration Management

To understand how microservices communicate, I explored the Spring Cloud Netflix Eureka and Spring Cloud Config documentation. I followed online guides and GitHub examples to set up service registration and centralized configuration for the project.

Reflection:
This experience showed me the importance of having a robust service discovery mechanism and centralized configuration, especially when dealing with multiple interconnected services.

React Hooks & Optimization

I studied the official React documentation at https://react.dev/reference/react and observed how useMemo and useContext were applied in our authentication components. I also searched online for examples to understand their real-world use.

Reflection:
By experimenting and debugging, I understood not just how these hooks work, but also when to use them effectively to improve performance and code readability.

API Gateway Integration

I studied the Spring Cloud Gateway documentation and watched tutorials that explained routing, filters, and load balancing. I also learned by collaborating with teammates to integrate authentication and route requests between services.

Reflection:
Through this process, I realized how crucial the gateway is for managing traffic flow and security in a distributed system. It also improved my understanding of how frontend requests reach backend services through a unified entry point.

Containerization and Environment Setup

I learned Docker through hands-on experimentation, following the official documentation at https://docs.docker.com and YouTube tutorials. I practiced building images, writing Dockerfiles, and configuring Docker Compose to run multiple containers simultaneously for PostgreSQL and Keycloak.

Reflection:
Working with Docker taught me how to create isolated and reproducible environments. It also improved my understanding of DevOps workflows and how containerization simplifies collaboration across different systems.

Authentication with Keycloak

I learned to configure and manage Keycloak by following its documentation at https://www.keycloak.org/documentation and experimenting with local setups. I created realms, clients, and roles to simulate real authentication scenarios before the team transitioned to Clerk.

Reflection:
Even though we eventually moved away from Keycloak, this experience deepened my understanding of authentication flows, token management, and secure API access, which are essential for any large-scale application.

---

Zachariya Javeri

GitHub: zachariyaJaveri
Student ID: 40130266

Feature Flags (Backend)

I researched into Java documentation to understand how to define annotations and abstract classes. Using these concepts, I designed the feature flag system.

Reflections: My goal was to create a system where it would be easy to define new feature flag sets and new feature flags. Abstract classes and annotations are a great combo for this. I use the abstract class to do the work of saving and loading the feature flags I've defined, using the annotations that I created. It also provides a default implementation for people to use. You can also override these methods if you want to manage the data yourself.

GitHub Actions

I used a variety of articles and documentation to find the information that I needed such as the GitHub documentation. Since the work I did was for the backend, I also learned about the Maven commands and how to use them in the workflow.

Reflections: Github pipelines are somewhat difficult to work with. Compiling one project doesn't guarantee that the generated files are available for use in other projects. I made a common module for the project that is used for feature flags and configuring the pipeline with that dependency in mind was an extra step of difficulty.

Github Projects

I explored the settings and various options that were available on the project, creating several fields and then updating all the issues with the fields needed.

Reflections: On one hand, there are a lot of options for custom fields and labels or iteration markers and so forth. On the other hand, I find that there is a lack of capability on the automated workflow side. It would be nice for GitHub to offer an option to close an issue when a pull request linked to it is closed. Overall, it's a good software for organization and allows us to use a variety of views to plan/keep track of the project.

SpringBoot

I used the Spring Boot official documentation to understand the overall architecture of the system. In addition, I researched into their Java APIs and developed an understanding of how Spring manages lifetimes of objects and how these objects are stored as Beans/Components.

Reflections: Delegating the lifetime of an object to Spring was interesting to learn. It was also interesting to research into various ways to inject dependencies in a file and potential risks. As such, the standard seems to be Constructor injection that is also done by SpringBoot on launch.

Maven

I researched into Maven CLI commands for use in the pipeline. These command line tools are what is used to develop and package the backend of our project.

Reflections: The commands themselves are not that complicated, but using them in a continuous integration context adds a layer of complexity to it. A local version of a command does not always translate to a proper CI command.

---

Renal Wasouf

GitHub: RenalWasouf
Student ID: 40190708

The way I learned what I needed to learn was through a combination of online tutorials, official documentation, experimentation and simply asking my peers.

Liquid Glass Effect and Expo Swift UI

I read the official Expo UI documentation, watched online tutorials and experimented with the library to create a prototype of the search page. Later I ended up adopting Liquid Glass Effect and learning it the same way.

Reflection:
This gave me a deeper understanding of how these components work and interact with other components, allowing me to confidently work with the libraries and review code using them.

Frontend-Backend Integration

I learned the basics of these interactions by experimenting and asking my peers for help.

Reflection:
This helped me understand the project on a deeper level and allowed me to complete my tasks as well as I can.

TanStack Query & Axios

I learned TanStack Query and axios through the official documentation and experimentation to understand how to fetch data with them.

Reflection:
These libraries proved to make the process much simpler and learning them will be a great asset to me professionally.

Samuel Collette

GitHub: Vaqint
Student ID: 40175048

I gained this understanding primarily through reading the official React Native documentation and through a lot of trial and error while building the app. By experimenting with different components and testing how layouts behaved across different devices, I gradually became more comfortable with the mobile-oriented structure of React Native and how it interacts with native system features through libraries like expo-router.

Frontend-Backend Integration

Since I hadn’t used Clerk before, I relied heavily on guidance from my peers who had more experience integrating it into Expo projects. They helped me understand how Clerk handles user authentication using a publishable key, how it manages sessions, and how to protect routes within the app.

Industry standards

In addition, I learned about industry standards for organizing code — specifically, separating styles and components from the main logic files. I gained a deeper understanding of these concepts with help from my team members, who shared insights from their own experience working in React projects.

---

Maria Balanjian

GitHub: Mariapalan
Student ID: 40227451

I was able to contribute to the GameOn project by learning through my peers, YouTube tutorials, official documentation, and independent research.

Dockerization

I learned how to containerize our Spring Boot services by reading the official Docker documentation and several online resources. I also watched YouTube tutorials that demonstrated how microservices run within a Docker Compose environment. I experimented with writing Dockerfiles and running multiple services together.

Reflection:
This process taught me that before building anything, we need to understand the whole picture and make sure the feature is actually useful.

GitHub Actions & CI/CD Pipeline

I learned GitHub Actions by reading the official GitHub Docs. After many failures, I figured out how to automatically build Docker images and push them to GitHub Container Registry whenever changes were merged.

Reflection:
This taught me how automation reduces extra unneeded effort and ensures consistent builds across the team. It also helped me understand how proper CI/CD improves productivity and prevents deployment issues.

UX Design & Figma

I learned how to use Figma by exploring online tutorials, and trying to design with Community templates. This helped me participate in design discussions and contribute to decisions about layout, spacing, and overall user flow.

Reflection:
Learning Figma showed me how design is not easy and takes time to make consistent. It also helped me understand how small layout changes can significantly affect user experience.

System Design & RBAC (Role Manager)

I learned how to design a Role-Based Access Control (RBAC) system by reviewing sources online with similar templates. Morover I discussed with my teammate and tried to come up with a good design.

Reflection:
This taught me that it is important to have a good system design before implementing any code. A strong design makes the code clearer, more concise, and easier to maintain.

Database Tables & Internal Sports Structure

I learned how to design and build the internal sports structure by previous PostgreSQL knowledge, but still followed a tutorial. I also looked at examples from other projects that created similar sports tables.

Reflection:
Working on this showed me how important it is to set up the database properly. If the data is organized the right way from the beginning, it makes future features much easier to build.

---

Karim El Assaad

GitHub: Kayram2710
Student ID: 40127808

GitHub Projects

I learned GitHub Projects through trial and error, exploring boards, issues, and milestones, and looking up documentation when needed.

Reflection:
It showed me how proper task organization improves teamwork and overall progress tracking.

Figma iOS Mockups

I learned to use Figma by watching short tutorials and experimenting with community templates to better understand layouts and component creation, I also looked at the official apple docs.

Reflection:
It helped me understand figma as a software very in depthly and enabled me to truly understand how to make detailed mockups.

Expo

I learned Expo by reading docs, testing examples, and asking teammates for help since some of them where familiar with it. I also used AI to learn basic workflow patterns by having it generate some snippets and general structure.

Reflection:
Understanding its structure made development smoother and easier to manage allowing me to also establish good practices for the rest of the team to follow as well.

React Native

I learned React Native by reading documentation, testing small components, and using AI examples for layout and navigation ideas much like I did with Expo.

Reflection:
It strengthened my understanding of component design and mobile UI logic as well as how important it is to have a well defined file structure in this stack.

---

Mahmoud Mohamed

GitHub: mavmoud
Student ID: 40163777

I learned the needed skills through a combination of hands-on experimentation, team collaboration, official documentation, and iterative design and testing.

Hands-On Development and Experimentation

Most of my frontend knowledge came from practical, hands-on development using React Native (Expo). I experimented with layouts, components, and navigational structures, testing different UI configurations to see how they worked across devices. Building actual UI components like the headers, background gradients, and card systems helped me understand React Native’s styling and layout behavior.

This practical experimentation also extended to configuring the Browse Page, where working alongside Renal taught me how to integrate styled elements cohesively within the framework. Building and refining these components through trial and error played a key role in deepening my technical understanding.

Collaboration and Peer Learning

A major part of my learning came from collaborating with teammates like Karim and Maria on UX design and mockups, and Renal on implementing front-end components. I observed their workflows, discussed design and UI technicalities, and exchanged ideas on better ways to structure or optimize code. This collaborative learning environment allowed me to gain different perspectives and apply multiple problem-solving approaches effectively.

Reviewing Documentation and Design References

To improve my technical comprehension, I regularly referred to the React Native documentation and Expo official guides. This helped me understand API usage, styling conventions, and component lifecycle management specific to mobile development.

I also studied UI/UX design guidelines and compared them to our Figma mockups to make sure that my implementations followed best design practices. This mix of documentation-driven learning and visual reference analysis allowed me to bridge the gap between technical implementation and aesthetic design.

Iterative Design and Testing

I improved through continuous iteration and testing. After implementing UI elements, I often refined them based on team feedback—adjusting spacing, typography, and color combinations to create smoother transitions and better readability. This iterative approach boosted my understanding of how users interact with mobile interfaces and how small adjustments can drastically affect the user experience.

---