Advanced React TypeScript Redux StyledComponents: Sudoku App

Name: Advanced React TypeScript Redux StyledComponents: Sudoku App
Rating: 4.0 (236 reviews)

Learn to apply best practices while building a mobile-friendly offline-capable React app with TypeScript and Redux

Created byBarry Michael Doyle

Last updated 1/2022

English

What you'll learn

How to build a Complete ReactJS Application
Structuring Code and Implementing Best Practices
TypeScript with ReactJS & Redux
React Hooks
Styled Components with Theme Implementation
Mobile Friendly Development
Offline Mode using Service Workers
Unit Testing Functions with Jest

Course content

6 sections • 47 lectures • 6h 15m total length

Introduction4:37
This lecture gives you the big picture of what we will try to build from scratch throughout the course. You will get a quick crash course on how Sudoku works if you don't already know and you'll see all the features that the finished application will have.
Win Conditions of Sudoku
Required Downloads for Setup0:29
This lecture provides students with download links to software required for the course.
Create React App10:46
After this lecture you should have a full react application built with npx and ready to start working with.
Resource Files0:33
Hey guys, so just in case you want stay in sync with the project where I am at. In some of the video lectures I've included a zip folder of the project files so you can keep up or start in the middle if you want.

I haven't included the zip file for every lecture, but there should be enough there to keep you in sync.

Bare in mind that those folders don't have the node_modules or build files included. You can get the node_modules back by installing them using the npm install command in your terminal (make sure it's run in the project directory). You'll need this for your app to run properly.

The build folder is generated when you run the npm run build command. This is not required for your project to run properly.

Happy Coding!
Scripts Explained5:49
After this video you should have a basic understanding of how to run scripts that are defined in the package.json file.
Create React App Scripts
VSCode Extensions4:37
After completing this video you should have the recommended VSCode Extensions installed and activated.

Those extensions are:
Material Icon Theme
Prettier - Code formatter
TSLint
vscode-styled-components
Prettier4:10
After this video you should have prettier configured to work with VSCode.
Structuring Codebase8:24
After this video you should have a fairly empty project. We'll work with this clean slate moving forward!

Adding Styled Components12:08
After this video you should have styled components installed and have global styles implemented in your project.
Using Themes9:40
After this video you should have a Theme Provider implemented in your project along with a theme file and type declarations to support your new theme file.
More Styled Components8:50
After this course you should have your Content and Title styled components developed and implemented.
Card Component3:02
At the end of this video you will have your styled Card component developed and implemented.
Grid Component11:14
After this video you will have an unstyled Grid component developed.
Grid Block Component8:27
After this video you will have an unstyled `GridBlock` component developed.
Styling Block Component6:06
After this video you should have your GridBock Component styled.
Grid Borders8:22
After this lecture you should have your Sudoku Grid fully styled with good looking borders developed and implemented.

Absolute Imports and Types11:11
After this video you should have started creating types and you should have absolute imports working in your project.
Shuffle Algorithm9:08
After this video you would have started working on the fill grid function and you would have developed a shuffle array helper function as well.
Unit Testing5:20
After this video you should have a basic understanding of unit testing as well as a unit test written for your shuffle function.
Check Values5:58
After this video you would have progressed more through the fillGrid function that we're building. This is probably as complicated as it gets. After this we'll split the function up into smaller pieces so that it's easier to work with!
Modularizing Check Values12:05
After this lecture you should have your check values sub functions split out into their own separate functions.
Testing Check Values11:59
After this video you should have tests for your newly modularized check values functions.
Identify Working Square15:26
After this video you should have a function for identifying the current square you are working with and have it unit tested as well.
Is In Square8:50
After this video you should have a helper function developed to determine if a value in your grid is already in a square at a specific point or not.
Check Grid9:14
At the end of this lecture you should have a developed check grid function to see if a grid is complete or not.
Testing Fill Grid7:49
After this video you'll finally have the fill grid function ready for use and tested.
Create Full Grid5:11
After this video you'll have a create full grid function developed and tested.

