React Native: Create an Unbeatable & Multiplayer Tic-Tac-Toe
What you'll 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.
- 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.
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:
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.
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.
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.
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.
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.
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.
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.
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.
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.
This short section will show you how simple it is to add ads in your game using AdMob which is integrated in expo.
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.
Hey there! I am Ali Alaa, a front-end web developer. Years ago I discovered my interest in web development, especially the front-end side. I started exploring the field from HTML/CSS/JS to WordPress theming and JS frameworks. I have been working as a front-end developer for about 7 years. After all these years, I decided to start creating on udemy and share my knowledge with you.