Connect-4 or connect n application using React JS. State management using Context API. Row, column and connect customizable connect board.
00:00 - Introduction
00:36 - Connect N application demo
02:28 - Create React JS skeleton project using Vite
03:15 - Build and run the React JS skeleton project
04:27 - Cleanup the skeleton project
05:45 - Create Styled component elements
06:31 - Create Cell component
08:14 - Create Row component
08:36 - Create Board component
09:40 - Create context API - state management
16:24 - Use context in the components
19:49 - Drop coin logic
26:46 - Game winner conditions
29:44 - Check vertical condition
31:34 - Check horizontal condition
32:22 - Check Diagonal bottom left to top right condition
35:01 - Check Diagonal top left to bottom right condition
36:37 - Use the game conditions in the component
37:35 - Create Header component
40:50 - Connect 4 demo
42:15 - Create panel to customize row, column and connect
48:10 - Connect N application demo
GitHub repo link -
github.com/JayaramachandranAu...