The making of I’m Bored
And my first experience making a React web application

I’m Bored is a website in which you can easily and conveniently play multiple retro-style games. The website is meant for anyone that has some free time and would like to spend it by playing well-known games. We want everyone to have easy access to these games by just going to a website and playing, no ads, no need to log in and you don’t have to download anything. My team-mate Tim Assavarat and I made I’m Bored as a full Front-End React application, every game was coded in Javascript using React.
I’m Bored was a three-week project, the first week involved learning React and finishing our tic tac toe game. On the second week, we deployed and started on snake. Most of the work was done together but since we had a deadline to meet, on the third week, I did the styling and design of the webpage while my partner finished up coding snake.
Why?
We all know online gaming websites, as for me I remember playing some when I was a kid. Even in elementary school if we had free time and behaved properly, the teacher would give us some time to play in the old computers. The idea was to recreate that same concept but making it more user-friendly by having no user authentication, no need to download anything, no ads, and a neat interface.
Architecture and file structure
The following image shows the architecture of our web app. This pretty much follows how a single-paged React application structure looks like.

For now, our application is entirely Front-End, we are currently not storing any user information, every game session works individually. To develop our application we coded all the games in Javascript, using React. We chose this because we wanted to take upon the challenge of learning something new in a limited amount of time, it is a very popular tool among the web development community, and also because it fitted well with what our idea was for this project. We used HTML for markdown, Vanilla CSS for style, and deployed with Heroku.
Main Features
I’m Bored main features include our home page and two games:
- Home page: In here we display our selection of games, the title of our page acts as a button to the home page, and we have a made by section at the bottom of the page.

- Tic Tac Toe: A tic tac toe game made with React classes that work with a single player against a computer. For the computer to make its move, we make a request to the Tic Tac Toe API by sending the state of the grid in string format and then using the returned value as a move. We also have a score tracker for the current game session.

- Snake: A snake game made with React hooks and functions in which the goal is to eat as many of the food as possible without hitting the edges or the snake’s tail. We have a point tracker of all the times the snake eats the food. We use an effective random function to generate the food in the grid and also take care of some of the game’s features.

The biggest challenge 🐍
Once we had our home page and the tic tac toe game done, we began coding out the snake game. We first started coding it without using React and testing it in our terminal. We then decided it was time to try to implement it using React, and that’s where all the problems started. Our goal was to use what we had coded as a base and sort of ‘translate it’ with React. It turned out to be way more difficult than we had expected and ended up re-writing our code completely.
Unlike tic tac toe, in which we used class components, to code snake, we decided to use function components. We wanted to try the newer and better method of managing an object’s state by using React hooks. Making each feature of this game was a challenge and took an unexpected amount of time. These include displaying the grid on our webpage, making the snake move, writing the random function and making the snake’s tail follow its head. We were able to get through those challenges by working step-by-step, coding an effective random function, knowing when to use different hooks, understanding the flow of our code and knowing which objects needed to be updated and which didn’t.
What I learned
Throughout the making of this project, I’ve come to realize the importance of having a well-planned architecture for your code. Having a good architecture prevents having to rewrite or make significant changes to your code. If we had spent more time structuring the flow of our code, we might not have had to re-write our snake game’s logic so much. Also, we decided to use class components when coding out the tic tac toe game because that was a good way to start with React. But we would like to have done it with hooks and functions as we did when trying them out for the first time in snake.

I think React has the right to be so popular, it is useful and lets you code in a dynamic way. React has a component structure and each component lets you return a react element which can end up being multiple features of a web app. I really enjoyed coding with React and sharpening my Javascript skills, I look forward to creating more web apps and becoming part of the web dev community.
About me
I’m a Holberton School student and aspiring full-stack web developer. Here are the links to I’m Bored, its Github, and my Linkedin profile.
