LWC Project Setup for Building a Tic-Tac-Toe Game

LWC game tic-tac-toe
Series: How to Create a Tic-Tac-Toe Game Using LWC
You are reading part 1 of 7
Next →
Progress: Part 1 of 7

So, you’ve decided to build a Tic-Tac-Toe game using Lightning Web Components (LWC)? Excellent choice! It’s simple enough to grasp, yet rich enough to help you flex some serious LWC muscles. In this article, we’re going to dive into how to properly set up your project for success - no heavy theory, just real-world, actionable steps. Whether you're a Salesforce developer just getting cozy with LWC or a seasoned pro looking for a fun side project, you’ll find something useful here.

 Application Roadmap

Before touching a single line of code, it's crucial to map out what we're building. Imagine heading out on a road trip without a map - not exactly smart, right? Similarly, clear planning prevents you from getting lost halfway through your coding journey.

Our Tic-Tac-Toe app will have three major phases for the user:

  • Start Screen – The user picks a side (X or O) and starts the game.
  • Game Board – The player and the CPU (computer) take turns.
  • Game Logic – Handling moves, checking winners, and managing draws.

Now let’s break down the essential components we’ll create:

ticTacToe
Main app container. Manages switching between screens
startScreenComponent
UI for player to pick a side and start the game
gameContainer
Hosts the board and controls game flow
boardComponent
Displays a 3x3 grid where moves happen
cellComponent
Represents a single cell in the board
gameLogic.js
Pure functions to calculate winners and detect draws
aiService.js
Basic AI that picks the best move for CPU

Cool? Cool. Now let’s actually set this up properly!

Step 1: Scaffold the Components

It’s way easier to think clearly when the structure is there, even if files are empty at first. Go ahead and scaffold the basic components:

sfdx force:lightning:component:create --type lwc --componentname ticTacToe
sfdx force:lightning:component:create --type lwc --componentname startScreenComponent
sfdx force:lightning:component:create --type lwc --componentname gameContainer
sfdx force:lightning:component:create --type lwc --componentname boardComponent
sfdx force:lightning:component:create --type lwc --componentname cellComponent

And for our helper JavaScript files:

mkdir force-app/main/default/lwc/gameLogic
touch force-app/main/default/lwc/gameLogic/gameLogic.js

mkdir force-app/main/default/lwc/aiService
touch force-app/main/default/lwc/aiService/aiService.js

Organization is half the battle. Trust me, Future You will thank you.

Step 2: Build the Entry Point – ticTacToe Component

This is where everything starts. It's basically the traffic cop of the app. It will:

  • Display the start screen when the game hasn’t started
  • Swap to the game board once the player chooses a side.
  • Handle resetting the game when needed

It’s the director of the play, while other components are the actors.

Step 3: Create the Start Screen UI – startScreenComponent

We need a friendly and simple start screen. It will:

  • Let users pick "X" or "O" with a click
  • Trigger the game start when ready

Think of this screen like the front door to your game. Make it welcoming, but don't overcomplicate it.

Step 4: Create the Game Container

The gameContainer will live between the main app and the game board. Responsibilities:

  • Keep the game state (cells, whose turn it is)
  • Detect if someone won or if the match is a draw
  • Trigger CPU moves when needed

In other words, it’s the game manager. It keeps all the rules and order in place, just like a referee.

Step 5: Build the Board – boardComponent

Here’s where the action happens! The boardComponent:

  • Displays a 3x3 grid of clickable cells
  • Handles layout logic and styles
  • Marks the winning line when someone wins

It doesn’t decide who wins though - that’s for gameLogic.js. The board just shows what’s happening.

Step 6: Create the Cell – cellComponent

Each tiny square on the board is a cellComponent. Each cell:

  • Can be empty, an "X", or an "O"
  • Highlights if it’s part of the winning combination
  • Only accepts clicks if it's currently empty

Fun fact: keeping each cell isolated like this means your game will be way more performant because only cells that change need to re-render.

Step 7: Write Pure Helper Functions

Why pure functions? Because predictable code is bug-free code (well, almost). In gameLogic.js, you’ll have:

  • calculateWinner(cells) - checks if anyone won
  • isDraw(cells) - sees if it’s a draw
  • generateInitialBoard() - gives you a fresh clean board

No side effects, no weird mutations. Easy to test. Easy to trust.

Step 8: Build a Simple AI

Don’t overthink this - the CPU just needs to feel smart enough. In aiService.js, we’ll:

  • Try to win if possible
  • Block the opponent if they’re about to win
  • Otherwise, pick the first empty spot

It’s like a simple "if this, then that" brain - no need for fancy AI models. Sometimes simple is brilliant.

Step 9: Connect It All Together

Now that you have all parts in place, it’s time to wire everything up:

  • From the Start Screen, move into the Game Board.
  • Player clicks a cell → Board updates → CPU plays next.
  • Winner or Draw detected → Game ends → Option to restart.

Feels like assembling a LEGO set, right? Click pieces into place until you have something magical.

Conclusion

And there you have it - the solid foundation for building a Tic-Tac-Toe game using Lightning Web Components! We planned our structure, created modular components, kept the logic pure, and even added a basic AI to make the CPU feel somewhat smart.

Building games is a fantastic way to learn LWC - it's like hitting the gym but way more fun. Stay tuned, because in the next articles, we’ll dive into coding each component step-by-step, adding state management, and making the game feel smooth and satisfying for players.

Continue Reading