I build a real-time caro game with React, Socket and Express.
Let me talk something about this project.
You can check this note and diagrams & figures files:
Follow https://learnplaywin.net/caro/:
Cờ ca rô (the Vietnamese name) is a a board game based on the popular Japanese strategy board game called Gomoku. It is also known in other versions as Five in a Row or Gobang. The game is played on a 15 x 15 grid or sometimes on a 19 x 19 grid, depending on the version. Caro is somewhat similar to Tic Tac Toe except that the former requires the player to be able to create an unbroken row of five symbols whereas Tic Tac Toe is played on a 3 x 3 grid and only requires the player to create an unbroken row of three symbols to win.
Caro Game is a web game that I planned for more than a year, it is on 10/2022 at this time. The idea at this time is a basic tic-tac-toe web game with support for online playing, but the idea was interrupted because I had other team projects to do. On 10/10/2023, I actually had free time to continuously build the idea of a tic-tac-toe game, but I had a better idea at this time that I would build a caro game instead of a tic-tac-toe game. The entire game is a system with two applications: client applications and server applications. The client application was built with React and Typescript, and the server application was built with ExpressJS, NodeJS, and Typescript. I use Socket.IO in both of them to implement websockets. After development and idea building by myself, I completed the Caro game.
So I want to make my own caro game with React, Express and SocketIO and learn from it as the same time!
I have learned some experiences from the latest project (this is a team project) such as hook, hocs, composite component, utils, code structure, so I want to apply something new on this project. A new working process about Application Development, I have to plan, write down the idea, draw diagram, visualize examples.
I have more experience in Front End Development, especially React Development and implement Websocket into React Application with Socket.IO. Furthermore, I successfully tested the structure of codebase of Back End Application as well as use Socket.IO to implement Websocket in server-side.
And something I have to improve after this project such as planning, code-cleaning, problem solving (slice to smaller parts, for example),...
Caro game look like tic-tac-toe but bigger. If you want to win the game, you must have 5 in a row or in a column or in a diagonal. You can play in "2 players mode" or "online mode", that's all.
I build this web game to update my CV (Resume) for application. Learning something new about socket, backend development, React, project management.
You can play game through the link is bound in the project introduction partition of this page or here.