A polished Connect 4 game for browser and Android.
Play locally, challenge the AI, or invite a friend online — with the same game available as an Android app.
Tip
Want to play on Android? Download the latest APK from the latest release. GitHub will show the checksum alongside the asset.
pnpm install
pnpm devOpen http://localhost:4444.
pnpm install also configures a local pre-push hook that runs the release checks and aborts the push if generated artifacts are stale or a step fails.
Production build and quality checks
pnpm lint
pnpm typecheck
pnpm build
pnpm startRun pnpm prepublish:check before a larger publication or deployment. The online multiplayer browser check is available as pnpm test:e2e:online.
| Area | Details |
|---|---|
| Game modes | Local PvP, player-vs-AI, and online multiplayer |
| AI | easy, medium, and hard minimax-based play |
| Online | PeerJS serverless by default; optional PocketBase transport |
| Mobile | Android Capacitor wrapper around a static Next.js export |
| Languages | 16 languages, including Arabic RTL support |
| Persistence | LocalStorage for stats, preferences, and the current game |
| Play | Customize | Share |
|---|---|---|
| Local PvP and AI opponents | Color themes, System/Light/Dark appearance, tabletop mode | Online codes, invite links, and result sharing |
| Pop-Out, Gravity, Bomb Disc, Wild Spots, Power-Up, Rising Floor, and Connect 5 | Timers, undo, move history | Browser and Android cross-play |
The Android app wraps the static mobile export; desktop remains browser-first.
pnpm mobile:build
pnpm android:sync
pnpm android:open
pnpm android:run| Command | Purpose |
|---|---|
pnpm mobile:build |
Build the mobile web bundle into out/. |
pnpm android:sync |
Copy the bundle and sync Capacitor plugins. |
pnpm android:run |
Build and deploy to a connected device/emulator. |
pnpm android:bundle |
Build a signed Play Store AAB after local signing setup. |
pnpm android:bundle:check |
Build and lint an unsigned release AAB for local/CI verification. |
Full setup, deep-link testing, signing, and troubleshooting: Android guide.
https://example.com/?game=<code>
connect4://join?game=<code>
Android shares the public web invite URL, so standard Android share targets can pass a player straight into a match. Verified HTTPS App Links additionally need /.well-known/assetlinks.json for the final signing certificate.
| Transport | Enabled when | Notes |
|---|---|---|
| PeerJS serverless | NEXT_PUBLIC_SERVERLESS !== 'false' |
Default; no database; suitable for browser-to-Android cross-play. |
| PocketBase | NEXT_PUBLIC_SERVERLESS === 'false' |
Uses NEXT_PUBLIC_POCKETBASE_URL; intended as an optional backend path. |
The important public build settings are NEXT_PUBLIC_SITE_URL and NEXT_PUBLIC_SERVERLESS. See environment configuration for the local/production split.
app/ Next.js routes, metadata, sitemap, robots, API test routes
components/Connect4/ Board, controls, status, modals, history, pieces, SEO section
hooks/use-connect4.ts Game state, persistence, AI scheduling, and online lifecycle
lib/connect4-logic.ts Pure board rules, scoring, win detection, and minimax AI
lib/invite-links.ts Public invite URL and deep-link helpers
locales/ 16-language UI translation registry
android/ Capacitor Android native project
| Topic | Start here |
|---|---|
| Development, testing, and architecture | Documentation index |
| GitHub Pages (recommended), Docker, VPS, and Netlify | Deployment guide |
| Android development and Play distribution | Android guide |
| Privacy, services, assets, and attribution | Legal documentation |
| Dependency notices | Open-source licenses · third-party notices |
Licensed under Apache License 2.0. The code license does not grant rights to project names, logos, package identifiers, domains, or store branding; see trademarks.