MANMEET SAGRI

← Back to Projects

IAT 359 · Mobile Computing

Pic-Tac-Toe

2 Team Members
8 Screens
Lead Developer
4 mo Timeline

September – December 2025

Team: Manmeet Sagri, Hind Hammad

My Role: Concept, Lead Developer & Visual Direction

Tools: React Native, Expo, Firebase, SQLite, Figma

What is it?

A photo-based mobile Tic-Tac-Toe game designed for Gen Z. Every move is a real photo instead of an X or O. Players tap a tile, snap or pick a photo, and place it on the board. The game board becomes a shared memory.

Inspired by apps like BeReal and Locket Widget, Pic-Tac-Toe is built around a simple insight: our generation does not always want to text, but that does not mean we do not want to stay connected. A quick game gives friends a low-pressure reason to share a moment.

The prototype runs as a pass-and-play game on one device, but the vision is a fully async multiplayer experience where each player plays from their own phone on their own time.

The Process

Phase 1

Concept & Ideation

Color palette exportaion for gender neutral app design Logo exploration and color palette experiments for Pic-Tac-Toe

The concept came from noticing a tension in how Gen Z stays connected. We are not lazy; we are selective. Texting can feel like effort, but sharing a moment feels effortless when it has a reason. Pic-Tac-Toe gives you that reason: it is your turn.

In the first two weeks, I shared my vision with my teammate Hind, who translated it into sketches and logo iterations. We went through multiple logo directions and tested color palettes together. I kept pushing for something gender-neutral, and we landed on a red and blue pairing that felt energetic without leaning into either direction. I gathered feedback from friends, family, and classmates to select the final logo direction.

We drew inspiration from BeReal's spontaneity, Locket's intimacy, and the simplicity of a game everyone already knows. The design goal was to feel playful and social, not gamified or competitive.

Phase 2

Auth & Profile Setup

Pic-Tac-Toe sign up screen Pic-Tac-Toe profile setup screen with avatar and nickname

I built the full authentication flow using Firebase Auth: sign up with email and password, sign in, and a profile setup screen where users pick a nickname, an optional favourite colour, and a profile photo from their camera or gallery.

Profile preferences are saved locally with AsyncStorage so the app remembers who you are between sessions. After sign-in, the app checks whether a nickname already exists and routes the user to either Find Friends or back to Profile Setup. It is a small but important detail that makes returning users feel at home immediately.

Phase 3

Game Screen & Core Logic

Pic-Tac-Toe game board showing P1's turn with red background and placed photos

The game screen was the most technically demanding part of the project. I built the core game logic from scratch using React Native, building a 3x3 board where each cell holds a photo URI and a player tag. Win detection checks all eight classic Tic-Tac-Toe lines after every move. A draw is detected when all nine cells are filled with no winner.

I used tutorials and documentation to understand the win-checking algorithm, then adapted it to work with a photo-cell data structure rather than simple X/O strings. The background color of the entire screen switches between red and blue depending on whose turn it is, giving each player a clear, immediate signal without any extra UI elements getting in the way.

Key systems I built in the game screen:

  • Photo-per-tile board where each cell stores a URI and player tag; players choose camera or gallery on every move
  • Win detection across all 8 lines after every move, with draw detection when all cells are filled
  • Dynamic background and avatar highlight that switch color per turn (red for P1, blue for P2)
  • Haptic feedback patterns: a celebratory vibration burst on win and a short double buzz on draw
  • Match results saved to SQLite via a local database utility, tracking winner, move count, and board state
  • Victory overlay with confetti cannon, winner photo, and a native Share sheet to post the result
  • Player avatars and nicknames pulled from AsyncStorage profile prefs and displayed live in the game header
Phase 4

Social Reactions & GIF System

Pic-Tac-Toe GIF reaction search modal open during gameplay

A persistent reaction bar sits at the bottom of the game screen throughout the match. Players can fire quick emoji bursts at the last move and the emojis float over the tile like a sticker. They can also search and send a GIF using the GIPHY API, which pops up as a large overlay in the middle of the screen with a "sent a reaction" badge showing who sent it.

I integrated the GIPHY API to handle the search and retrieval of GIFs based on a text query. Results appear as a scrollable grid of thumbnails inside a modal, and tapping one closes the modal and triggers the full-screen GIF overlay. A one-time hint modal introduces the reaction bar the first time a player places a photo, after which it is dismissed and never shown again.

Phase 5

Match History & Find Friends

Pic-Tac-Toe find friends screen showing contact list

Every completed match is saved to a local SQLite database and displayed in the Match History screen. Each entry shows the date, winner, and move count. Players can delete individual matches or reset everything. The list supports pull-to-refresh so new matches appear immediately.

The Find Friends screen requests contacts permission and maps real device contacts into the game flow. If permission is denied, it falls back gracefully to a demo contact list so the app stays usable. Once a friend is selected, both player names are passed into the game screen and used throughout: in the turn label, the winner overlay, and the match history record.

Problems & Reflection

Problem

Building the photo-tile game board was the hardest part.

The core challenge was adapting a classic Tic-Tac-Toe win algorithm to work with a photo-based data structure. Each cell needed to hold an image URI and a player tag rather than a simple string, which meant rethinking how board state was stored and checked. I worked through the algorithm using documentation, tutorials, and a lot of iteration before the logic felt clean and reliable.

Problem

The widget idea had to be cut due to platform constraints.

Our original vision included a home screen widget so friends could see the game board without opening the app, similar to Locket. Xcode and Android Studio both blocked this at the native level within our project setup. We raised it with our professor, who confirmed the timeline made it out of scope. The core app became the focus, and the widget remains part of the longer-term vision.

Challenge

The prototype plays on one device. The vision is async multiplayer.

For this course submission, both players pass and play on the same phone, taking turns. The real concept is different: each friend downloads the app and plays from their own device on their own time, like a slow-burn game between friends. The infrastructure for this is already in the codebase with Firebase Firestore and Auth set up and ready. Completing the multiplayer layer is the next step.

What I Learned

This was my first full mobile app, and it taught me to think in systems.

Pic-Tac-Toe was my first time building a complete React Native application from scratch: authentication, navigation, local storage, a live game state, external APIs, and a local database all working together. The biggest shift was learning to think about state, what lives where, how screens talk to each other, and how to keep the experience feeling seamless even when a lot is happening behind the scenes. I came out of this project a significantly more confident developer.