Ball Sort Puzzle Using Reactjs Step-By-Step

Learn ReactJS, state management, animations, and PWA features by building a full puzzle game.

What you'll learn

Build a full Ball Sort Puzzle game using ReactJS.

Manage complex game state with hooks and custom logic.

Animate ball movements and user interactions.

Implement undo actions, hidden balls, and level logic.

Create and store levels dynamically with localStorage.

Deploy the game as a Progressive Web App using Vercel.

Requirements

Basic knowledge of ReactJS and its component structure.

Familiarity with JavaScript ES6+ syntax and features.

Understanding of basic CSS for layout and styling.

No prior experience with service workers or PWAs is required.

Description

Welcome to Build Ball Sort Puzzle with ReactJS from Scratch! In this project-based course, you will learn how to create a fully functional and interactive puzzle game using modern React techniques.Whether you're a beginner looking to strengthen your frontend development skills or an experienced developer seeking a fun and practical project, this course will guide you step-by-step—from setting up the project to deploying it as a Progressive Web App (PWA).You will:Learn how to build dynamic components with ReactManage complex game logic and state using React hooksAnimate UI interactions and ball movements smoothlyCreate reusable components like tubes, balls, and headersImplement undo, level progression, and special game rulesStore and retrieve game data using local storageSet up routing with react-router-domConvert your project into a PWA using WorkboxDeploy your game using VercelThis course is designed to be hands-on and modular, with short, focused videos that help you understand each part of the development process clearly. You'll work directly in code, gradually building up all the functionality the game needs.You'll also gain experience with animations, custom hooks, local storage strategies, and deployment workflows used in real-world applications. Throughout the course, you'll be encouraged to experiment, customize, and apply what you learn to your own projects.Get ready to level up your skills while building something fun and shareable.

Overview

Section 1: Introducción

Lecture 1 Introduction

Lecture 2 Welcome to the course!

Lecture 3 Project Setup and Resize

Section 2: Header & Game Wrapper

Lecture 4 Header Component - Part 2

Lecture 5 Game Wrapper and Header - Part 1

Section 3: Core Components: Balls and Tubes

Lecture 6 Ball Component

Lecture 7 Tube Component - Part 1

Lecture 8 Tube Component - Part 2

Section 4: Game State Management

Lecture 9 Game State Setup

Lecture 10 Ball State

Lecture 11 Tube State

Lecture 12 Distribution State - Part 1

Lecture 13 Distribution State - Part 2

Section 5: Rendering & Positioning

Lecture 14 Render Tubes and Get Position

Lecture 15 Set Ball Positions

Lecture 16 Render Balls

Section 6: Tube Selection Logic

Lecture 17 Tube Selection - Part 1

Lecture 18 Tube Selection - Part 2: Origin Tube

Lecture 19 Tube Selection - Part 3: Destination Tube

Section 7: Ball Movement & Animation

Lecture 20 Move Ball - Part 1

Lecture 21 Move Ball - Part 2

Lecture 22 Move Ball - Part 3

Lecture 23 Animate Move Ball - Part 1

Lecture 24 Animate Move Ball - Part 2

Lecture 25 Animate Move Ball - Part 3

Section 8: Game Logic: Completion & Challenges

Lecture 26 Level Completed - Part 1

Lecture 27 Level Completed - Part 2

Lecture 28 Incognito Ball

Section 9: Undo Feature

Lecture 29 Undo Option - Part 1

Lecture 30 Undo Option - Part 2

Lecture 31 Undo Option - Part 3

Section 10: Tube Management - Routing and Pages

Lecture 32 Add Tube Option

Lecture 33 Configure Router

Section 11: Level Creation

Lecture 34 Level Creation - Part 1

Lecture 35 Level Creation - Part 2

Lecture 36 Level Creation - Part 3

Lecture 37 Level Creation - Part 4

Lecture 38 Level Creation - Part 5

Lecture 39 Level Creation - Part 6

Lecture 40 Level Creation - Part 7

Section 12: Saving Game Data

Lecture 41 Save Level

Lecture 42 Restart and Next Level

Section 13: App Pages

Lecture 43 Lobby Page - Part 1

Lecture 44 Lobby Page - Part 2

Lecture 45 About Page

Section 14: Progressive Web App (PWA)

Lecture 46 PWA Manifest and Service Worker - Part 1

Lecture 47 PWA Manifest and Service Worker - Part 2

Section 15: Deployment

Lecture 48 Deploy

Lecture 49 Thanks for Completing the Course!

Developers who want to build a full game from scratch using ReactJS.,ReactJS learners looking for a fun, hands-on project to strengthen their skills.,JavaScript developers interested in applying their knowledge to interactive applications.,Web developers curious about integrating game logic, animations, and state management.