React Native: Create an Unbeatable & Multiplayer Tic-Tac-Toe

Description

In this course we are going to create a Tic-Tac-Toe game using React Native (Expo). Although the Tic Tac Toe game is simple, our project won't be very simple. We are going to use Typescript in the project. Typescript is a tool that adds types of the JavaScript language. Having types allows us to avoid certain bugs in our code in addition to many other benefits.

Our app will contain a single player game. For that we are going to use an algorithm called the Minimax Algorithm in order to create a bot with different difficulties. In addition to that, we will also have a multiplayer game. In the multiplayer game we are going to create an API and manage Authentication using a service called AWS Amplify. AWS Amplify allows us to easily build a GraphQL API that we will use in our game.

Let's breakdown what will be discussed in each section:

Section 1

This is an optional section for students without or with limited Typescript knowledge. We are going to have a very quick introduction to Typescript. We will discuss things like basic types, types, interfaces and generics.

Section 2

In this course we are going to use a tool called expo. Expo is a tool that simplifies building apps using React Native. We will see what is the difference between expo and normal React Native. And then we will install expo, create a new expo project and run it on a physical device, Android emulator and the iOS simulator.

Section 3

In this section we are going to setup some tools that will be very helpful in our workflow. First we will install Typescript for type checking. Then we will use Prettier to automate formatting our code. We will also use ESLint to enforce JavaScript rules. Husky to make sure we run all these tools before committing our code to git. And we will finally install a module resolver to make importing files and components in our project a lot easier.

Section 4

In this section we are going to do some general setup for our application. Including loading fonts, creating a custom text component, setting up navigation and more.

Section 5

In this section we will build our single player game. This includes the UI, the bot player, adding sounds and haptics, creating a settings page to choose difficulty and other options and persisting the settings on the phone using react context and AsyncStorage.

Section 6

This section will just be an introduction to AWS Amplify and some AWS concepts like IAM. We will also install amplify and set it up in our project.

Section 7

Here we will use AWS Cognito which is a service that comes with Amplify to add authentication in our app. This includes login, register, otp confirmation, resend password, reset password, forget password and more.

Section 8

This section will cover creating a GraphQL API using Amplify for the multiplayer game. We are going to learn how to create a model in our database and add authorization rules for this model to restrict its access by the API depending on authorization methods. We are going to create models for our players and our game and connect these models together. In addition to that, we will create multiple lambda functions that will handle different parts in the game like starting a new game and playing a move and we will see how to trigger these functions using our API. We will also create the necessary GraphQL subscription to listen for changes for each game so that we can have a real time experience.

Section 9

After completing the API for the multiplayer game, here we will start building our UI. This includes listing games, paginating games, searching for players, starting a new game and handling updating the game in real time. When consuming our API, we will learn how to use amplify to generate typescript types for our queries, mutations and subscription for a great development experience.

Section 10

This section is entirely dedicated to sending push notifications with expo. Sending notification may seem simple; however there are a lot of stuff that need to be handled that we will discover in this section. Eventually we will be able to send a notification to a player when he is invited to a new game.

Section 11

This short section will show you how simple it is to add ads in your game using AdMob which is integrated in expo.

Section 12

In this final section we will discover how smooth building and publishing your app with expo is. We will build our apps for Android and iOS and publish the builds to the App and Play stores.

What You Will Learn!

• Learn About Typescript & What's its purpose.
• Learn About Expo & the Difference between Expo & Vanilla React Native.
• Install & Run an Expo Application on a Physical Device, Android Emulator & iOS Simulator.
• Learn How to Use Typescript with Expo.
• Integrate ESLint, Prettier & Husky for a Better Workflow.
• Using React Navigation Efficiently with Typescript Integration.
• Create a Single Player Tic Tac Toe Game.
• Implement the Minimax Algorithm to Create a Tic Tac Toe Bot with Different Difficulties (From Easy to Unbeatable).
• Use Sound Effects and Haptics Feedback in Our Game.
• Create Custom React Hooks for Code Re-usability.
• Create Simple Animations Using the Animated API
• Creating Persistent App Settings Using React Context & AsyncStorage.
• Learn About AWS Amplify & its Purpose.
• Use AWS Amplify & AWS Cognito to add Authentication to our App.
• Create a GraphQL API with AWS Amplify, AWS AppSync & AWS Lambda Functions.
• Create a Real Time Multiplayer Tic Tac Toe with the GraphQL API.
• Learn How to Send Push Notifications Using Expo & Lambda Functions.
• Monetize Your Game Using Google AdMob.
• Build & Publish your App to the iOS App Store & Google Play Store.

Who Should Attend!

• Students with Some React Native Knowledge that Would Like to Create a Full-stack Complicated Project.
• React Native Developers with little Typescript Experience Who Would Like to See How to Create a Big Project with Typescript & React Native.
• React Native Developers Interested in Learning About AWS Amplify & Integrating it With React Native.
• React Native Developers Interested in Creating a Full App with Expo Including Push Notifications, Building & Deployment.

TAKE THIS COURSE