Digitalizing "1T de Bonnes Pratiques de Green IT" Game

Introduction

During my fourth year at INSA Lyon in the Informatics department (4IF), I had the opportunity to work on an exciting school project in collaboration with CGI, a leading IT consulting firm. The goal was to digitalize "1T de bonnes pratiques de Green IT" (1 Ton of Good Green IT Practices), a physical card-based serious game designed to raise awareness about sustainable practices in IT. What started as a tabletop game for in-person sessions evolved into a fully interactive, multiplayer online platform under the project name "GreenPlay."

This project was not just about coding a game—it was about bridging education, sustainability, and technology. By transforming the physical game into a digital version, we aimed to make it accessible to players worldwide, fostering learning through play while promoting eco-friendly IT habits. As part of a seven-member team, I contributed to both frontend development and overall project integration, turning a static card game into an engaging, real-time experience.

Purpose of the Project

The original physical game, created by CGI, uses cards to simulate IT project scenarios where players accumulate "good practices" to reach 1 ton of carbon savings while avoiding "bad practices." It's targeted at IT professionals like developers, architects, and product owners to sensitize them to Green IT—sustainable computing that reduces environmental impact.

Our digital version aimed to expand its reach:

• Enable remote play via computers or smartphones.
• Support multiplayer sessions in real-time.
• Make it multilingual for global accessibility.
• Track and encourage the application of learned practices post-game.

Beyond gameplay, the project emphasized sustainability in our own development process, such as optimizing images and using efficient tools to minimize our carbon footprint.

Architecture Overview

We built upon an existing prototype from a previous student group (Project AGIR), but after analysis, we decided on a complete frontend overhaul while retaining and enhancing the backend. The architecture focused on real-time communication to mimic the interactive feel of a physical game.

• Frontend: A responsive interface for game lobbies, card interactions, and quizzes.
• Backend: Handles game logic, user sessions, and data persistence.
• Real-time Layer: WebSockets for synchronized multiplayer actions.

This setup ensured low-latency updates, like drawing cards or blocking opponents, across players.

Technologies Used

We selected modern, efficient technologies to align with Green IT principles—focusing on lightweight, performant tools.

Frontend

• Framework: React with TypeScript for building interactive components.
• State Management: Context API for global state synchronization.
• Styling: Custom CSS with animations for fluid card movements and UI feedback.
• Real-time Features: Socket.IO client for handling game events like player turns and updates.
• Internationalization: Support for multiple languages, selectable at login.
• Other: Animations for immersive gameplay, enlarged cards for readability.

Backend

• Framework: NestJS for API endpoints and WebSocket gateways.
• Real-time Communication: Implemented Socket.IO as the central gateway for real-time events, ensuring each lobby maintained a unique and synchronized game instance.
• Database: PostgreSQL (inferred from the conceptual data model) for storing cards, quizzes, game history, and user data.
• ORM: Used to optimize database queries and reduce redundant calls.

Deployment

• Hosting: The app was packaged for easy deployment, with initial setups on CGI's infrastructure.
• Tools: Docker for containerization, ensuring portability.
• Testing: Unit tests with Jest, non-regression tests, and remote demos.

My Role and Responsibilities

As a team member, I focused on frontend development and integration, while collaborating on backend fixes and project management. The team used Jira for tracking tasks across two sprints.

As Developer

• Refactored the frontend for better UI/UX: Implemented animations, enlarged card views, and intuitive interactions to make the game more engaging.
• Integrated multilingual support: Added language selection and dynamic translations for cards and quizzes.
• Worked on real-time features: Used Socket.IO to handle events like quiz responses, card draws, and player actions, ensuring seamless multiplayer sync.
• Contributed to admin interface: Helped build pages for managing cards and quizzes, including CSV imports and direct edits.
• Testing and Demo: Conducted unit tests, fixed WebSocket issues from the previous version, and participated in remote demonstrations with CGI.

As Team Collaborator

• Analyzed the existing product: Identified issues like incomplete components and non-functional WebSockets.
• Project Management: Participated in sprint planning, ticket management on Jira, and regular meetings with CGI mentors.
• Sustainability Focus: Applied Green IT practices in code, such as using lightweight image formats (.webp, .svg) to reduce file sizes by up to 50%.

Figure: Screenshot of the improved UI with animated cards and player dashboard

Challenges and Lessons Learned

Digitalizing a physical game presented unique hurdles:

• Real-time Synchronization: Fixing broken WebSockets required deep debugging to ensure actions like card plays updated instantly for all players.
• UI Optimization: The original design had small, hard-to-read cards; we enlarged them and added animations, but balancing performance on mobile was tricky.
• Multilingual Integration: Translating content and ensuring cultural relevance across languages added complexity.
• Team Coordination: Working in a group of seven meant aligning on sprints—Jira helped, but it taught me the value of clear communication.

These challenges honed my skills in full-stack development, real-time tech, and agile methodologies. I also learned how to apply Green IT in practice, like optimizing code to reduce server load.

Conclusion

The GreenPlay project was a rewarding blend of education and technology, turning a sustainability-focused game into a digital tool that can impact IT professionals globally. By finalizing features like the admin panel, game history, and Green IT notebook, we created a platform that not only entertains but also inspires action against digital pollution.

This experience at INSA Lyon reinforced my passion for sustainable software engineering and collaborative projects. It's a testament to how games can drive real-world change—and I'm proud to have contributed to making Green IT more accessible.

If you're interested in Green IT or serious games, feel free to reach out—I'd love to discuss!

Figure: Team photo during a discovery session at CGI offices