Mafia The Mobile App

What the App Does

Mafia The Mobile App aims to provide the authentic experience of playing the standard analog version of the game while providing an alternative to using playing cards or tokens, while also providing a much clearer overview of the game's state for players and game masters.

Rules of the Game

---

Players are divided into two groups:

• The Police, who are tasked with identifying Mafia members and eliminating them by voting during the day phase of the game.
• The Mafia, who aim to kill all other players either by assassination during the night phase or by voting during the day while staying unidentified.

---

Additional Roles

Currently, the game features two additional roles:

• Detective, who can check other players' roles during the night.
• Medic, who can save another player from being assassinated during the night.

---

Game ends when there are no Mafia members alive or when Mafia controls the voting with a majority of votes.

App Flow

Onboarding and Main Menu Upon opening the app, you're greeted with a screen to create a unique nickname. Once your nickname is set, you're directed to the main menu, where you can choose to either host a game or join an existing one. If you decide to join, you’ll be prompted to enter a code provided by the game host. After entering the code, you’ll join the game, ready to take on your role and start playing.
	Host Perspective As the host, once you create a game, you’ll receive a unique game code to share with other players so they can join your room. Before starting the game, you can adjust various settings to customize the experience. Options include: - Selecting additional roles (such as Medic and Detective). - Setting the number of Mafia members. - Enabling or disabling the “Show Roles After Death” feature. In the lobby, you’ll see the avatars of players who have joined. Once everyone is ready, you can start the game. During the game, you have full control as the host. You can see an overview of all the roles, as well as each individual player's role, and manage the game by assigning kills based on votes or assassinations. Once the game concludes, the winning team will be announced, letting everyone know who outwitted whom.
Player Side After joining a game, you’ll enter the game lobby. Here, you can customize your avatar to give yourself a unique look. Then, you’ll wait for the host to start the game. When the game begins, you’ll be shown your role and objective, which may be as a Mafia member, Policeman, or a Detective, and Medic if the additional roles are enabled. Your role will guide your actions as the game progresses. Throughout the game, you can keep track of the events and see which players are eliminated in each round. At the end, the winning team will be announced, and you'll see whether your team succeeded.

---

Technologies Used

To build Mafia The Mobile App, I utilized a range of powerful tools and services across both the frontend and backend to ensure high performance, scalability, and a seamless user experience.

Frontend Technologies

• React Native
  React Native is the core framework I used to build the mobile app. It enables writing native mobile applications using JavaScript and React, making the development process faster while allowing for native performance across both iOS and Android.

• Expo
  Expo simplifies the React Native development process with built-in features like push notifications, asset management, and easy configuration, reducing the need for manual setup and allowing for rapid iteration.

• React Navigation
  For routing and navigation within the app, React Navigation was essential. It provides a flexible and customizable solution for handling stack, tab, and drawer navigation, creating an intuitive user experience.

• Apollo Client
  Apollo Client is used for managing GraphQL data. It connects the app to the backend GraphQL API, making it easy to fetch, cache, and manage data in a performant and declarative manner.

• GraphQL
  GraphQL allows for efficient querying of data from the server. It enables clients to request exactly the data they need, avoiding over-fetching and reducing network usage, which is particularly useful in a game app where dynamic data exchange is frequent.

• Sentry
  Sentry is integrated for error monitoring and performance tracking. It helps track and debug any app crashes or performance issues in real-time, ensuring a smoother user experience by identifying issues early.

• React Native Reanimated
  To create smooth and engaging animations in the app, React Native Reanimated was essential. It allows for performant animations that feel natural and seamless, contributing to the app's polished look and feel.

• React Native Gesture Handler
  This library improves touch gestures, enabling better user interaction with the app. It allows for custom gestures like swipes, pinches, and long presses, which are crucial for an interactive game experience.

• Tamagui
  Tamagui is used to optimize and streamline the UI development process. It allows for faster styling and better cross-platform design consistency, improving performance and simplifying UI code.

• i18next
  i18next provides multilingual support in the app, allowing players to enjoy the game in different languages. It’s a powerful tool for managing translations and ensuring global accessibility.

• Storybook
  Storybook is used for developing and testing UI components in isolation. It helps visualize different UI states, ensuring consistency and reusability of components across the app.

• React Native Toast Message
  This library enables the display of toast notifications within the app, alerting users to important events (like player eliminations) without interrupting their gameplay.

• AI-Generated Art
  All the art assets in the app were created using AI tools. This allowed me to generate unique and customized avatars and icons quickly, maintaining a cohesive visual style throughout the game.

Backend Technologies

• AWS AppSync
  AWS AppSync is the backbone of the app's API, handling all GraphQL operations. It supports real-time data synchronization via WebSockets and subscriptions, ensuring that the game state and player actions are reflected instantly on all devices. This is particularly useful in a dynamic multiplayer environment like Mafia, where players need to see up-to-date information immediately.

• AWS DynamoDB
  DynamoDB serves as the app’s database, offering a fast and flexible NoSQL solution. It’s designed to scale with the app’s growth, providing low-latency access to player data and game state. DynamoDB ensures that game sessions, player information, and roles are stored and retrieved quickly during gameplay.

• AWS Lambda
  AWS Lambda powers the serverless architecture behind the app, enabling automatic scaling of backend services. Lambda functions are used for various tasks such as user authentication, role assignment, and managing game state transitions. This serverless approach reduces infrastructure complexity and operational overhead.

• Serverless Framework
  The Serverless Framework was used to deploy and manage the app’s backend on AWS, allowing for the development of scalable functions without worrying about infrastructure. It automates the setup of services like AWS Lambda, DynamoDB, and API Gateway.