Recent Works

All

Image

Gallery

Project

GameHub

Description

The game website was developed using vite with React which uses a faster and more efficient build system and provides a faster and more efficient development server. The website UI was cloned from the website rawg.io which also provides a list of APIs for the website. Users are able to search games by name or genre or platform, filter the games with different options and also switch from dark/light mode. React Query and Zustand libraries were used for state management.

Dependencies

npm

npm -v
10.2.4

React

React is a free and open-source front-end JavaScript library for building user interfaces based on components.

"react": "^18.2.0",
"react-dom": "^18.2.0"

React Icons

React is a free and open-source front-end JavaScript library for building user interfaces based on components.

"react-icons": "^4.12.0"

Chakra UI

Chakra UI is a simple, modular and accessible component library that gives you the building blocks you need to build your React applications.

"@chakra-ui/react": "^2.8.2"

Axios

Axios is a promise-based HTTP Client for node.js and the browser. It is isomorphic (= it can run in the browser and nodejs with the same codebase). On the server-side it uses the native node.js http module, while on the client (browser) it uses XMLHttpRequests.

"axios": "^1.6.2"

React Query

React Query is often described as the missing data-fetching library for React, but in more technical terms, it makes fetching, caching, synchronizing and updating server state in your React applications a breeze.

"@tanstack/react-query": "^5.14.2"

Zustand

A small, fast and scalable bearbones state-management solution using simplified flux principles. Has a comfy API based on hooks, isn't boilerplatey or opinionated.

"zustand": "^4.4.7"

Bootstrap

Bootstrap is a free and open-source CSS framework directed at responsive, mobile-first front-end web development.

"bootstrap": "^5.3.2"

View Project

Project

TradeBot Assistant

Description

The purpose of the TradeBot Assistant was to build a robust chatbot system, which can identify different trading queries of users and give the appropriate response, using the IBM Watson Assistant platform.

Prerequisite

Bootstrap 4

Bootstrap is the most popular CSS Framework for developing responsive and mobile-first websites. The bootstrap 4 libraries are already downloaded and added in the CSS and JS folders. It is also referrenced in the Index.html file.

<head>
    <title> TradeBot Assistant <title/>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <link rel="stylesheet" type="text/css" href="css/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="css/fontawesome.min.css">
    <link rel="stylesheet" type="text/css" href="css/all.css">
<head/>

<script src="../js/bootstrap.js"> <script/>

IBM Watson Assistant

IBM Watson Assistant uses artificial intelligence that understands customers in context to provide fast, consistent, and accurate answers across any application, device, or channel. Remove the frustration of long wait times, tedious searches, and unhelpful chatbots with the leader in trustworthy AI.

The natural language processing for Watson Assistant service is defined in a dialog skill, which contains all the data to build a conversation flow. Upon creating the dialog skill, there is an option to choose from different languages that the skill will be trained to understand but English language has been chosen as the default value.

Webhook

A webhook is a method that can call an external program, such as IBM Cloud Function, to the chatbot application. It is triggered when the assistant processes a node that has a webhook enabled. The webhook then collects data from user input and store them as parameter which is then sent as part of a HTTP POST request to the defined URL. This method was used to send data as parameters to the functions in the Cloud Function. The specified URL, from the web action in the section of IBM Cloud Function, is added in the dialog skill option. If the webhook call exceeds the 8 seconds, an error response will be shown on the web chat interface. Whenever a webhook is activated in a node, it provides a multi-conditioned response where different responses can be shown to the user if the condition is met.

Note: Since all responses are returned as a JSON Object, the .json extension needs to be added in the webhook URL to ensure that the desired content type of the response will be in a JSON format.

Moreover, the web action can be invoked by using the URL without authentication. To make the web action more secure, an HTTP header value X-Request-Whisk-Auth is added for authorization to invoke the webhook.

Intents

Intents are defined as the goals expressed in user’s input such as searching for something or answering a question. By recognizing the intents, Watson Assistant can choose the correct dialog node to answer the user. Based on this technique, some intents have been added to achieve dialogs like in the use cases. The training intents should contain several examples to provide a better response coverage.

Entities

Entities are important pieces of information in the user input to perform certain tasks . The defined entities will then be trained in Watson Assistant to be detected in different context of a user input. These important keywords will be finally stored as parameters in the dialog nodes to be sent to the cloud functions.

Contextual Entity

Contextual entity model consists of annotating occurrence of the defined entities in the intent’s examples. This method helps the assistant to understand how the entity is typically used in a sentence.

Slots

