Checkers

Try it here back-end repo here

This is a multi-player checkers and chat app I built to test out socket-io.

About

This is a checkers and chat app I build to further my understanding of React and web-development. It is a work in progress and was my first attempt at implementing websockets for client server communication.

Tech

• Frontend: React with Hooks and Context Api
• Styling: styled components
• Websocket management: Socket.io
• Backend: Express
• Testing: in-progress

---

Things Working

• Game Logic Ran into a few issues with stale state that I resolved with Refs. I am hoping once I intergrate Redux into the project this will resolve the stale state problems and I can remove the Refs.

• Styling I was inspired by this project, which took all its styles from the Mac OS UI. This was my first attempt at creating my own custom styles without the help of Bootstrap or MaterialUI. This was also my first pass at using Styled Components. I would like to go back and create a Theme for the styling and then also adjust the styling for more of a light mode.

• Socket connection Managed to get just the basics working enough to allow users to chat and play the game. There is much room for improvement. I need to look into setting up separate rooms for each game instance and only allow two clients to join a game.

Todo

All the things I would Like to add to this project.

• Add Redux to manage state.
• Add a Game status bar to show current game stats.
• Improve backend to use socket-io rooms for each instance of a game.
• Create a Game lobby that shows stats for users online and allows messaging.
• Create a unique PIN ID for each game so users can better match up with known friends
• Add Notifications for exiting game and errors.
• Add a exit game and return to lobby feature.
• Allow draw logic to game.
• Write in logic for double jumps.
• Create a basic AI that users can play against.

Support

Reach out to me if you have any questions

• Email at nickprender@gmail.com

Thanks for taking a Look!