A real-time, ultra-fast, cross-platform multiplayer Tic-Tac-Toe web application. Built with low-latency rendering and professional decoupled architecture ensuring a premium gaming experience mapped perfectly to cloud statistics.
Designed and Licensed by Loganathan.
Instead of relying on standard HTTP polling, the entire gameplay engine leverages Socket.io. Connections are continuously held open leveraging raw RAM matrices. Moves instantly translate to the backend where validation checks return in miliseconds avoiding slow payload serialization guaranteeing esports-level responsiveness.
Every player registers a local caching profile referencing their name and age. This natively injects into MongoDB MongoDB Atlas. While playing, victorious matches automatically sync and calculate Victories on your global profile ensuring your stats persist across all devices.
The Frontend operates completely independently from the Backend.
- The API Node Server uses an internal locking array, strictly blocking arbitrary network requests leveraging
.envbounded CORS restrictions. - The React-Like Vanilla Frontend pulls dependencies from decentralized CDNs (like CloudFlare) keeping the payload incredibly lightweight, fetching data explicitly through configurable API targets.
Creating a match instantly issues a highly-secure 4-Character Alphanumeric Code.
- Player Caps: The Node server natively intercepts connections. If a 3rd person attempts to enter a full lobby, the WebSocket immediately issues a rejection boundary bouncing them natively back into their frontend throwing a local
Room FullToast Notification without risking loading conflicts. - Dynamic Leaving: If a user cancels the match, the room is completely wiped from active memory to prevent "ghost" matches scaling server RAM costs.
When clicking Play Random, the engine bypasses traditional queuing!
- It shoots a Toast Notification directly into the screens of every other active User sitting on the main URL.
- If someone clicks Accept, the engine routes their payload silently mapping the origin room!
- Spam Protections: The server natively locks the broadcast button firing a 20-second active cooldown counting down sequentially directly on the screen!
Share a singular device without sacrificing stats!
- The system ingeniously chains 2 separate Database registrations querying both profiles independently.
- It then builds a localized session explicitly ignoring strict IP-lock checks allowing a single mouse to click for both Player X and Player O continuously, ensuring both sides retain exact stat-tracking parameters up into the cloud!
Frontend UI:
- HTML5 / Vanilla JavaScript (ES Module Formats)
- Vanilla CSS3 (Neon / Dark-mode / Glassmorphism)
- Google Fonts (Inter/Outfit)
- Decentralized CDN Socket Instances
Backend API:
- Node.js & Express.js
- Socket.IO (Real-time TCP logic)
- CORS (Domain Security Modules)
- Mongoose / MongoDB Atlas (Cloud Relational Data)
Given the highly professional detached environment, you must spin up both elements securely.
Inside your terminal navigate to the project directory and install the necessary frameworks:
npm install express socket.io cors mongoose dotenvCreate a .env file in the root directory mapping your cloud credentials:
MONGODB_URI=your_mongodb_atlas_connection_string
PORT=3000
FRONTEND_URL=http://127.0.0.1:5500Ensure your FRONTEND_URL accurately targets whatever local address you are hosting the UI from.
node server.jsYour CLI should return Server running on http://localhost:3000 & MongoDB Connected.
Since this is completely detached, do not view it through the Node string.
- Open the project inside VS Code.
- Ensure you have the
Live Serverplugin installed. - Right-click the
public/index.htmlfile and select Open with Live Server. - The game will automatically render and dynamically bind to your actively running Node instance!
This project architecture, layout, design, and code repository are strictly the intellectual property of Loganathan. All rights reserved. Do not distribute without explicit authorization.