Slots is a mechanism that gathers multiple pieces of information, from a user, to give an accurate response. It also provides different ways to collect information. For example, if the user enters “Trade statistics” or any in the #Trade_Statistics intent, the slot function has been configured to detect a @Country entity and a @Period entity.

if (none are found)
    The chatbot will first ask the user to enter a name of a country, then ask to enter the desired year
else if (@Country is found)
    The chatbot will ask to enter the year
else if (@Period is found)
    The chatbot will ask for the name of the country
else if (both are found)
    The chatbot will see that both required information are detected and continue the process

Dialog Nodes

The dialog is structured in a decision tree and it defines what the assistant is able to say in response to customers. The decision tree contains several parent nodes which are further extended with child nodes.

IBM DB2 Database

IBM Db2 is a relational database which offers AI capabilities for data management and advanced analytics for workloads. It was mainly chosen because of its AI functionality which provides machine learning algorithms that were able to make faster query speed improvements. IBM cloud database improves query performance by implementing indexes, materialized views and compression, which makes Db2 more efficient. The IBM cloud service provides two ways to create tables, load data and to run SQL commands, either by using the graphical user interface or the IBM command line. For this project, the GUI will be used on the cloud website.

Dialog Nodes

The dataset used for the trade data is provided by UN Comtrade. It contains an open-source collection of traded goods but however, the one implemented, in this project, has limited data of 175150 rows. The full dataset contains more than 1 million products from different countries and requires a premium access. IBM Db2 platform has the feature to load data from a single delimited text file. The delimiter used is a comma(,) which separates each value into a specific column. This feature makes it easier to load several CSV files into the table instead of using the INSERT INTO query.

Database Credentials

In order to gain accessibility to the database, each instance needs to have a unique set of service credentials which contains hostname, username, password, port and much more. This will provide authorization to the user and will be further used in the Cloud Functions to gain access to the database.

IBM Cloud Function

Cloud function, also referred to as Function-as-a-Service (FaaS), is a method to execute the application codes in the cloud at massive scale. The serverless infrastructure will deploy the code in the form of a function and will be responsible for the execution, resources needed and the scaling of the runtime environment. There are 2 key terminologies to understand the basic concepts of IBM cloud function:

Namespace - The namespace is also known as an Identity and Access Management (IAM) service instance. The IAM integration provides flexible access and control over the function’s resources.
Web Action - A cloud action is the source code where all the tasks will be performed. An action can be written in several programming languages but for this project, Node.js 12 was used to execute all the query tasks. A web action is an action that is implemented with HTTP handlers that respond with headers, status code and body content. Upon creating a web action, the result is a URL that can be used to trigger the action. The URL will then be added in IBM Watson Assistant to send a JSON response.

Database Connection

The service credentials of IBM Db2 is passed as parameters in the dispatch,js web action. The values are then used in the main function to be stored in the dsn variable. From Node.js, the connection with IBM Db2 will be firstly established before executing a query. However, the dsn value from the credentials does not exists for the standard instance and has to be built manually. In the if condition, each value is stored in a const variable and passed into the dsn variable.

dsn = params.__bx_creds[Object.keys(params.__bx_creds)[0]].dsn;
// dsn does not exist in the DB2 credential for Standard instance. It must be built manually
if(!dsn) {
    const dbname = params.__bx_creds[Object.keys(params.__bx_creds)[0]].connection.db2.database;
    const hostname = params.__bx_creds[Object.keys(params.__bx_creds)[0]].connection.db2.hosts[0].hostname;
    const port = params.__bx_creds[Object.keys(params.__bx_creds)[0]].connection.db2.hosts[0].port;
    const protocol = 'TCPIP';
    const uid = params.__bx_creds[Object.keys(params.__bx_creds)[0]].connection.db2.authentication.username;
    const password = params.__bx_creds[Object.keys(params.__bx_creds)[0]].connection.db2.authentication.password;

    dsn = `DATABASE=${dbname};HOSTNAME=${hostname};PORT=${port};PROTOCOL=${protocol};UID=${uid};PWD=${password};Security=SSL`;
}

View Project

Project

Digits Recognition using Neural Network

Description

A machine learning system to categorise one of the UCI digit tasks using Neural Network in Java.

Prerequisite

Java Development Kit (JDK)

JDK version 11 is used for this project as it includes the JavaFX library.

Neural Network

A neural network-based classifier, called Multi-Layer perceptron (MLP), was used in the project to classify handwritten digits. The MLP consists of three layers which are the input layer, hidden layer and output layer.

