My recent side project

Introduction

Hello, hope you are doing well. Today I'll be telling you about my recent side project, mchess. The idea was to create a simplified chess website in the veins of lichess.org or chess.com for example. So the website should allow you to play chess offline locally and online against someone over the internet. I wanted to expand my knowledge on all fronts so I decided to create the whole thing myself, from the designs, to the frontend and the backend.

Inspiration

I have been a huge chess fan for a couple of years now and it has been by biggest hobby. I have spent countless hours playing the game and watching the best players play so its fair to say I had fallen in love with the game. Through that I thought hey wouldn't it be cool to create my own chess website, how hard could it be right?

The Project

Okay I know you didn't come here to read sappy stories about a side project no one uses, so lets get to the fun part, the tech behind the project. For the frontend, I chose to use ReactJS and just base CSS. I was thinking about maybe using a component library like MUI or Ant design but I decided against it I thought the time investment of learning that library wasn't worth it because css modules do the job as fine. A huge decision in the frontend was whether to use a chess library or not. Although using a chess library was a much more enticing option, I knew from the inception of the project that I would be doing all the chess logic myself because I wanted to see how hard it could be. Turns out chess is a very complicated game to code due to the huge amount of rules that exist. In the end I was quite proud that I was able to code the entire app logic without an incredible amount of hassle and in a specified time frame.
While I would say that the majority of the work of the app was done in the frontend due to the nature of the project, there was quite a bit of work to do in the backend as well. For the backend I chose to use FastAPI. I love python, it is my favorite programming language after all, and I kept hearing about how great FastAPI is so I decided hey what better way to learn it than use it in the project. Looking at it now, FastAPI was a fantastic choice, it is by far the best developer experience I have had creating API's. Automatic data validation, automatic api documentation, dependency injection, all these things were things I had never used before and once you've seen the light there's no coming back. For the most part, the backend code was fairly standard, user authentication, database models and the whole shebang. The part that I struggled with, and spent quite a bit of time on was the websocket handling. I've used websockets before, but I used socketio and it just abstracted a lot away, so I never really had to think about how I would manage connections. Handling players leaving their game, spectators, sending moves and other actions I needed for the chess game was harder than I thought it would be. I still don't think that the class I wrote is the most elegant piece of code you'll ever see and I can definitely see how you can improve it, but it works and it isn't the worst out there.

Lessons

I always would like to think that every side project gives you a lesson or two, and this side project was no different.
One of the most important things I've learned is to consciously reduce code coupling from the start of the project. In this project, in the start there was so much code coupling between displaying the board(React part) with the chess logic. It made it extremely hard as I progressed with the app to add new features and add things due to the extreme coupling of the two elements. Its definitely not something I understand how to do well even now after the project, but I'll definitely read up on this issue so I can better architect my projects in the future.
Another thing I found out in this project is how great FastAPI is. I've decided from now on, if I'm creating a web app I'm definitely going to FastAPI for the backend, the experience is unmatched. And bonus is that it's much faster than both django and flask.

Conclusion

Hey if you stuck through this whole read, thank you. Sorry about my long rants in the middle. If you'd like to see the code for the project, you can find it here.