Stakes And Games

Just a game of Tic-Tac-Toe, but this time the stakes are high!

Comment

Inspiration

We all have played a game of Tic-Tac-Toe at some point in our lives. Maybe some of us even have a regular game with our friends. If you were anything like me, you might have also bet some petty thing on a game of Tic-Tac-Toe.

I thought why not convert this whole thing into a thrilling online experience, where we have a game room of two players where they can chat (Trash Talk 😏), have fun and of course bet something from Amazon on a game of Tic-Tac-Toe.

What it does

Create an unique game room for you and your opponent or join an existing room by entering your name, email and the Amazon URL for the product you are want. The web app will then scrape the Amazon website for the product details, redirect to the game room with an awesome user interface where the players can chat and play the game. On ending the game, a mail is sent with the Amazon URL to purchase the item.

How we built it

Thinking about the structure for the website, I realized that the logical design of the website would take more time than actually coding it.

  • Taking the help of documentation and various articles, I first built the user flow for the game room as it was the most challenging aspect for the project.
  • After the game room was developed, I added features such as chat, emitting game states and updating states by listening to the web socket.
  • Scraping Amazon website is done using a small script which I built using 'Puppeteer' by sending a post request to the backend.
  • Sending of Email after ending the game is done using Twilio.
  • Primary technologies used are React, Nodejs and Socket.io
  • Fun Fact: Tailwind CSS is cool but nothing beats pure CSS.

Challenges we ran into

I had used Socket.io for building small stuff but never for an application of this scale. Creating the game room was quite a challenge. Understanding and implementing the user flow of the game itself took a lot of time. Learning how to scrape Amazon website was also a challenge.

Overcoming these challenges involved going through boring documentations, lots of articles, blogs and stack overflow searches and many YouTube videos. 😵

Also, attempting to build this in a 48 hour hackathon resulted in lack of sleep and back pain 😭

Accomplishments that we're proud of

  • Successfully making the logic to create unique game rooms.
  • Implementing the game logic.
  • Scraping Amazon for product details.
  • Successfully sending an email after the completion of the game.

What we learned

  • socket.io for bidirectional communication of a game.
  • Puppeteer for scraping websites.
  • Twilio for sending emails.

What's next for Tic-Tac-Get

Adding more levels to make it more challenging 🔥.

Built With

Share this project:

Updates