Wordle Suite

Wordle Suite Homepage

Inspiration 💡

Wordle Suite takes its inspiration from the recently viral online game by the name Wordle and the constantly increasing connectiveness of our daily lives, especially the way modern social gaming websites are set up. Specifically, Facebook and the way its Facebook Gaming website works.

What it does 🤖

Wordle Suite acts as a wrapper for the base game, adding social and game functionality to it. This includes multiple dynamically generated hints, account-based win/loss stat tracking, and a friends leaderboard. By logging in on the website, you are no longer playing a word game by yourself, you are directly competing with your friends and anyone you have added on the site.

How we built it 👷‍♂️

Since Wordle Suite is a frontend and backend project, I knew planning was going to be crucial for me to succeed. Before coding anything, or even making the GitHub Repo, I sat down to think about how each piece of the program would work and communicate with the other pieces. Once I had my plan I began to slowly work from the bottom up. The first step was creating the website frontend. The website is an HTML file with CSS styling and JS scripts that hosts the actual Wordle game inside of an iFrame. Once I was happy with the look of my webpage I moved onto figuring out how to host it as a server that can be accessed from anywhere in the world. My solution to this was using Go and Heroku to run and host a file directory containing the code of my website. With this complete, my site could be accessed from wherever, but it didn't actually do anything yet. My next step was creating API endpoints that my frontend could communicate with, that is, create account, log in, update player win count, add friends, get friends list, etc. I did this with HTTP handlers that handled data sent to "mysite.com/signup" or "mysite.com/login." Once my server received a request for information or a request to write information, it would read from the Firestore database, get what values it needed, and change any values if needed. Making these API endpoints functional was the final step of the project.

Challenges we ran into 😡

Even though I had to learn several new frameworks/systems in order to complete this project, the most difficult and ever-present challenge I had the misfortune of running into was issues involving Cross-Origin Resource Sharing (CORS). Basically, accessing/changing information from/on a website that is on a different domain than the website itself is. The first time I had this issue was in trying to get the Wordle game itself onto my web page. I was able to easily make an iFrame HTML element and embed the site, however the embed acted completely isolated from my website. That is, I could not access information about the game, number of guesses made by the player, or the word solution, for example. I overcame this issue by making a copy of the Wordle website and hosting it myself in a sub-directory of my website. The second time I faced major issues with CORS was in trying to host my site on Google Cloud App Engine. Near the end of the 36 hours I looked into properly hosting my website, but after hours of trying, I could not get my code to run properly and not get CORS issues. My website was trying to communicate with itself, but was being blocked for some reason I still don't understand.

Accomplishments that we're proud of 😏

The accomplishment I am most proud of is the functionality of my app. When I first started planning the project and I had many ideas that I wanted to implement, the most important ones being hints and friends leaderboards. To me, seeing those done meant that I actually finished what I set out to do. I'm very happy with myself in the way that I was able to make those work as well as they do within the ~20 hours I spent coding.

What we learned 🧠

Over the course of this project I had to learn several things to make it work properly. The first and most important of those is Google Firebase/Firestore. Firestore is a document-based database, which I have some experience with, but not in the way that Google does it. I read over docs and watched videos for nearly two hours before I ironed out all the bugs related to using it and had it functioning properly. Once I hit that point it worked great. I plan on using Firestore in the future. The second thing I learned is how little I actually know about web development. Going back to the CORS issues I was facing, I'm sure a more competent web developer could easy skirt around them and continue his work. I, unfortunately, do not have that luxury. If I continue to create projects like this involving websites communicating to servers I own, I will become much more knowledgeable in this area and will eventually be able to create projects that I currently consider to be complex, with ease.

What's next for Wordle Suite 🔜

Since Wordle Suite is a social game, it requires users to grow. I could advertise it to friends and family after ironing out the last of its bugs and adding more functionality I want and it's possible that it could become just as viral as the original game itself. In terms of actual features, I need to add account session cookies and handling for it. As it stands, users have to log in every time they access the page because their login information isn't stored anywhere. Given more time and a long nap, I'm sure I could get it done.

Note: The site is live on the heroku link below. Feel free to give it a try.