Pictionary Monorepo

A real-time Pictionary game where a mobile user can play with a web user. Built with React Native (mobile), React + Tailwind (web), and Node.js/Socket.IO (server).

Structure

• apps/web: Web client (React + Tailwind)
• apps/mobile: Mobile app (React Native + Expo)
• apps/server: Node.js/Socket.IO backend
• packages/types: Shared TypeScript types

Running the Project

Install dependencies at the root:

yarn install
# or
npm install

Build the shared types package:

yarn workspace @pictionary/types build

Start the Server

cd apps/server
yarn dev
# or for production:
yarn build
yarn start

The server will run on http://localhost:4000

Start the Web App

cd apps/web
yarn dev

The app will be available at http://localhost:5173

Start the Mobile App

cd apps/mobile
npx expo start

Scan the QR code with your phone, or run on an emulator.

---

Local Network Connectivity

• If you want to play from a real mobile device:
  • Find your computer's LAN IP (e.g., 192.168.1.100).
  • In both apps/web/src/App.tsx and apps/mobile/App.tsx, replace http://localhost:4000 with your LAN IP:

    const socket = io('http://192.168.1.100:4000');

  • Restart your dev servers after making this change.

---

Troubleshooting

• If the mobile app can't connect, double-check the server URL and your firewall settings.
• If you see type errors, rebuild the types package and restart your dev servers.
• If you get CORS errors, make sure the server's CORS config allows your web/mobile origins.

---

Polish & Next Steps

• The mobile app currently does not visually render the drawing. For a real experience, use a library like react-native-svg or react-native-skia.
• For a more robust setup, use environment variables for the server URL (see Vite and Expo docs).
• Add authentication, rounds, chat, and better error handling for production.
• Deploy the server (e.g., on Heroku, Render, or your own VPS).
• Use HTTPS and secure WebSockets for production.

---

Testing Real-Time Play

• Open the web app in your browser.
• Open the mobile app on your phone/emulator.
• Join the game from both clients.
• Try drawing on the web canvas; you should see drawing events sent to the mobile app (and vice versa, once you implement drawing rendering on mobile).
• Try guessing words from both clients.