A couple of weekends ago, my wife and I wanted to play Codenames with some friends over Zoom. The day before I thought it would be a fun hackathon project to make an online version using create-react-app and Firebase. The game is hosted at https://codysnames.com. The first version came out after ~12 hours of plugging away and it worked... in that we got through 3 games successfully without any bugs popping up :). I've since put a lot more hours into this project over the last week and it's been quite fun! You can have a look at the source code here https://github.com/meenie/codysnames. If anyone is interested in contributing, please be my guest! The design is very basic and functional. If you have ideas on how to improve it, that would be amazing as well. The application was built using the following technologies:
- React using
create-react-app - Firebase using Firestore
- TypeScript
- Material-UI
react-reduxredux-sagaimmerlodash
As a developer, I'm very thankful for all of the wonderful opensource software we have at our fingertips. There is no way I could have put something like this together in such a short amount of time without the hundreds of thousands of hours people have put into the above libraries.
One of the best tips I can provide to a software engineer at pretty much any stage of their career is that you need to dive in a get lost in some code every once in a while. Especially if you need/want to learn a new framework or library. One of my teams at work is using redux-saga quite heavily and I wanted to learn it myself, so I incorporated it into this project. You can see the PR to switch from plain react-redux to using redux-saga here https://github.com/meenie/codysnames/pull/1/files. A number of years ago, a friend showed me the Web Audio API in the browser and I used my music background to create a library called Band.js. You are able to use it to make songs like this: http://plnkr.co/edit/LG20SL?p=preview&preview.
Thanks for checking out my latest project!
Top comments (1)
I forgot to mention that to generate a truly random (well, as much as possible) set of cards, I'm querying the random.org API to generate 100 random numbers and then grabbing 25 unique numbers from that list to use as the index number of the list of words in the dictionary. You can see that code here: github.com/meenie/codysnames/blob/...