🕹️ Building the Unbeatable: My Cyber-Neon Full-Stack Evolution
Most developers start their journey with a simple Tic-Tac-Toe script. I too started like that making a console application of it using Java. Then I decided to take it further. What began as a Java console exercise evolved into a Cyber-Neon, Full-Stack Engine powered by Spring Boot, TypeScript, and a "God-Mode" Minimax AI.
Building this wasn't just about the code; it was about navigating the "brutal" reality of full-stack development. Using IntelliJ IDEA and Maven for the first time, I hit several roadblocks. Here is how I engineered my way through them.
🛠️ The Architecture
Backend: Spring Boot (Java) managed via Maven.
Frontend: TypeScript, CSS3 (Neon/Cyberpunk aesthetic), and HTML5.
IDE: IntelliJ IDEA.
The Brain: Recursive Minimax Algorithm (Unbeatable Logic).
Database: MongoDB (First-time integration).
Deployment: Render
Features
🎨 Neon colored Custom Fluid Cursor: A JavaScript-driven dual-element cursor (dot and trailing outline) that enhances the "liquid" feel of the interface.
⚡ Animated Feedback: High-speed win-line drawing logic and pop-in animations for "X" and "O" markers using CSS Keyframes.
📱 Mobile Optimized: Responsive layout using CSS
clamp()and touch-friendly interaction logic.☁️ Cloud Sync & State: Built-in support for asynchronous result logging to a backend API to track global win/loss statistics.
Move To Top Button: To move/scroll up the page.
Leaderboard: Showing the number of wins by X and O and Draws.
Mistakes committed while making this Game:
1. The "Security Breach": Pushing Secrets to GitHub
The Mistake: While setting up MongoDB for the first time to store user scores, I did something every junior dev eventually does: I hardcoded my database connection string (with the password!) into my code and pushed it to a public GitHub repo.
The Warning: Within minutes, I got a "Secret Scanning" alert from GitHub. It was a wake-up call.
The Fix: I learned to use Environment Variables (.env files) and added them to my .gitignore.
The Learning: Security isn't an afterthought; it’s a foundational step. I had to rotate my database keys immediately. Never trust your repo with your secrets.
2. The "Ghost in the Machine": Syncing Local & Remote Code
The Conflict: While polishing documentation on GitHub, I was simultaneously refactoring my Spring Boot controllers in IntelliJ. I made edits to the README.md on the web but forgot to "pull" them locally. This led to a Merge Conflict.
The Correction: I utilized IntelliJ’s built-in 3-Way Merge tool.
The Fix: I learned to treat Version Control as a conversation. By comparing Yours (Local), Theirs (Remote), and the Result, I merged my documentation and logic perfectly.
Pro-Tip: Always Git Pull before starting a coding session to avoid "desync" headaches.
3. The "Instant Defeat" Problem: Logic vs. UX
The Conflict: The Minimax Algorithm is perfect. It calculates every possible move to ensure it never loses. However, in my first build, the AI would respond in milliseconds. It felt robotic and jarring—like playing against a calculator.
The Correction: I had to "humanize" the machine.
The Fix: I implemented an asynchronous setTimeout in my TypeScript service to create a 600ms "Thinking Delay."
The Learning: Software isn't just about speed; it's about Psychology. By adding a slight delay, the AI felt more strategic and menacing, making the win (or the inevitable draw) feel more earned.
4. The "Deployment Desert": Battles with Render
The Conflict: Localhost was easy. Deploying a Spring Boot + MongoDB app to Render was a different beast. I faced "Port Binding" errors and database connection timeouts because I hadn't configured the environment variables correctly on the server side.
The Correction: I spent hours reading logs and documentation.
The Fix: I learned how to set up Web Services on Render, configure the PORT variable dynamically, and whitelist Render's IP in the MongoDB Atlas console.
The Learning: A project isn't "done" until it’s accessible to the world. Deployment is 50% of the battle.
5. The "Invisible Developer": Moving from Private to Public
The Conflict: I was building high-end features and wanted to share them on X (Twitter), but my social profiles were "Protected." I realized that if a mentor or recruiter wanted to see my "Proof of Work," they couldn't find it.
The Correction: I shifted from a Consumer to a Contributor mindset.
The Fix: I unlocked my X (Twitter) profile.
The Learning: In 2026, "Building in Public" is a technical skill. If your code isn't visible, it doesn't exist to the industry.
🕹️ How to Play
- Visit the Live Demo (Play here).
- As Player X, make your move on the 3x3 grid.
- Attempt to outsmart the Minimax AI (Spoiler: It's impossible!).
🚀 Conclusion: Engineering Beyond the Code
Building this full-stack application was more than an exercise in syntax; it was a comprehensive lesson in System Architecture and Resilience. Transitioning from a local Java environment to a cloud-deployed ecosystem using Spring Boot and MongoDB forced me to confront the real-world complexities of security, data persistence, and DevOps.
The most significant takeaway from this journey was the realization that high-quality software is not defined solely by the complexity of its algorithms, such as Minimax, but by its reliability and user-centricity. Whether it was resolving critical merge conflicts in IntelliJ IDEA, rectifying security vulnerabilities on GitHub, or troubleshooting deployment hurdles on Render, each challenge served as a catalyst for professional growth.
As I continue to "Build in Public," I recognize that a developer's true value lies in their ability to analyze failure, iterate with precision, and maintain a commitment to evidence-based excellence. This project stands as a testament to that mindset—proving that with the right technical stack and a disciplined approach to problem-solving, any "Tier 3" starting point can lead to "Tier 1" engineering results.
👤 About the Author
Pratyush Murmu Computer Science & Engineering Undergraduate Specializing in Java, TypeScript, and Spring Boot. Dedicated to building scalable, impactful solutions for modern society.
Top comments (0)