Blackjack

I. THE TASK

During my Advanced App Development Class, my professor tasked the us with a final project to create an application with the tools that we had learned (multi-threading, HTTP requests, sockets, REST API’s). And the top 3 projects would receive an A in the class.

I decided to create a multiplayer online Blackjack server.

II. THE IDEA

My goal was to design and develop a website that users could play Blackjack on that also kept track of their wins/losses, and cash balance. This was more of a development project than a design project.

Designed By: Julian Chan
Developed By: Julian Chan

Tools Used:
Adobe XD (UI/UX)
HTML, CSS, JavaScript, Bootstrap, jQuery (Front End)
Java w/ Springboot (Back End)
MySQL (Database)

Profile Page

III. THE APP

I also wanted my app to be as close to industry standard as possible to simulate real world application development.

Overview:
- REST API Server
- Hashed passwords during user authentication/registration
- Prepared MySQL statements to defend against SQL injection
- Generating random tokens for clients stored in a cookie to defend against server breaches
- Ensuring random token matches assigned user whenever a call to the server is made
- Implement Wait Token to prevent players from making moves out of turn

Working App (Single Player)
Blackjack Game Logic
(HTTP Requests + SQL)
Blackjack User Logic
(HTTP Requests + SQL)

IV. THE IMPROVEMENTS

After creating this app, I had some time left before the project was due and decided to take it up a notch. I wanted players on my server to be able to play with each other in real-time. The goal was to make it as if you were playing with your friends at a real casino blackjack table.

PROBLEM

This proved to be a lot harder than I thought and required a complete redesign of my original code. In my original app, clients had to send HTTP requests to the server for anything to happen on the client side. This meant that the client (web browser) had to send data to the server in order for the game to actually take place. However, if I wanted to have players play with each other at the same table, I needed a way for the server to send data to the client without the client actually making a request to the server.

Code Snippet (HTTP Requests)

SOLUTION (SOCKETS)

To remedy this issue, I redesigned my entire code and implemented sockets (socketIO). This way I was able to send data from the server to all the clients without anyone actually making a request.

Code Snippet (Sockets)

V. THE FINAL PRODUCT

The final app is able to support multiple players at the same table. Players can play Blackjack together in real time. This means being able to see each other’s cards, seeing the same dealers cards/moves, and not being able to make any moves out of turn.

*Note: Did not have enough time to code the ability for players to see each other's bets/chips. However, the logic would be similar to the code allowing players to see the same cards on the table (socket implementation).