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!

Ideation for Console-Poker

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:
Backend Repo:
Frontend Repo:

What are some things I was thinking about when I created this project?

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…).

Technologies Used:

  • 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

Now without further ado, here is a walkthrough of the application

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)

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.)

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.

And that’s it!

Last Thoughts:

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