Each of these layers contain a certain number of nodes which are also called neurons and each node in a layer is connected to all other nodes to the next layer. This can also be referred to as the feed forward network. The number of nodes in the input layer depends upon the number of attributes present in the dataset. For this project, the input attributes are integers in the range 0..16 and the last attribute is the class code 0..9. The number of nodes in the output layer relies on the number of apparent classes that exist in the dataset. The number of hidden layers is hard to determine as the numbers are selected experimentally. Thereby, the following numbers are given to the first and second hidden layers which can be found in the RecognizingHandwrittenDigits.java class.

final static int FIRST_HIDDEN_LAYER_NODE_AMOUNT = 26;
final static int SECOND_HIDDEN_LAYER_NODE_AMOUNT = 15;

In MLP, the connection between two nodes consists of a weight. During training, process, it learns the accurate weight adjustment which corresponds to each connection. For the learning purpose, it uses a supervised learning technique named as Backpropagation algorithm.

Hidden Layers

Hidden layers of a neural network are just a way to add more neurons in between the input and output layers.

Different mathematical calculations are implemented to perform the algorithm. First is the dot product function,

Each of the m features in the input layer is multiplied with a weight (w1, w2, …, wm) and added all together. Then, the hidden output from the hidden neurons (h1, h2, …, hn) are used as input data that has n features. The dot product is finally performed with 1 set of n weights to get the final output y, in the output layer.

Sigmoid Function

The Sigmoid function is also called an activation function, which becomes active to allow input signal Z to pass through the neuron if the input is big enough but it limits the output if the input Z is too small.

The graph above shows when the output Z is larger or equal to 0.5, it outputs 1 else if it is smaller than 0.5, it outputs 0.

The sigmoid function introduces non-linearity into the neural network model which means that the output from the neuron, which is the dot product of inputs x and weights w plus bias and then put into a sigmoid function, cannot be represented by a linear combination of the input x. This non-linear function produces a new representation of the original data.

Single-Layer Perceptron vs Perceptron with Hidden Layer

Perceptron with hidden layers were most preferable to implement because a research paper has shown that single-layer perceptron was unable to learn an XOR gate. For example, it cannot understand the logic that the weather has to be either hot or cold, but not both. Logic gates such as AND, OR, NOT, XOR are very important building blocks of any digital system. However, the multi-layer perceptron was able to learn the XOR gate with backpropagation. Hidden layers can twist the problem in a way that makes it easy for the neural network to classify the problem or pattern. This is very useful for the recognition of handwritten digits.

single-layer-perceptron-with-hidden-layer

Using MLP for Recognition of Handwritten Digits

The dataset, from the Optical Recognition of Handwritten Digits website, contains 32x32 bitmaps and each of these represent an image of 8x8 pixels. The neural network was implemented in the NetworkBase.java class containing 64 nodes in the input layer, 26 in the first hidden layer, 15 in the second hidden layer and 10 in the output layer. The 10 output neurons return in an array where each will be classified a digit from 0 to 9. For example, if the handwritten digit is 0, then the output array will be [1, 0, 0, 0, 0, 0, 0, 0, 0, 0]. If the handwritten digit is 5, the array will be [0, 0, 0, 0, 0, 1, 0, 0, 0, 0]. The neural networks become better by repetitively training them on data and based on the weights in each layer.

After training the neural network with data from the first CSV file, the first 4 hidden neurons will be able to recognize the patterns. Then, the testing CSV file is fed to the neural network to trigger the hidden neurons and output the correct digit.

View Project

Project

CodinGame

Description

CodinGame is a challenge-based training platform for programmers where you can improve your coding skills with fun exercises. The code, used to solve puzzles, are added in this repository.

Puzzles

Easy

Onboarding

Solving this puzzle helps you understand how the puzzles work on CodinGame.

Skill(s): Conditions

Mars Lander - Episode 1

This puzzle teaches you how to compare values using a simple condition.

Skill(s): Conditions

Power of Thor - Episode 1

In this puzzle, you need to compare different values. You have to correlate character variables and integer variables.

Skill(s): Conditions

Temperatures

Solving this puzzle validates that the loop concept is understood and that you can compare a list of values.

Skill(s): Conditions, Loops, Arrays

The Descent

Solving this puzzle makes you understand the concept of loops and the ways of retrieving the maximum value from a list of integers.

Skill(s): Loops

Medium

Death First Search - Episode 1

This problem plays out on a graph where a “virus” moves from node to node, in search of an exit. There are several exits and you have to cut access to these exits by finding the best link to cut each turn.

Skill(s): Breath First Search, Graphs

Shadows of the Knight - Episode 1

The goal of this puzzle is to guess the coordinate of a bomb (line and column of a 2 dimensional array). You will have to make a guess at each step of the puzzle and adjust it from given feedbacks. Of course, you have a limited number of guess.