Install Redux DevTools0:13
Links to install Redux DevTools.
Setting Up Redux10:28
After this video you should have Redux setup and your Redux Devtools browser extension tested.
Creating Actions7:44
After this video you would have created your first Redux action.
Dispatch Create Grid8:34
After this video you would have dispatched your first Redux action.
Mapping Data5:05
After this lecture you should have your grid data in your Redux store mapped to the grid block components.
Selecting Blocks11:52
After this video you should have implemented block selecting functionality.
Key Bindings7:14
After this video you should be able to record keyboard presses and have those pressed mapped to an action.
Selecting Blocks With Keys8:25
After this lecture you should have key bindings implemented to select blocks in the grid.

Remove Numbers9:39
At the end of this lecture you will have started development with the remove numbers function. This function is a key one to making our Sudoku puzzle.
Copy Grid9:38
At the end of this video you should have the copy grid function developed and tested. This function will be used in multiple places in the app.
Solve Grid8:49
At the end of this video you should have your solve grid function developed.
Challenge Grid8:50
After this video you should have an unsolved ready to play Sudoku grid puzzle.
Fill Grid Redux11:43
After this video you will have the code in place to start filling the Sudoku grid using Redux.
Fill Grid Key Bindings9:27
After this video you should have key bindings implemented for filling your Sudoku grid.

Styled Button8:00
After this video you should have a styled button component create that will be used for the New Game button and number selection buttons.
Number Buttons9:34
After this lecture you will have developed and implemented the number buttons used to fill in the grid if you're not using a keyboard. This is particularly useful if you're playing the game on a touchscreen device like a phone or tablet.
Button Mapping6:03
After this video you button functions will be mapped to actual actions that will make them useful.
New Game6:19
At the end of this lecture you should have a new game button implemented so that the user can start a new game if they want.
Persist State10:48
After this lecture you should have persisted reducer state implemented so that the user doesn't lose their game progress upon refreshing or closing their browser.
Play The Game7:30
This is the final video of the course. After this you should have a playable Sudoku game in place all ready to go with all the features promised in the course description! Congrats :)

Requirements

Familiarity with ReactJS
Computer (Window, Mac or Linux)
Internet Connection

Description

IMPORTANT NOTICE

This course is relatively out of date and since it is part of the Udemy Business Collection I can't delist it before mid 2023. Please understand that by purchasing this course you might experience using out of date libraries or non backwards compatible changes when using newer versions of the libraries used in this course.

Are you a beginner React Developer looking to Level Up?

Would you like to learn how to build a fully functioning React application from Scratch?

In this course you'll learn how to make a Sudoku Application that's worth showing off to friends, family and potential employers. You will work with ReactJS, TypeScript, Redux, React Hooks, Styled Components, Jest, Service Workers and more!

Once you're finished you will have a fully functioning Mobile-Friendly Offline-Capable app that's built optimally with a clean, readable and well performing code base.

You will learn best practices along with seeing the methodology of building a full application piece by piece!

Don't stress if you don't know how to play Sudoku, it's quick to figure out and this course will explain it early on.

Disclaimer:

create-react-app has been updated since this course was first recorded so the service workers portion of this course has been removed if you start building a new app from scratch. However if you want to experience that part of this course you can start from the GitHub links provided instead of starting from scratch.

It is also worth noting that this is not for complete beginners! We do assume you have a basic working experience with React. If you're brand new to React, do some foundation learning before picking up this course. Most negative reviews for this course come from learners who didn't read this part of the course description.

Who this course is for:

Beginner ReactJS developers looking to Level Up!

Advanced React TypeScript Redux StyledComponents: Sudoku App

What you'll learn

Explore related topics

Course content

Introduction & Setup8 lectures • 39min

Styled Components8 lectures • 1hr 8min

Sudoku Grid Logic11 lectures • 1hr 42min

Redux8 lectures • 1hr

Making The Game6 lectures • 58min

Final Touches6 lectures • 48min

Requirements

Description

Who this course is for: