Overview

In this project I will develop a simple multiplayer tic-tac-toe game using Angular 6 and Google Firebase.  I have played around quite a lot with both Angular and Firebase, but have never brought a project to completion and deployment.  I plan to bring this to deployment, with some very simple features.

• A user that is currently logged out should be able to login
• A user that is currently logged in should be able to logout
• A user that is logged in should be able to create a new game
• A user that is in a game should be able to invite another user to play
• A user should be notified when they have won or lost a game
• A user

The features could change of course, as I learn more.  And, per the Agile Manifesto Principles, that would be welcome.

For development I am using Visual Studio Code.

For tips on installing and setting up a new Angular project, visit the Angular Quick Start Guide.  You will also need Node.js and npm.

Create a New Project

The new command in the Angular CLI generates a new project with a default structure.

> ng new tic-tac-toe
> ng serve --open

The serve --open command should open a tab in your default browser to localhost:4200.

Executing ng test runs the tests (in Angular the tests are written in the *.spec.ts files).

At the time of creating this project, the version of the Angular CLI that I was using (6.0.8) generated default unit tests that failed. The test expected static content with the words “Welcome to tic-tac-toe!”, but the application actually rendered “Welcome to app!”.  I corrected this by changing the test. After executing the tests again, they passed.

Install Bootstrap 4

I decided to use Bootstrap 4 for styling.

> npm install --save bootstrap

After installing bootstrap, add a reference to the bootstrap.min.css file into angular.json.

"styles": [
"node_modules/bootstrap/dist/css/bootstrap.min.css",
"src/styles.css"
]

Install and Setup Firebase

Create a new Firebase Project in the Firebase Console, and set the authentication method to basic e-mail/password.  Under the Authentication tab select WebSetup and copy the Firebase parameters into the environment/environment.ts file in the Angular app.

Using npm install the necessary dependencies for Firebase.

> npm install --save firebase angularfire2

No we are ready to start modifying the application!  All source code up to this point can be found here.

In the next part of this series, I add authentication.