Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/nguyenanhtuan1912/tuna-caro

This game looks similar "tic-tac-toe". But more O and X: more in the table and require more to win. Vietnamese students play this game when they feel bored.
https://github.com/nguyenanhtuan1912/tuna-caro

express game nodejs react socket-io typescript web-game

Last synced: about 20 hours ago
JSON representation

This game looks similar "tic-tac-toe". But more O and X: more in the table and require more to win. Vietnamese students play this game when they feel bored.

Awesome Lists containing this project

README 

        
# Caro game

I build a real-time caro game with React, Socket and Express.



## About

Let me talk something about this project.



## How do I think, plan to build this project?

You can check this note and diagrams & figures files:

- Google Doc: [Here](https://docs.google.com/document/d/1t97ggmJZdGxWqKn5pdjhlCQcqsk8jS1GhrGU0PThpiA/edit?usp=sharing).

- Figma: [Here](https://www.figma.com/file/sQYtpiUEPT3bMWFpUeUnJj/Caro-game?type=design&node-id=0%3A1&mode=design&t=AnYVyoOYRucekjQD-1).



### The idea

Follow [https://learnplaywin.net/caro/](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!



### Experience from the latest project

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.



### What I learned?

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),...



## How to play?

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.



## Objective

I build this web game to update my CV (Resume) for application. Learning something new about socket, backend development, React, project management.



## Try out

You can play game through the link is bound in the project introduction partition of this page or [here](https://tuna-caro.pages.dev).