Tic Tac Toe
A simple and interactive Tic Tac Toe game built with React and Vite. Play against a friend in the browser with a clean UI and instant feedback.
Who doesn&pos;t love a quick game of Tic Tac Toe? It's a timeless classic — and one of the best beginner-friendly games to build when diving into frontend development. In this post, I'll walk you through the Tic Tac Toe game I built using React, Vite, and SCSS, hosted live on Vercel.
Live Preview
💡 Why I Built This
As a frontend developer, I wanted to combine clean UI, solid logic, and fast deployment into a fun project. Tic Tac Toe checked all the boxes:
- Simple rules, yet logic-heavy under the hood.
- Easy to build a great user experience.
- Perfect to experiment with component structure and styling.
- Plus, it was just fun to build!
🧩 What It Does
This is a two-player Tic Tac Toe game that you can play in your browser with a friend. Here&pos;s what you can expect:
- A classic 3x3 grid.
- Turn-based logic with X and O.
- Winner detection — or a draw.
- A button to restart the game instantly.
- Clean, responsive UI built with SCSS modules.
🎮 How to Play
If you've ever played Tic Tac Toe before, you already know the rules. But here's a quick refresher:
- The game starts with Player X.
- Players take turns placing their symbol in an empty cell.
- The first to align 3 symbols horizontally, vertically, or diagonally wins.
- If all cells are filled without a winner, it's a draw.
- Hit “Restart” to start over anytime.
- You can play with a friend on the same device.