Image for post
Image for post
Console-Poker: A Web Application

Console-Poker: Chatting and Poker Application using React/Rails

This week, I want to share the project I’ve been working on for the last month! It’s still a work in progress, but I think the application is at a presentable stage where I can share it.
Note: The UI needs a lot of work and any UI engineers that are interested are welcomed to reach out!

Console-Poker is my most recent project that I’m very proud of. I built this project because my friends and I enjoy playing poker when we hang out, and what better time to create a virtual game then now during COVID! I knew there are many poker games out there so I wanted to create my own take by creating a UI where players play poker using a terminal, similar to how coders execute commands in a terminal — I personally find working with a terminal very appealing, and I think with the popularity of coding/coders in media like Mr. Robot and Silicon Valley, even non-coders find terminals very fascinating as well.

Note: Later on in my project implementation, after receiving feedback from people, I decided to remove the terminal because it made the game less accessible. Playing poker using a terminal (compared to using a graphic UI with buttons for example) was more difficult. Users had to read through a bunch of console messages to determine the state of the game. The terminal also seemed inconsistent with the (NES.CSS) style of the rest of the website.

Deployed Website: https://console-poker.herokuapp.com/
Backend Repo: https://github.com/atribecalledarty/console-poker-api
Frontend Repo: https://github.com/atribecalledarty/console-poker-frontend

1. I knew I wanted a bank feature where users deposit funds into their accounts because the best part about playing Poker is playing with real money. This depositing and withdrawing feature I implemented using Stripe!

2. Another thing I wanted is to have a specific look for my project. Since the terminal was going to be central to playing the game, I wanted the style or theme to feel retro. I found this style sheet called Nes.css with 8-bit styling, which I thought would be a great look to the app.

3. Finally, I wanted interacting/chatting to be central to the application. I felt like many online poker sites minimalize the social aspect of playing poker — the chat boxes are usually tiny boxes with plain text in the corner of the screen. When I’m playing poker with my friends, part of the fun is being able to talk and banter with each other. Therefore for my application, I wanted the chatting aspect of the game to be of greater importance. To achieve this, I set out for my chatting UI to be bigger, and also more interesting to look at (messages are decorated within a themed chatbox and encapsulated within bubbles — edit: took out the bubble styling…).

  • Rails for Backend API
  • React JS for Frontend, State Management Redux
  • Deployed using Heroku (PostgreSQL DB)
  • Authentication using JWT/Bcrypt, Google authentication using Omniauth + React Google Login package
  • Real-time data transfer (Poker & Chatting) using Rails ActionCable
  • USD transactions (withdrawals and deposits) using Stripe and Stripe Connect
  • 8-bit CSS styling from NES stylesheet
  1. Sign in / Register
    Sign in to an existing account, or register a new account! Users can also sign in using a registered Google account.
    Test user: (fudge@gmail.com, 123456)
Image for post
Image for post
Image for post
Image for post

2. Deposit Money
Navigate to the ‘Bank’ and buy chips with USD using a Credit/Debit card. 1 USD = 10000 Chips.
Test card: (4242 4242 4242 4242, Any Name, Any Future Exp Date, Any Zip Code)

Image for post
Image for post

3. Join a Room and Play
Go back to the Rooms page, join or create a new room with your friends, and start playing Poker. You can have fun chatting as well! (In order to start a game of Poker, two users need to be in a room and they must have enough chips. Users testing can join Marley’s room. Marley will call every action because he is a good doge.)

Image for post
Image for post
Image for post
Image for post
Image for post
Image for post

4. Withdraw your Winnings!
Once you and your friends are done playing, navigate back to the Bank, and click withdraw. First-time users need to create and connect a Stripe Connect account (using either a bank account or credit/debit card — can use test information by clicking use test data). Once connected, exchange and withdraw your available chips into the connected account.

Image for post
Image for post
Image for post
Image for post

And that’s it!

There’s still a lot of work to be done with the project. I was very rushed for time as I wanted to be done by a specific date so that I can show this application to employers during my job search. I definitely need to go back and organize a bunch of my code. There is a lot of repetitive code, inefficient methods, and also some inconsistent patterns that I need to clean up.

Next, the UI needs a bit of work. I’m not too good nor very inclined (:P) at designing the look of applications and hopefully, I can find someone to help with that part of the project. I think most of the website looks good enough, but the actual game component looks very unfinished.

All in all, I’m proud of everything I learned to create this project. There were a lot of things I needed to learn to implement many technical components like real-time data transfers for example. I hope other people will find this somewhat inspiring and create cool applications as well!

Thanks for reading! Feel free to reach out for any questions or if you want to work on the UI.

Flatiron School Graduate, React.js, NodeJS, Ruby on Rails Developer, Learning Enthusiast

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store