👨‍💻 Let’s Build a Tic Tac Toe Game with Next.js, Serverless & AWS!

Ok let’s be honest, who hasn’t played an exhilarating game of tic tac toe? Whether you have played one game or 1,000 games, imagine being able to code your own digital tic tac toe game to play any time, any where.

This is exactly what we’re going to be doing today! Are you ready? Let’s go!!

The Tech Stack:

Let’s review the tech stack that we’ll be using for the project:

AWS CloudFront: a CDN service for delivering data, apps, and APIs globally;
AWS S3: an object storage service;
Lambda: a compute service for running code serverlessly

Serverless: a zero friction serverless environment for easy deployment to AWS

NEXT.js: an open-source React front-end framework for creating production grade web apps that scale

React: a JavaScript library for building interactive user interfaces

Node.js: works alognside the NPM to easily install what's needed and bundles the app into a single file for webpack

These technologies are crucial for our application because they help us package our code up in a build folder that will be ready to be deployed right on the web for all to use and game with!

* excitement ensues *

Let’s break down each component of the app!

Front-End

To start off, we’re going to pick a front-end framework to begin the app with. I’ve been mainly using React for quite sometime, but a very popular framework that has emerged over the past year is NEXT.js.

Here’s the 2021 case for NEXT.js:

It’s blazingly fast 🔥
It’s everything the create-react-app boilerplate is and more
It’s super easy to deploy full-stack apps for production
API Routes let you easily build APIs in-app
Deployment looks fire 💯

We’ll Bootstrap a new Next.js project with the following script:

npx bootstraps the project
--use-npm tells the CLI (Command Line Interface) to bootstrap the Next.js app using npm (Node.js)

Let’s bootstrap `NEXT.js` in one line of code:

Boom! We now have a full-packaged app ready to work on! Let’s work on some back-end now.

To get the app deployed locally so we can see the app being built in real time, be sure to cd into the app folder that we designated for our project tictactoe and run the following script to deploy locally:

`npm run dev`

Back-End

The Tic Tac Toe app wouldn’t be complete without an engine to actually power a game of Tic Tac Toe, right? Who can win? How can they win? What is needed to consider a game “over”?….

These are the questions we’ll have to answer in our code to define the logic of how the game works.

We’ll create a functional component called Board.js which will do a couple of things:

Create an array of 9 squares (the 9 boxes in the game)
Explain that X or O can go into those squares, and 3 = winner!
Write out the various winning combinations our algorithm will look for (i.e. across, vertical, diagonal)
Allow the players to alternate taking turns until a winner is decided or there’s a draw

Let’s write our `Board.js` component:

Front-End

Next, we’ll make a component for the Game.js file.

Remember that handy Board.js file we just wrote?

Well we’ll be able to now import that into a new component that will be our actual game that people will see (and use). The Board is more of our engine/back-end driving the game, but now we want to put it a screen that people can use and see!

Let’s write our `Game.js` component:

You’ll see some classNames here, and that’s because we’ll also be diving into CSS with some oh so stylish stylings!

Let’s write our `index.css` styling:

Back-End

Back to Back End! We’ll need to do something important now for the app to work: Pass In Data as Props to the Square

We’re going to pass down 2 props from the Board to the Square: value and onClick.

When a square is clicked by our mouse…the onClick function provided by the Board fires with the onClick event listener/handler.

This is what will turn the square from a blank box into an X or an O - like magic (because magic is real, I swear ✨)

Let’s write our `Square.js` component:

Dev-Ops

Wow this is quite a bit of code!! Let’s deploy this to the cloud and start playing Tic Tac Toe from anywhere in the world 🤩

To add in the Serverless functionality, we’re going to add a few things to our package.json file, namely:

Changing the deploy script to sls (for serverless)
Adding in serverless to our devDependencies

Next we’ll add a Serverless.js file to our project. It’s only a few lines of code but will tell the app to render out a .serverless file to help with our deployment. Make sure this file lives within the app so it knows to deploy.

Let’s write our `Serverless.js` file:

Now we’ll run a good ‘ol npm install to add Serverless to our project and its related dependencies.

By following all of these steps, Serverless will help us deploy our app to AWS and the cloud easily and rapidly!

We’ll next run the following script and BOOM! We’re on the world wide web!!

`npm run deploy`

Screen Shot 2021-05-06 at 12.31.28 AM.png

I hope you enjoyed this tutorial!! It was a team effort by fellow AWS Community Builders Tom Spencer, Shubham Chaudhari, and Parth Purvesh! 👨‍💻🌎

Links

Code along with me in this video tutorial here:

Let’s Connect Online:

📲 Let's connect on the 'Gram: https://instagram.com/brianhhough
🤝 Let's connect on LINKEDIN: https://linkedin.com/in/brianhhough
💻 Join my FREE Tech/Coding Facebook Group: https://www.facebook.com/groups/techstackplaybook
🌟 Check out my other episodes: https://www.brianhhough.com/techstackplaybook

Learn How to Code:

🌴 Team Treehouse — get a FREE MONTH with my affiliate referral code: http://referrals.trhou.se/brianhough2
👨‍💻 Codecademy — get a FREE MONTH of a Pro membership with my affiliate referral code: http://ssqt.co/mQgVi7z
☁️ BitDegree — get 60% OFF of their AWS bootcamp program with affiliate referral code ‘BRIAN60’: https://www.bitdegree.org/aws-training/enterprise

👨‍💻 Let’s Build a Tic Tac Toe Game with Next.js, Serverless & AWS!

The Tech Stack:

AWS CloudFront: a CDN service for delivering data, apps, and APIs globally;
AWS S3: an object storage service;
Lambda: a compute service for running code serverlessly

Serverless: a zero friction serverless environment for easy deployment to AWS

NEXT.js: an open-source React front-end framework for creating production grade web apps that scale

React: a JavaScript library for building interactive user interfaces

Node.js: works alognside the NPM to easily install what's needed and bundles the app into a single file for webpack

Front-End