A modern, feature-rich Tic-Tac-Toe game built with React Native and Expo. This isn't your ordinary Tic-Tac-Toe - it features innovative gameplay mechanics, beautiful theming, and both local and online multiplayer modes.
- Special Piece Lifecycle: Pieces go through Active → Shadowed → Removed states
- Smart Shadowing: When both players have 3 pieces, the opponent's oldest piece becomes shadowed
- Strategic Depth: Plan your moves considering future piece removals
- Real-time multiplayer using Supabase Realtime
- Room-based gameplay with 6-character room codes
- Cross-platform - play with friends on any device
- Local and online modes available
- Real-time Multiplayer: Play with friends or random opponents in real-time
- Turn Timer: 15-second turn limit keeps games moving
- Score Tracking: Persistent score tracking across multiple rounds
- Auto-restart: Games automatically restart after completion
- Responsive Design: Optimized for various screen sizes and devices
- Beautiful Animations: Smooth card flips, winning line animations, and transitions
- Modern Design: Clean, intuitive interface with gradient backgrounds
- Dynamic Status: Real-time game status updates and notifications
- Device Optimization: Specially optimized for various Android and iOS devices
Game screenshots showing the modern UI, multiplayer lobby, and gameplay
- Node.js (v16 or higher)
- Expo CLI (
npm install -g expo-cli) - Mobile device with Expo Go app or Android/iOS simulator
- Supabase account (for multiplayer features)
- Create a
.envfile in the project root:
EXPO_PUBLIC_SUPABASE_URL=your_supabase_project_url
EXPO_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key- Get your Supabase credentials:
- Create a project at supabase.com
- Go to Settings → API
- Copy your Project URL and anon key
# Install dependencies
npm install
# Start the development server
npx expo start- Mobile: Scan the QR code with Expo Go
- Web: Press
wto open in browser - Android Emulator: Press
a - iOS Simulator: Press
i
- Select "Local Game" on the main screen
- Take turns placing X and O pieces
- When you have 3 pieces and your opponent has 3, their oldest piece becomes shadowed
- Shadowed pieces are removed when that player makes their next move
- First to get 3 in a row wins!
- Select "Multiplayer" on the main screen
- Create Room: Enter your name and create a new room
- Join Room: Enter your name and a 6-character room code
- Share the room code with your friend
- Play in real-time with the same rules as local mode!
- Create Room: Host a game and share the room code with friends
- Join Room: Enter a room code to join an existing game
- Random Matchmaking: Get matched with random opponents instantly
- Opponent Management: Smart handling of opponent connections and disconnections
- Players take turns placing X's and O's on a 3x3 grid
- First player to get three symbols in a row (horizontally, vertically, or diagonally) wins
- Each turn has a 15-second time limit
- If time runs out, the current player automatically loses
- Games automatically restart after completion
- Frontend: React Native with Expo
- Backend: Supabase (PostgreSQL + Realtime)
- State Management: React Context API
- Real-time Communication: Supabase Realtime subscriptions
├── app/ # Main app screens
├── components/ # Reusable UI components
├── contexts/ # React Context providers
├── types/ # TypeScript type definitions
├── utils/ # Game logic utilities
├── constants/ # Theme and styling constants
└── utils/supabase.ts # Supabase client configuration
MultiplayerLobby: Room creation and joining interfaceGameBoard: Interactive game board with piece renderingGameStatus: Real-time game status and player infoGameControls: Game actions (reset, new game)
- Unique Room Codes: 6-character alphanumeric codes
- Host Controls: Room creator can start new games
- Player Identification: Clear "You" vs "Opponent" labeling
- Real-time Updates: Instant move synchronization via Supabase Realtime
- Automatic Connection: Connects to Supabase automatically
- Connection Status: Visual indicators for connection state
- Error Handling: User-friendly error messages
- Offline Support: Local gameplay always available
- Modern Design: Clean, intuitive interface
- Visual Feedback: Smooth animations and clear piece states
- Responsive Layout: Works on phones, tablets, and web
- Accessibility: Clear labels and high contrast colors
# Check your environment variables
cat .env
# Restart the development server
npx expo start --clear- Ensure your
.envfile has correct Supabase URL and anon key - Check that environment variables start with
EXPO_PUBLIC_ - Verify your Supabase project is active and accessible
# Clear cache and restart
npx expo start --clear
# Reset dependencies if needed
rm -rf node_modules
npm install- Verify Supabase credentials in
.envfile - Check Supabase dashboard for project status
- Ensure real-time features are enabled in your Supabase project
We welcome contributions! Please see CONTRIBUTING.md for detailed setup instructions and contribution guidelines.
This project is licensed under the MIT License - see the LICENSE file for details.
Made with ❤️ using React Native, Expo, and Supabase