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.
Who this course is for:

    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.

Requirements

    JavaScript (ESNext) Knowledge is Required.
    Typescript Basics Knowledge is Preferred.
    React Knowledge is Required.
    At Least Some React Native Basic Knowledge is Required (I Will not Discuss React Native Basics like Views and Styles).
    GraphQL Basic Knowledge is Required (When we use GraphQL, I will put you links to quick free material that you can watch/read).
    Some AWS (Amazon Web Services) Knowledge is not Required But Will be Helpful.
    A macOS Device is Required BUT Only if You would like to Use the iOS Simulator & Publish the App to the App Store.
    An AWS Account is Required for the Multiplayer Part. You have to Enter Credit Card Information to Create an Account. You Will Probably Not Be Charged Just By Following this Course as You Get a Monthly Free Usage.
    Apple Developer Account is Required ($99/Year) if You Would Like to Publish the App on the Apple App Store.
    Google Developer Account is Required ($25) if You Would Like to Publish the App on the Google Play Store.

Last Updated 4/2021