Tic Tac Toe Capstone Project Documentation

I designed the system using five distinct microservices to modularize functionality and improve maintainability:

1. API Gateway: Serves as the unified entry point for frontend clients, routing requests to the appropriate backend services (Authentication and Room Manager APIs). It also handles request validation, rate limiting, and aggregates responses when needed.
2. Authentication Service: A RESTful API service responsible for user registration, login, logout, and profile retrieval. It manages user credentials securely in its dedicated authentication database, generates and validates JWTs for session management, and enforces authorization for protected routes.
3. Room Manager Service: Manages game room lifecycle — creation, joining, leaving, and participant tracking. It maintains consistent room state by querying its own database, ensuring synchronized participant lists across socket-based communication services.
4. Chat Service: A WebSocket-based microservice responsible for real-time in-game chat messaging. It supports message broadcasting within rooms, including metadata like usernames and timestamps, ensuring low-latency communication between players.
5. Game Service: Another WebSocket-based service managing the live game state, including player turns, move validation, win/draw detection, and rematch coordination. It maintains authoritative game logic separate from clients to prevent cheating.

Initially, I implemented the application as a monolithic backend to rapidly prototype core functionalities. However, I refactored to a microservices architecture because:

• Microservices are an industry-standard architecture providing hands-on experience with scalable, distributed systems.
• They improve scalability and flexibility, enabling independent development, deployment, and scaling of services — essential for future growth or supporting different games and features.
• Service isolation enhances security by limiting the blast radius of potential vulnerabilities, and allows for service-specific authentication and authorization policies.

I use two separate PostgreSQL databases to isolate concerns and improve maintainability:

• Authentication Database: Stores persistent user data such as usernames and securely hashed passwords. This separation ensures that sensitive credentials are managed independently and securely, following the principle of least privilege.
• Room Management Database: Handles dynamic game room data — tracking which users are in which rooms, managing join/exit events, and ensuring accurate player matchmaking.

While a high-throughput in-memory store like Redis is often used for real-time session or room tracking in production-scale systems, I opted for PostgreSQL due to the modest scale of my project. The database queries are lightweight and performant enough for current needs, making this a cost-effective and simpler solution during development and early deployment.

This project incorporates multiple security best practices to protect user data and ensure secure communication:

1. Microservices Security Architecture: The API Gateway acts as a security perimeter, centralizing authentication and authorization checks before requests reach sensitive backend services, thus minimizing attack surfaces.
2. JWT Authentication: JSON Web Tokens secure API access. Tokens are issued after successful login and validated by downstream services to verify user identity and permissions without requiring repeated database lookups.
3. Secure Token Storage: Tokens are stored securely depending on the client platform: HTTP-only secure cookies for the web app, OS-level secure keyring storage for the desktop app, and React Native's encrypted storage for the mobile app.
4. Encrypted Real-Time Communication: WebSocket connections for game and chat services utilize Socket.IO with built-in transport encryption (WSS), and an authentication handshake ensures only authorized clients can join rooms.
5. HTTPS Everywhere: All public endpoints, including APIs and frontend hosting, use HTTPS with TLS certificates provisioned via Certbot, ensuring encrypted data in transit.
6. AWS CloudFront CDN: The backend and frontend are served behind AWS CloudFront, providing DDoS protection, caching, and strict CORS policies to prevent unauthorized cross-origin requests.
7. Secure Password Storage: User passwords are hashed with bcrypt before database storage, ensuring strong protection against credential theft — and only usernames and hashed passwords are stored, no other sensitive personal information.

The full microservices backend is hosted on a single AWS EC2 t2.micro instance, which also runs:

