Connect Four game using React, TypeScript, and MUI

This was definitely the challenge that gave me the toughest test so far and I tried to get this close to near perfect as possible according to the Figma diagrams. I implemented all the bonus features that were required including a CPU that I have a ranking system used to determine where it should place the chip. To do the sliding animation I used MUI (Material UI) library and the Slide component which takes care of all the dirty work for animation. No need for CSS keyframes thank god so I highly recommend working with a UI library to save much time! Much of the work involved animating the SVG graphics and it was one of my first experiences working with SVG. The huge advantage of this was not having to worry about responsiveness as it scaled perfectly.

Not sure how I would do this without TypeScript. It was a big time savior for me and so important when working with React.

The main challenging part for this app is to build the CPU AI and have it reasonably smart. I came up with a ranking system to determine which of the 7 columns to place it's chip. There are many approaches to this but I found one that worked for me. I put a link in my GitHub readme on a good algorithm online as a starting point in which I implemented a much more advanced approach to his version.

The CPU I think I made moderately challenging. I wasn't able to win often against my own AI as I always lost more than I won but then again I just suck at the game :D. Hope you do better than I do and good luck!

If any improvements to the CPU are to be made please let me know.