Connect four game with React

Community feedback

• 

  j0sephh123•140

  @j0sephh123Posted about 2 years ago

  First, good job. There is a ton more stuff that can be discussed, but it would take a lot more time, the application is huge :)

  I have started this challenge, but dunno if or when I'm going to finish it, because I underestimated it and thought would finish it more quickly. Seeing it finished, althought with extra stuff, only makes me realize how big it actually is.

  I will mostly open points for discussion, since this is not code review, just commenting on various things. Will use points, so it would be easier if you decide to comment on these.

  1. What is the reason for using create-react-app, since it is a bit legacy. Is it because it has testing pre-configured and you don't have to do it manually or there is another reason.
  2. I see that you are using react-router. Are there any particular benefits that I'm missing here, because it seems that it is bringing additional complexity to the application. Could you explain what.
  3. I see that styled components have theme, which you can use for global variables instead of using css var(). Any reason for that?
  4. Haven't had the need to use animation library for react. What is the reasoning for using it? Have you used other libraries and decided to choose this or just picked that and stuck with it ?
  5. Could you explain why are you using a web worked in this case.
  6. There are parts that would be good to be refined for example using

  {windowWidth > 760 ? ..
  

  For example for the following statement, you could extract 760 into a global variable, assign the statement into a variable also, since it is used twice in src/components/game/board/Board.tsx Again, for the same component as far as I know React.FC is not necessary when the component doesn't receive props. 7. src/components/game/controlGrid/ControlGrid.tsx - here you are comparing to variables ('p2','CPUvP'), these can easily be enums that can be re-used across the application. 8. Typescript - I suggest that you use CapitalCase for types. Also the types can be refined by using union types and enums.

  2
• 

  André-Lubin Thomas•330

  @LordynerPosted almost 2 years ago

  Amazing job, I love all your animations that's really impressive. I found a bug when playing against CPU (difficulty level :easy), when you've won the first game, the CPU is supposed to start but it doesn't, and you have to wait the 30seconds for your turn to start.

  0