• Two PostgreSQL databases — one for authentication and one for room management
• Nginx as a reverse proxy for routing requests to each service
• Certbot for HTTPS certificate generation (via Let's Encrypt)

I chose this monoinstance deployment for affordability and simplicity, appropriate for the current scale and traffic. However, I also successfully tested a distributed microservices setup with each service running on its own EC2 instance and communicating over internal networking — available on request.

The domain name is managed through AWS Route 53, with records configured to point to the EC2 backend. For HTTPS support, I used AWS ACM (Certificate Manager) via CloudFront to secure S3-hosted content and ensure SSL encryption.

The React web app is hosted on AWS S3 as a static site, fronted by CloudFront as a content delivery network (CDN) for faster global access. The Python desktop app installer is also available for download via a public S3 bucket.

Cross-platform API communication (web, desktop, mobile) occurs over secured HTTP(S), with Socket.IO and REST APIs configured to support real-time and authenticated interactions.

In the Projects section, you'll find all the available frontends to experience the game:

• Web App: Click the "Play Web App" button to launch the React-based version directly in your browser.
• Desktop App: Click the "Download App" button to install the Windows-compatible Python application. You may need to allow the download and app execution manually, as unsigned apps often trigger security warnings.
• Beta Mobile App: This is currently accessible via Expo Go:
  1. Install the Expo Go app from the Play Store or App Store.
  2. Android: Open Expo Go and scan the QR code shown under the mobile section on the site.
  3. iPhone: You'll first need to sign in or create an Expo account inside the Expo Go app. Then scan the QR code using your iPhone camera.

  Note: The mobile version is pending official publishing to the Google Play Store. Running it via Expo Go may have limitations, such as no custom splash logo and the app pausing if backgrounded.

  Account registration is required to access game rooms and play multiplayer matches. You can create your own account or use the provided demo credentials:

  • Username: Guest1    Password: 00000
  • Username: Guest2    Password: 00000
  
  

  Here are some ways to try out the multiplayer experience:

  • With a friend: Share a room name and play together in real time.
  • By yourself: Use two accounts on:
    • Two browser windows (e.g., regular + incognito mode)
    • Two different platforms (e.g., Web App + Desktop App)

This project was my first end-to-end fullstack application, and it pushed me beyond small, isolated coding tasks into system-wide thinking. I had to learn and apply concepts such as:

• Architectural trade-offs between monolithic vs. microservices designs
• REST API design, authentication flows with JWT, and state management across platforms
• Real-time communication using Socket.IO and asynchronous event handling
• Secure and scalable AWS cloud deployment across EC2, S3, Route 53, CloudFront, and ACM
• Multi-platform frontend development (React, Python desktop, and React Native mobile)

One of the biggest challenges was learning how all these moving parts integrate and communicate reliably. I had to self-teach infrastructure fundamentals, mobile deployment tooling, and secure cross-platform data flow — often through trial and error.

I intentionally treated this project as a sandbox to experiment with different technologies and architectural decisions, even when it meant reworking parts of the system. That exploration taught me how to plan, debug, and refine systems more confidently, which I now carry into new projects with a clearer and more structured approach.

I began this project in September 2024, initially aiming to build a simple online multiplayer Tic Tac Toe game for the web. As I progressed, I continuously expanded the scope to deepen my understanding and apply new technologies.

Over the following months, I:

• Added cross-platform support with a React web app, a Python desktop app, and a mobile app via React Native (Expo)
• Refactored the backend from a monolithic structure to a microservices architecture
• Introduced new features like live chat, a smart computer opponent for offline play, and JWT-based authentication
• Designed and deployed a secure and cost-efficient custom AWS infrastructure
• Created documentation to explain the architecture and my design decisions

After nearly nine months of iterative development, I finalized the capstone in June 2025. While there's always room for improvement — such as codebase refinement or features like leaderboards — I made a deliberate decision to close this chapter and move on to new challenges, including exploring AI development.

This capstone taught me the value of shipping a Minimum Viable Product (MVP) over chasing perfection. While not every line is pristine, the application works end-to-end across platforms, which was the ultimate goal. Done is better than perfect — and this mindset enabled me to learn, adapt, and deliver.

This project utilizes a wide range of technologies across backend, frontend, cloud infrastructure, and security layers:

• 🔧 Backend: Node.js with Express for RESTful APIs, Socket.IO for real-time gameplay and chat, PostgreSQL for relational data storage, and JWT for session-based authentication.


• 🖥️ Frontend: React (web app), PyQt5 (desktop app), and React Native via Expo (mobile app), all communicating with the backend via WebSockets and REST APIs.


• ☁️ Cloud Infrastructure: AWS EC2 (app hosting), S3 (static hosting and file downloads), Route 53 (domain management), CloudFront (CDN), ACM (SSL certificates), Nginx (reverse proxy), and Certbot (TLS automation).


• 🔐 Security: bcrypt for password hashing, HTTPS via TLS for secure communication, and JWT for token-based authentication and protected routes.

Below are the public GitHub repositories that make up the full-stack Tic Tac Toe application, separated into backend and frontend components. Each repo includes its own README with setup instructions, architecture notes, and technology stacks used.

• 🔧 Microservices Backend:
  Node.js Express-based backend using a microservices architecture with REST APIs, JWT authentication, PostgreSQL, and WebSocket support.
  github.com/MathKia/ttt_microservices_backend


• 🌐 Web App Frontend:
  Built in React and hosted on AWS S3 + CloudFront. Connects to the backend via API and WebSockets. Includes authentication, matchmaking, and in-game chat features.
  github.com/MathKia/ttt_micro_webapp


• 💻 Desktop App Frontend:
  A Python PyQt5-based GUI that mirrors the web app's functionality. Designed for Windows, downloadable as a `.exe`.
  github.com/MathKia/ttt_micro_desktopapp


• 📱 Mobile App Frontend:
  A React Native mobile version distributed via Expo Go for Android and iOS testing. Contains the same core features as the web/desktop apps.
  github.com/MathKia/ttt_mobile_frontend