Skill(s): Binary search, Intervals

There is no Spoon - Episode 1

In this puzzle, you have to detect special characters from a string. You also have to store input values into a grid to explore it. You have to go through all elements from a grid (certainly using a double loop) and from those points, iterate again on some elements of the grid. Solving this puzzle make you learn the concept of nested loop.

Skill(s): Lists

View Project

Gallery

Project

PHP Symfony 6 Guide

Description

This guide will help you to learn PHP Symfony 6 Framework basics. The concepts in this course include:

Basic of handling requests
Twig templates
Databases and Doctrine
Doctrine Relations
Querying the database
Authentication (registration, e-mail confirmation, login page, banning users)
Authorization of users (roles, voters)
User permission system (role-based)
File uploads and displaying uploaded images
Sending e-mail

You'll learn all this while building a fun and interesting project, a Twitter-like clone, using the most modern CSS framework Tailwind CSS.

Get Started

Setup / Installation

PHP 8.1

PHP will be used to run a built-in server and run console commands. Install PHP 8.1 or higher.

Extract the downloaded zip file in C:\Program Files\ directory.
Copy the full directory of the extracted folder.
Now click on Start Menu and search Environment variables and open it.
Under System variables, add a new value inside the Path variable and paste the full directory in step 2.
Save your changes and check the php version in command prompt.

php --version
PHP 8.1.13 (cli) (built: Nov 22 2022 15:49:14) (ZTS Visual C++ 2019 x64)
Copyright (c) The PHP Group
Zend Engine v4.1.13, Copyright (c) Zend Technologies

Composer

Composer will be used to install PHP packages.

Windows Installer - The installer, which requires that you have PHP already installed, will download Composer for you and set up your PATH environment variable so you can simply call composer from any directory. Download and run Composer-Setup.exe - it will install the latest composer version whenever it is executed.
Command-line installation - To quickly install Composer in the current directory, run the following script in your terminal.

Symfony CLI

Download the 386 binaries.

Extract the ZIP file to C:\symfony-cli.
Add to the Path environment variable under User Variables.
Run symfony in terminal to see the CLI version and commands.

Docker

Docker will be used to run a database server and db admin panel.

Symfony 101

Creating Project

Open your console terminal and run any of these commands to create a new Symfony application:

Symfony-cli

symfony new my_project_directory --version="6.2.*"

Composer

composer create-project symfony/skeleton:"6.2.*" my_project_directory
cd my_project_directory
composer require webapp

Running Symfony Applications

For local development, the most convenient way of running Symfony is by using the local web server provided by the symfony binary.

# Run server in background with -d
symfony server:start -d

Symfony Check

Technical Requirements

symfony check:requirements

Security

symfony check:security

Project Structure

config/ - Contains all configuration files such as routes, services and packages.
migrations/ - Contains all doctrine migration class files.
src/ - Contains all PHP code.
templates/ - Contains all Twig templates.
bin/ - Contains files for the bin/console command. Ex: php bin/console <command>
var/ - Contains all automatically-created files like cache files and logs.
vendor/ - Contains all third-party libraries. These are downloaded via the Composer package manager.
public/ - It is the document root of the project where any publicly accessible files are contained.

Controllers - Returning a Response

A Controller is the PHP function you write that builds the page. You take the incoming request information and use it to create a Symfony Response object, which can hold HTML content, a JSON string or even a binary file like an image or PDF.

Creating new controllers

After running the command, a new controller and its twig file is created in their respective directory.

symfony console make:controller HelloController

Routing PHP 8 Attributes

A Route is the URL (e.g. /about) to your page and points to a controller.

PHP attributes allow to define routes next to the code of the controllers associated to those routes. Attributes are native in PHP 8 and higher versions.

#[Route('/hello', name: 'app_hello')]

Route Parameter Requirements

In order to differentiate between two routes, ex: /hello/{id} & /hello/{personId}, the requirements option will be used.

The requirements option defines the PHP regular expressions that route parameters must match for the entire route to match.

#[Route('/hello/{id}', name: 'app_hello', requirements: ['id' => '\d+'])]

Requirements can be inlined in each parameter using the syntax {parameter_name<requirements>}.

#[Route('/hello/{id<\d+>}', name: 'app_hello')]

Priority Parameter

Symfony evaluates routes in the order they are defined. If the path of a route matches many different patterns, it might prevent other routes from being matched. The optional parameter priority can be set to control the routes priority.

Twig Templates

