██FR█████ █INTELL███████████

Chess Meets Code: How I Created a Full-Stack Game Using React + MongoDB


This content originally appeared on DEV Community and was authored by Nargis Khatun

What if your next coding project could look sleek and challenge your logic? I set out to solve that by building Chess Master, a full-stack React + MongoDB chess game — featuring real AI battles and dark mode that devs want. Here’s how I did it.

I created Chess Master, a full-stack chess application built with React, Tailwind CSS, Node.js, and MongoDB, featuring:

  • AI battles (with Stockfish)

  • Puzzle solving

  • Light/dark theme toggle

  • Secure authentication

  • Fully responsive UI

In this post, I’ll walk you through the process: how I built it, the tech I used, and what I learned along the way.

Image description

Image description

Image description

💻 Project Overview

🔗 Live Demo: https://chess-frontend-dun.vercel.app
📦 GitHub (Frontend): [https://github.com/itxnargis/chess-frontend]
📦 GitHub (Backend): [https://github.com/itxnargis/chess-backend]

Tech Stack:

  • Frontend: React.js, Tailwind CSS, chessboard.js, Framer Motion

  • Backend: Node.js, Express.js

  • Game Logic: chess.js

  • Database: MongoDB

  • AI: Stockfish

  • Deployment: Vercel (frontend), Render (backend)

🛠 Frontend – React + Tailwind

I structured the frontend using React functional components and chessboard.js for the visual board. Chess.js handled move validation, checks, legal moves, and FEN management.

Example: Handling Piece Movement

const handleMove = (source, target) => {
  const move = game.move({ from: source, to: target, promotion: 'q' });
  if (!move) return false;
  setGame(new Chess(game.fen()));
  return true;
};

🌐 Responsive Design with Tailwind

  • Used utility classes like flex, grid, p-4, md:w-1/2, etc.

  • Designed for desktop-first, then used breakpoints for mobile.

⚙ Backend – Node.js + MongoDB

The backend handles:

  • User auth (bcrypt password hashing)

  • Puzzle score tracking

  • API endpoint to send FEN to Stockfish and return the best move

Sample API Endpoint:

app.post('/api/ai-move', async (req, res) => {
  const { fen } = req.body;
  const bestMove = await getStockfishMove(fen);
  res.json({ move: bestMove });
});

I used Express middleware for sessions, mongoose for DB schema, and CORS for frontend-backend connection.

🤖 Integrating AI with Stockfish

This was the most exciting and complex part.

  • I used Stockfish.js, a WebAssembly version of Stockfish

  • Sent the current board FEN to the engine

  • Got back the best move suggestion

  • Updated frontend board accordingly

Sample AI Request Flow:

  1. Player makes move → send new FEN to backend

  2. Backend runs Stockfish with that FEN

  3. AI move returned → applied to board

🚧 What I Learned

  • Real-world state management with React (chess logic is complex!)

  • Hands-on practice with game loop & user input handling

  • Styling faster & cleaner with Tailwind CSS

  • Integrating an external AI engine

  • Secure backend session handling

  • Better understanding of project planning, deployment & testing

🚀 What’s Next

  • Real-time multiplayer using Socket.IO

  • Saving games to the DB for history tracking

  • Leaderboard & ranking system

  • Share puzzles via link

🙌 Final Thoughts
This project helped me grow as a full-stack developer. If you’re a developer looking to sharpen your skills, I highly recommend building games like this — they combine UI, logic, networking, and UX into one challenge.

💬 Let’s Connect

If you’re a dev, a recruiter, or someone who loves chess + code, I’d love to hear from you!

🧠 Have feedback? Want to collaborate? Need help with a React or Node project?

👉 DM me on LinkedIn | 🌐 Portfolio


This content originally appeared on DEV Community and was authored by Nargis Khatun