Blackjack Game using MEAN Stack

This is a project to get a thorough understanding of MEAN Stack technologies (MongoDB, Express, Node JS, Angular). This will give you a step-by-step process to create a blackjack game from scratch. This article will discuss Starting a new game, the logic to play it and store it in the database. It will also help you to understand the CRUD operations.

Output Preview: Let us have a look at how the final output will look like.

👁 preview1

Prerequisites:

• Angular
• NodeJS
• Express
• MongoDB
• MEAN Stack

Approach to create Blackjack Game using MEAN Stack:

Backend:

• Set up a new node.js project
• Create server.js file to setup the server using express.
• Create an instance of app and use cors package as a middleware.
• Create routes folder and setup routes for servicing API requests.
• Set up mongo DB locally and create a method to connect to the database in server.js file.
• Create a database and a collection to store and retrieve the game related data.
• Implement the core logic of game for example - dealing cards, hit action, stand action, calculate scores and determine the winner
• Test your API using tools like postman.

Frontend:

• Create a new Angular project.
• Create various components for game for different functionalities and define HTML and CSS files for all of them.
• Create a service to set up communication between backend API endpoints and Angular HttpClient.
• Update the user interface based on the state of game given by backend.
• Test your frontend application in browser.

Steps to create the project:

Step 1: Create the main folder for the project using the following command.

mkdir black-jack

Step 2: Initialize the node.js project.

npm init -y

Step 3: Install the required dependencies

npm install express cors mongoose

The updated Dependencies in package.json file of backend will look like:

"dependencies": {
 "body-parser": "^1.20.2",
 "cors": "^2.8.5",
 "express": "^4.18.3",
 "mongoose": "^8.2.1"
 }

Project Structure(Backend):

👁 Screenshot-2024-03-12-042848

Example: Create the required files as seen on the folder structure and add the following codes.

To start the backend run the following command.

nodemon server.js

Step 4: Install the angular CLI

npm install -g @angular/cli

Step 5: Create a new angular project using the following command.

ng new frontend

Step 6: Create components in angular for different functionality

ng generate component <component-name>

Step 7: Create service for communication between backend and frontend

ng generate service <service-name>

Step 8: Create model for game matching to the game schema we have created in mongo DB

ng generate interface <model-name>

The updated Dependencies in package.json file of frontend will look like:

"dependencies": {
 "@angular/animations": "^17.0.0",
 "@angular/cdk": "^17.2.2",
 "@angular/common": "^17.0.0",
 "@angular/compiler": "^17.0.0",
 "@angular/core": "^17.0.0",
 "@angular/forms": "^17.0.0",
 "@angular/material": "^17.2.2",
 "@angular/platform-browser": "^17.0.0",
 "@angular/platform-browser-dynamic": "^17.0.0",
 "@angular/platform-server": "^17.0.0",
 "@angular/router": "^17.0.0",
 "@angular/ssr": "^17.0.10",
 "express": "^4.18.2",
 "rxjs": "~7.8.0",
 "tslib": "^2.3.0",
 "zone.js": "~0.14.2"
}

Project Structure(Frontend):

👁 project-structure

Example: Create the required files s seen in folder structure and add the following codes.

To start the frontend run the following command.

ng serve

Output:

👁 output-(1)