A template is the best way to organize and render HTML from inside your application, whether you need to render HTML from a controller or generate the contents of an email. Templates in Symfony are created with Twig: a flexible, fast, and secure template engine.

he Twig templating language allows you to write concise, readable templates that are more friendly to web designers and, in several ways, more powerful than PHP templates.

<!DOCTYPE html>
<html>
  <head>
    <title>Welcome to Symfony!</title>
  </head>
  <body>
    <h1>{{ page_title }}</h1>
    {% if user.isLoggedIn %}
      Hello {{ user.name }}!
    {% endif %}
    {# ... #}
  </body>
</html>

Twig syntax is based on these three constructs:

{{ ... }}, used to display the content of a variable or the result of evaluating an expression.
{% ... %}, used to run some logic, such as a conditional or a loop.
{# ... #}, used to add comments to the template (unlike HTML comments, these comments are not included in the rendered page).

Using the AbstractController in the Controller class to render the Twig template.

class HelloController extends AbstractController
{
  #[Route('/hello', name: 'app_hello')]
  public function index(): Response
  {
    return $this->render('hello/index.html.twig', [
      'controller_name' => 'HelloController',
    ]);
  }
}

Twig Template Inheritance

The extends tag can be used to extend a template from another one. We also need to surround all of our content with a {% block body %} tag and a closing {% endblock %}.

{# Child template #}
{% extends "base.html" %}
{% block body %}
  <div class="row">
    {# ... #}
  </div>
{% endblock %}

{# Parent template #}
{% block body %}{% endblock %}

Twig Control Structures

For Loop

A for loop can be used inside a twig template to display all the values from an array (from controller).

{% for num in tests %}
<div>{{ num }}</div>
{% endfor %}

Conditional Statement

{% for num in tests %}
  {% if num <= 2 %}
    <div>{{ num }}</div>
  {% else %}
    <div>Num greater than 2</div>
  {% endif %}
{% endfor %}

View Project

Project

Travelling Salesman Problem

Description

The travelling salesman problem is to go to each city exactly once and return to the start. A system was built, in Java, to solve this problem by providing the shortest path and the length of the path.

Prerequisite

Java Development Kit (JDK)

JDK version 11 is used for this project as it includes the JavaFX library.

Genetic Algorithm

Genetic algorithms are designed to solve problems by using the same processes as in nature. The processes use a combination of selection, recombination, and mutation to evolve a solution to a problem.

The algorithm starts by initializing a population of candidate solutions of City objects. The data will be obtained from text files containing the name, x and y coordinates of the city. Next, the population is evaluated by assigning a fitness value to each individual in the population.

After evaluation, the algorithm will terminate if a condition is met. In the project, the termination condition is executed if the algorithm has reached a fixed number of generations.

If the condition is not met, the population goes through a selection process where candidate solutions are picked based on their fitness score, to breed the next generation of solutions.

The crossover and mutation stages are where new individuals are created for the next generation.

The new population goes back to the evaluation step and the process starts again.

Finally, if the termination condition is met, the algorithm will show the results to the user.

City

The City.java class constructor class for City objects. It contains parameters such as the name, x and y coordinates of the city. Additionally, the distanceFrom() function calculates the distance between two cities using Euclidean distance formula.

Individual

The Individual.java class represents a single candidate solution and its chromosome. The constructor accepts an integer which represents the length of the chromosome and an integer array which is used as the chromosome. The class also get the individual’s fitness value.

Crossover

A gene in the chromosome must be unique or else it will create an invalid solution since a city should be visited only once. The ordered crossover method has been used in this project. In this method, a subset of the first parent’s chromosome is selected and added to the child chromosome in the same position.

The information from parent 2 is then added to the offspring by starting from the end position of the subset. If the gene is present in the offspring chromosome, it is not added.

Population

The Population.java class represents a population of individuals. It holds different methods to access or update the individuals in the population. It also has the total fitness score of the population.

Mutation

The swap mutation has been applied since it is an easy solution. The swap mutation algorithm works by simply swapping the genetic information at two points. This process ensures no duplicate genes are created and that any resulting offspring will be valid solutions.

Route

The route class calculates the total route distance in the array of City objects.

Note: test1tsp.txt, test2atsp.txt and test3atsp.txt are used to test the algorithm.

View Project

Project

Gym Software

Description

The Gym Software is a network application, based in Java, which utilises multi-threaded programming and is connected to a database. The software implementation will enable staff members to add, update, delete and view the bookings of each client.

With the use of multi-threading, the Gym Software will be accessible to mutiple clients to connect at the same time and interact with the database.

Prerequisite

Java Development Kit (JDK)

JDK version 11 is used for this project as it includes the JavaFX library

MariaDB

MariaDB Server is one of the most popular open source relational databases. It’s made by the original developers of MySQL and guaranteed to stay open source. It is part of most cloud offerings and the default in most Linux distributions.

JDBC Driver

A JDBC driver is a software component enabling a Java application to interact with a database.

To connect with individual databases, JDBC (the Java Database Connectivity API) requires drivers for each database. The JDBC driver gives out the connection to the database and implements the protocol for transferring the query and result between client and database.

Software Design

A Server-Client setup refers to socket programming in Java where a client sends messages to the server and the server shows them using a socket connection.

A socket in Java is one endpoint of a two-way communication link between two programs running on the network. A socket is bound to a port number so that the TCP layer can identify the application that data is destined to be sent to.

Server

The server will instantiate its object and wait for the client request. Once the client sends the request, the server will communicate back with the response.

The ServerSocket is binded to the port number 8080, which is passed as an argument to the constructor of the class ServerSocket.

final int PORT = 8080;
try (ServerSocket serverSocket = new ServerSocket(PORT)) {
    while (true) {
        Socket socket = serverSocket.accept();
        new Thread(new ServerRunnable(socket)).start();
    }
}

The getOutputStream() method is used to send the output through the socket.

OutputStream outputStream = socket.getOutputStream();

The getInputStream() method is used to receive messages, through the socket, from the Client side.

InputStream inputStream = socket.getInputStream();

Database connection is set in the ServerRunnable.java.

private Connection connection = Database.connectDb();

Client

In order to establish a connection to the server, a socket is required.

String hostName = "localhost";
int port = 8080;
Socket socket = new Socket(hostName, port);

where the first argument is the IP addres of Server (127.0.0.1/localhost) and the second argument is the TCP port which will be the same on the server-side.

Testing

Testing shows that the software has meet its requirements and it is printing the expected output.

Validation Testing

Before sending data to the server, the client side must validate the user input. In the gym software, regex expressions are used to validate all user inputs from console.

IDs

S^[B][0-9]{3}+$

The ^ symbol means the start of the string which is the user input and $ sign is end of string. In the regex above, the string must always start with a capital B and continue with only 3 numeric values.

Examples:
Good format: B001, B123, B999
Bad format: C001, B0001, JC21, BB01
The same format is used to validate the trainerID, SpecialismID and ClientID.

Date

\d{4}\\-(0?[1-9]|1[012])\\-(0?[1-9]|[12][0-9]|3[[01])*

The “\d{4}” ensures that the user input for year is YYYY. The “(0?[1-9]|1[012])” part checks if user months input is between 01 to 12. And the last part allows only numbers between 01 to 31 to be accepted.

Time

([01]?[0-9]|2[0-3]):[0-5][0-9]

It ensures that the time is between 00:00 to 23:59. Even 9:0 is accepted but it will be reconverted to 09:00 in the table booking.

View Project

Image

Project

Asteriods Game

Description

The Asteroids Breaker website enables users to register, login and to play an Asteroid game. Each user will have a unique username which will be verified during registration. The scores of each user will be updated and placed in the Leaderboards page. Local storage, from the browser, is used in order to store user information and scores. Session storage also ensures which user is currently logged in and to update the home page accordingly.

The website and the game was built using HTML, CSS, PHP and JavaScript programming languages.

Prerequisite

XAMPP

XAMPP is a completely free, easy to install Apache distribution containing MariaDB, PHP, and Perl. The XAMPP open source package has been set up to be incredibly easy to install and to use.

Asteroids Breaker

Asteroids is a space-themed multidirectional shooter game. The player controls a single spaceship in an asteroid field. The object of the game is to shoot and destroy the asteroids, while not colliding with them. The game becomes harder as the number of asteroids increases.

Starting Position

The player always starts at the center of the screen on every new game. This is achieved by dividing the canvas width and height by 2. Ths ship's angle is also used to make it face north by using the formula (π/180 × degree) which converts the value to radians. A blinking of 3 seconds is used to make the ship invulnerable to the asteroids. In case where a user respawn in the center of an asteroid. Instead of exploding, the user has time to escape.

Movements

The player controls the spaceship which is represented by a triangular object at the center of the screen. The arrow keys, ← ↑ → ↓, on the keyboard are used to control the spaceship. The keyDown() and KeyUp() functions, in the Asteroids.js script, are used to move the spaceship.

Asteroids

The asteroids are created in the update function and stored in an array. Each of them will have a different number of sides and will be moving at different speed by using the Math.random() function. Problem like asteroids appearing on ship when level starts has been solved in the createAsteroidBelt() function where the distBetweenPoints() function creates a radius around the ship. Asteroids will not appear in this radius at the start of the game.

Destroy Asteroids

When a laser hits the large asteroids, it breaks down into two smaller pieces. The collision of the ship with the asteroids will also destroy the asteroids. The ASTEROID_SIZE constant is divided by 4 then by 8 in the destroyAsteroid() function. The roids.slice(index, 1) will remove the asteroid from the array. Smaller asteroids have higher score of 100. If all asteroids are destroyed, then a new level will start.

Levels

At level 1, the number of asteroids is 3. As the levels increases, the number of asteroids and their speed also increases which makes the game difficult at a certain level. In the createAsteroidBelt() function, the ASTROID_NUM is added with the level and in newAsteroid() the speed is multiplied by (1 + 0.1 * level).

Collisions

The collisions are detected when the ships circle collides with the asteroids circle. Then an explosion animation is shown and the life decreases by one.

Usage

In order to access the game page, the user need to register a new account or login with an existing account.
The game can then be accessed by using the Play button on the home page or on the navigation bar.
Each scores will be saved in the Leaderboards page.

View Project

Gallery

Project

Voice Based Interactive System

Description

A Student Support System where users can control all funcionalities using voice commands. Web Speech API provides the functionality to use speech recognition and speech synthesis into web apps to handle voice data.

Prerequisite

Bootstrap 4

<head>
    <title> Student Support Assistant <title/>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <link rel="stylesheet" type="text/css" href="css/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<head/>

<script src="../js/bootstrap.js"> <script/>

Web Speech API

The Web Speech API enables you to incorporate voice data into web apps. The Web Speech API has two parts: SpeechSynthesis (Text-to-Speech), and SpeechRecognition (Asynchronous Speech Recognition).

Speech Synthesis

Speech synthesis is accessed via the SpeechSynthesis interface, a text-to-speech component that allows programs to read out their text content (normally via the device's default speech synthesizer). Different voice types are represented by SpeechSynthesisVoice objects, and different parts of text that you want to be spoken are represented by SpeechSynthesisUtterance objects. You can get these spoken by passing them to the SpeechSynthesis.speak() method.

Speech Recognition

Speech recognition is accessed via the SpeechRecognition interface, which provides the ability to recognize voice context from an audio input (normally via the device's default speech recognition service) and respond appropriately. Generally you'll use the interface's constructor to create a new SpeechRecognition object, which has a number of event handlers available for detecting when speech is input through the device's microphone. The SpeechGrammar interface represents a container for a particular set of grammar that your app should recognize. Grammar is defined using JSpeech Grammar Format.

Note: On some browsers, like Chrome, using Speech Recognition on a web page involves a server-based recognition engine. Your audio is sent to a web service for recognition processing, so it won't work offline.

View Project

Project

Karaoke Application

Description

A Karaoke Application was designed and implemented using Data Structures and JavaFX where a user will be able to search specific songs from a large number of data and to add new songs to the playlist.

Currently, the library has only 4364 songs but it is expected to have over 1 million of songs. Some observations such as the time and space complexity must be taken into consideration before choosing the right data structure. This will determine the order of growth of the application. Implementation of balanced binary search tree data structure was used to store the songs data and its order of growth is O(log n) where n is the number of songs.

Prerequisite

JavaFX

JavaFX is an open source, next generation client application platform for desktop, mobile and embedded systems built on Java.

Java Development Kit (JDK)

JDK version 11 is used for this project as it includes the JavaFX library.

Data Structure

A data structure is a particular way of organizing data in a computer so that it can be used effectively. The data structure implemented is a balanced binary search tree to store the song’s data from the library. A balanced binary search tree is a tree that automatically keeps its height small. The cost of this algorithm is guaranteed to be logarithmic which means that as the input size increases the time taken to complete this algorithm becomes constant.

Red-Black Binary Search Tree (BST)

Red-black trees are an evolution of binary search trees that aim to keep the tree balanced without affecting the complexity of the primitive operations. This is done by coloring each node in the tree with either red or black and preserving a set of properties that guarantee that the deepest path in the tree is not longer than twice the shortest one.

The ST.java class represents an ordered symbol table of generic key-value pairs. It supports the usual put, get, contains, delete, size, isEmpty methods and it also provides ordered methods for finding the minimum, maximum, floor, and ceiling. A keys method is added for iterating over all of the keys.

A symbol table implements the associative array abstraction

when associating a value with a key that is already in the symbol table,
the convention is to replace the old value with the new value.

Unlike java{@link java.util.Map}, this class uses the convention that values cannot be java{@code null} setting the value associated with a key to java{@code null} is equivalent to deleting the key from the symbol table. It requires that the key type implements the java{@code Comparable} interface and calls the java{@code compareTo()} and method to compare two keys. It does not call either java{@code equals()} or java{@code hashCode()}. This implementation uses a red-black BST.

Balanced Binary Search Tree (BST)

A balanced binary tree, also referred to as a height-balanced binary tree, is defined as a binary tree in which the height of the left and right subtree of any node differ by not more than 1.

The conditions for a height-balanced binary tree:

difference between the left and the right subtree for any node is not more than one.
the left subtree is balanced.
the right subtree is balanced.

The SET.java class represents an ordered set of comparable keys. It supports the usual add, contains, and delete methods. It also provides ordered methods for finding the minimum, maximum,floor, and ceiling and set methods for union, intersection, and equality.

Even though this implementation include the method {@code equals()}, it does not support the method {@code hashCode()} because sets are mutable. This implementation uses a balanced binary search tree. It requires that the key type implements the {@code Comparable} interface and calls the {@code compareTo()} and method to compare two keys. It does not call either {@code equals()} or {@code hashCode()}.

Doubly Linked List

A Doubly Linked List (DLL) contains an extra pointer, typically called previous pointer, together with next pointer and data which are there in singly linked list.

The LinkedList.java class represents the implementation of a doubly linked-list. It supports the add, addFirst, addLast, remove, removeFirst, removeLast, removeAt, indexOf, along with methods to peek first element and last element. It also has the methods for isEmpty, size and clear.

View Project

Project

Bugatti Website

Description

Bugatti Website is a single page web application that was built using Node.js. The page will change based on the user input without reloading. The front end of the website is written in HTML, CSS and JavaScript and it communicates with the back end using AJAX. MariaDB database is connected to the website to store user information and the data is exchanged in JSON format.

Prerequisite

Node.js

As an asynchronous event-driven JavaScript runtime, Node.js is designed to build scalable network applications. Many connections can be handled concurrently. Upon each connection, the callback is fired, but if there is no work to be done, Node.js will sleep.

MariaDB

View Project

Project

Audio Player

Description

Audio recorder from microphone to a given file path.

Prerequisite

Flutter

Flutter is an open source framework by Google for building beautiful, natively compiled, multi-platform applications from a single codebase.

pubspec.yaml

path_provider 2.0.11

A Flutter plugin for finding commonly used locations on the filesystem. Supports Android, iOS, Linux, macOS and Windows. Not all methods are supported on all platforms.

audioplayers 1.0.1

A Flutter plugin to play multiple simultaneously audio files, works for Android, iOS, Linux, macOS, Windows, and web.

record 4.3.2

Audio recorder from microphone to a given file path.

Permissions

Android

<uses-permission android:name="android.permission.RECORD_AUDIO" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />

IOS

<key>NSMicrophoneUsageDescription</key>
<string>We need to access to the microphone to record audio file</string>

View Project

GameHub

Dependencies

npm

React

React Icons

Chakra UI

Axios

React Query

Zustand

Bootstrap

TradeBot Assistant

Prerequisite

Bootstrap 4

IBM Watson Assistant

Webhook

Intents

Entities

Contextual Entity

Slots

Dialog Nodes

IBM DB2 Database

Dialog Nodes

Database Credentials

IBM Cloud Function

Database Connection

Python Web Scraper

Digits Recognition using Neural Network

Prerequisite

Java Development Kit (JDK)

Neural Network

Hidden Layers

Sigmoid Function

Single-Layer Perceptron vs Perceptron with Hidden Layer

Using MLP for Recognition of Handwritten Digits

CodinGame

Puzzles

Easy

Onboarding

Mars Lander - Episode 1

Power of Thor - Episode 1

Temperatures

The Descent

Medium

Death First Search - Episode 1

Shadows of the Knight - Episode 1

There is no Spoon - Episode 1

PHP Symfony 6 Guide

Get Started

Setup / Installation

PHP 8.1

Composer

Symfony CLI

Docker

Symfony 101

Creating Project

Symfony-cli

Composer

Running Symfony Applications

Symfony Check

Technical Requirements

Security

Project Structure

Controllers - Returning a Response

Creating new controllers

Routing PHP 8 Attributes

Route Parameter Requirements

Priority Parameter

Twig Templates

Twig Template Inheritance

Twig Control Structures

For Loop

Conditional Statement

Travelling Salesman Problem

Prerequisite

Java Development Kit (JDK)

Genetic Algorithm

City

Individual

Crossover

Population