Table Extraction was developed as part of my final year project at University to extract tabular data from images. The main motive behind it was to extract prayer times given a timetable and later develop an application to automatically send prayer notifications on your phone.

After analysing past research in the computer vision area, I decided to opt for a linear based solution given that most prayer timetables include all the table lines for easier reading. As for the technologies, I opted for Python and the OpenCV library due to their popularity in the field, and Tesseract as the OCR engine.

I first started by using image processing to remove noise from the image, convert to grayscale and thicken lines to identify the table region in the image. Using contour detection, the largest quadrilateral is identified in the image and extract (warp) the table.

Next, image binarization is applied to only retain table text and lines. Linear kernels are used to detect vertical and horizontal lines, which are then merged into a single image. Performing contour detection will then identify all the cells in the image.

Finally, an algorithm was developed to assign cells to their respective rows and sort the data from top-to-bottom, left-to-right. Each cell is parsed through the Tesseract OCR engine, and the entire table is returned in JSON format.

The framework was tested against multiple prayer timetables and achieved a cell detection accuracy of 86.8%. This is impressive considering my inexperience in computer vision prior to this project, and demonstrates above-average accuracy of my solution.

Unfortunately relying on table lines can cause a significant drop in cell detection if the input image is blurry. A possible solution would be to remove table lines all together and instead use space information between text to identify individual cells, but further research is needed to validate this theory.

For future use, I implemented a simple Flask API that accepts images to be sent as a POST request and returns the JSON data to the user. I then packaged the project in a Docker container for easier set up and deployment, 

with the image released on the Docker Hub

Personally, I was able to benefit from the research behind the framework to explore computer vision concepts and apply them to automate a task I would have otherwise performed manually. The project was challenging but rewarding at the same time. Developing various algorithms from scratch was nerve-wrecking at times but seeing everything come together in the end was a thrilling and joyful experience. Most importantly, I was able to take the theory behind concepts and ideas from different university modules and apply them to solve a real-world problem.

A line-based framework to detect and extract tabular data in JSON format from raster images using computer vision and Tesseract OCR.

Table Extraction

Over the past couple of years I focussed on full stack web technologies, and worked on a few freelance projects to apply my new skills. As a result, I wanted to build a new portfolio based on these new technologies to showcase my past projects.

The previous portfolio was built using Jekyll. As a result, both the code and portfolio entries were in the same GitHub repository, cluttering the codebase and drastically increasing the number of commits for every change made to the content. Therefore I looked at building a new solution to separate the content from the codebase.

Jamstack was the solution: the content would be hosted on a CDN, and the website would pull the data at build time to generate all the pages. For this purpose I explored 

. NextJS is a React framework to generate static websites, and Sanity is a headless CMS which enables the consumption of data through an API.

Sanity provides their own query language (similar to GraphQL) to retrieve the data from their system. Using NextJS' "getStaticProps" function, I can fetch all my projects at build time, and statically-generate all the pages to improve page paining times and reduce network calls on the users' devices.

This re-design of my portfolio was a great way to both modernize my online presence and demonstrate my skills and abilities in an open-source project (

). Additionally, I explored static-site generation using the NextJS framework and de-coupled the data from the code using the Sanity CMS.

The latest design iteration of my portfolio following the Jamstack architecture, statically built using NextJS with content managed through the headless Sanity CMS.

Portfolio

I was approached by George, the client for this project, to produce a subscription platform where GCSE maths students can practise challenging questions to boost their grade. As a maths teacher he wrote many tailor-made questions over time and was looking to build a platform to share his resources with other students, teachers and schools.

Initially, the client attempted at building the website themselves using WiX, but the design was not appealing and usability from a user perspective was limited.

After receiving the requirements and understanding the desired layout of the "questions" page, I began working on a modern design to suit the high-quality content that will be available to users. Crucially, it was important for navigation between topics, sub-topics and questions to be close to each other to allow easy and quick transitioning between different topics.

An admin area was also added to aid the creation of questions. Different features were implemented to help with the management of questions, such us drag-and-drop to change the order of items and a toggle to hide work-in-progress sections of the website.

Each question includes different options to restrict visibility to paying subscribers and to display additional icons from the main screens, such as calculator questions, exam questions and difficulty level. Moreover, the Dropbox API was implemented to better integrate with the client’s workflow, such as linking to video solutions by simply selecting the resource from an existing Dropbox library.

To allow for payment processing, the Stripe platform was decided as the best fit for the client’s needs. The API was implemented in the backend to ensure correct and secure processing, with automated emails sent out once a subscription is successful by registering a webhook. The Stripe Customer portal was also used to allow users to manage their subscription anytime directly from the website.

With this project I was able to apply the skills I learnt over the past year on full stack deployment, with the added benefit of learning email delivery, payment processing and webhooks along the way. More importantly, this project was the key to discover and unlock the full potential of my abilities, feeling more confident on producing robust and reliable code to tackle complex tasks.

Working alongside George was very important to ensure the final product meets his needs and to clear up any ambiguities in his requests. Not only did this shorten development time, but also saved time when it came down to writing code and kept the focus on the most important tasks for the website. Overall, the project was a success and the client is happy with the result:

Founder, Maths Advance

It was my pleasure to have you doing the coding Abdullah. I think it's fair to say it would have never got off the ground without your help.

A subscription platform for GCSE grade students to solve unique, tailor-made challenging maths questions along with video explanations to boost their grade and achieve better results.

Maths Advance

Project Management was an application build as part of the JVM Programming Languages course at University. The aim was to introduce us to programming languages designed to run on the JVM and encourage remote group collaboration during the Coronavirus lockdown.

As the member of the team with the most programming experience, I was selected as the lead developer. Responsibilities included:

Create an initial codebase and maintain the project on GitHub

Overseeing the project, ensuring that tasks were completed on time

Organize regular meetings with my colleagues to schedule tasks for the day/week

Help out whenever someone was struggling, providing pseudocode or fixing bugs

With responsibilities shared amongst us, I began setting up a project to support Java, Kotlin and Scala. To make setting up easier for my peers, I used Maven as the dependency manager.

My task was to produce the critical path finding algorithm in Kotlin and Scala. For the former, an object-oriented approach was used, with the process similar to the one described in 

. The main reason for choosing this implementation is the extra information that it produces: the output of this algorithm can tell which tasks are in the critical path, which tasks can be delayed without affecting the project, and the expected duration of the entire project.

Overall, the algorithm works successfully and is capable of identifying a critical path correctly. During testing I found some issues, which I was able to debug and fix.

In regards to the coursework as a whole, most features work correctly and do have unit tests to ensure nothing breaks when refactoring or adding code. The only exceptions are persistence and the GUI. Regarding persistence, the lack of tests meant we weren’t aware of a minor bug in the code until functionality was implemented into the GUI. More specifically, when creating a new team through the interface, the JSON file would not update automatically. Upon further inspection I found out that the “save()” method was not called when creating a new team object.

Due to the pandemic, we thought it was a good idea to use the git versioning system and host the code on GitHub to allow for easier collaboration and code sharing. Each of us had their own branch, working on a particular aspect of the project, and later we would merge the code into the master branch to combine everyone’s code. I have previous experience with git, so I’m familiar with the concept of committing code regularly with clear, concise commit messages.

However, my colleagues had little to no experience with this, so sometimes they would include multiple changes across a number of files in a single commit. This is something that could be improved in future projects and would be of great benefit in the workplace when working on a large codebase with dedicated members checking merge requests.

Generally speaking, version control did work successfully, and we were able to work on this project remotely, as a group, very well.

A JVM application for project managers to manage projects and teams, keep track of tasks and calculate the critical tasks and the expected duration of a project.

Project Management

"Blog" was an independent exercise developed as part of the 

 challenge. The application allows authenticated users to share links to blog articles, which are stored in a MongoDB database and can be accessed through an Express-based API.

This application was built in a progressive manner to grasp different concepts of React and NodeJS. First, I started with the backend, with basic requests to get and create blogs, and storing them in a MongoDB database. I then implemented some basic tests, such as whether the correct blogs would be returned by the API, using the Jest library. I then implemented the PUT and DELETE requests to edit and delete blogs respectively.

At this stage I had a working API, and it was time to move to the user interface. I started a new React application using "create-react-app". I then focused on displaying bare-bone elements on the screen, using the Axios library to interact with the API and fetching data. For the user authentication, I created a LoginForm component to get the username and password from the user. After performing the POST request to the "/login" endpoint, I store the token in the user’s "localStorage" so that it can be accessed throughout the application. I then used conditional rendering to either display the login form or the form to create a new entry depending on whether the token is present in memory.

Up until now, I’ve been managing most of the states for components in the main App. Although this implementation works fine, it makes the code cluttered and not so easy to read since most of the logic is stored in this single file. I therefore used "redux" to store blogs, notifications and the user authentication token, and moved the state from the App to their respective components. After refactoring the code, it became much easier to read and follow the logic.

At the same time, I was also introduced to end-to-end testing with 

. This is an amazing framework that is easy-to-use and very intuitive, allowing to simulate user interactions with the user interface to test the flow of an application. For example, one of the tests I wrote was about checking if a user can login. So I instructed the test environment to navigate to the application’s address, press the login button, type the username and password in the form and submit the form. It then checks that the string “Hi user!” is displayed, meaning the login was successful.

Finally, I used the Blueprint.js library to improve the user interface. This library is well documented and allowed me to quickly develop a nice looking UI with very little effort.

This project was a great introduction to React and it covered many important aspects of this library. It also covered a new type of testing, end-to-end testing, which I would previously do manually. I used MongoDB to store data persistently through the mongoose library, and I learned about deploying to production using Vercel and also set up a workflow to re-deploy applications with the latest changes whenever a new commit is pushed to the GitHub repository.

A full stack application to save blogs, built to learn React and NodeJS. It features interacting with a MongoDB database, user authentication, testing and continuous integration through Vercel.

Blog list

ChatRoom was part of the Advanced Programming course at University. The objective of the course was to introduce us to Networking, Concurrency and Unit Testing to develop more complex and robust programs.

Network must be peer-to-peer, allowing communication between all members

New members only need to provide an ID, a port to listen to, and port and IP address of an existing member.

The first member to join is the coordinator, and they must be notified about this.

The network must be able to select a new coordinator when the previous coordinator becomes unavailable

I started by creating a simple terminal based application. By asking for an IP address and a port from the user, I was able to establish a communication between two users. At this stage, having identified the ServerSocket as a component that listens for incoming connection requests at all times, I run it in its own thread so to not block the main thread.

I then designed a GUI using Java Swing and ported the functionality over to the new interface. For testing the program, I used the JUnit framework to perform automated tests. Prior to implementing such tests, I would launch a few instances of the program, and ensure that communications were not affected by any changes I would make.

Group formation, connection and communication, where a group should be correctly formed connecting with all members where all members can communicate without any error

Group state maintenance: the state of the group must be maintained correctly. This includes recording of the messages exchanged among members of the group

Coordinator selection: automatically choose the coordinator when the existing coordinator disconnects abnormally.

This coursework taught me how network programs are written, and how multi-threading can be used to increase the efficiency of software. It also shone a light on the difficulties of using Threads, since tests need to be written in such a way to allow threads to complete their task before asserting values.

A Java peer-to-peer chatroom application where people can send messages and communicate with each other in real time using sockets over a network connection.

Chat Room

Note Taking App was part of the Object Oriented Programming module at University. The idea was for students to learn about the features of Object Oriented Programming and implement them into a real-world application.

The requirement was to produce a program that allows students to record notes for lectures, and classify them by module. Students should be able to search notes for keywords and develop coursework for their modules, with the ability to add a list of requirements.

This course also required me to attend three hackathons, to add extra functionality in a timed environment. This included producing a search method, finding the module with the most number of notes, finding the date most notes were written, adding a deadline and alert date to each coursework, and finding coursework by specifying the semester or term week its due in.

Through this project, I learnt the four concepts of Object Oriented Programming: Abstraction, Polymorphism, Inheritance and Encapsulation. When used correctly, they can help to decompose a complex problem into smaller, more manageable problems, with focus on objects and code reusability.

Note taking app is an application built with Java that allows students to record notes for their lectures on a laptop and classify them by module.

Note Taking App

I was approached by the client, EasyFX, with a brief involving the renovation of the branding as well as a website to advertise their trading packages.

Starting from the original logo and the brief, I begun to design the new logo. After numerous iterations, involving suggestions and feedback from the client, the design was of satisfaction of the client, and I was able to proceed on the website design.

The client sent me some examples of designs he liked, and as such I was able to collect common design features and develop a website based on those elements. However, one week later the client changed the specification, requiring me to restart the development from scratch. I was sent new example websites, and the development took two weeks, including testing, optimization, and iterations based on client feedback. I then setup the domain name, hosting, custom email address and configure settings to prevent attacks on the website.

The website met all requirements, and the website went live soon afterwards at the web address 

Through this project, I strengthened my CSS and JavaScript skills, learning new styling techniques and JavaScript methods. I also learnt how important it is to keep a constant communication with the client to ensure the client needs and expectations are met, as well as to be prepared for unexpected changes.

I was hired as a freelance web designer for the Forex trading company EasyFX. Working together with the client, I successfully designed a logo and developed a website meeting their specific requirements.

EasyFX

As part of Fujitsu Operation Innovation, my team and I identified integration as being an issue across a range of sectors. Having had experience with Augmented Reality before, we decided to approach the problem by producing an AR app.

PointAR is a prototype AR app that can be used on the Fujitsu AR Headset, but also compatible with BYOD devices, capable of scanning the surroundings and detect signage, triggering visual, 3D animations to be displayed on-screen. The app includes a translation feature, where the user selects their preferred language and the sign would automatically be translated so foreign users can understand instructions more easily and feel more integrated with the rest of the team.

Our solution also addresses the uptake of BYOD in schools and businesses. This would translate into students and employees feeling more engaged by working with their device. Schools and employers could also improve their induction process by using PointAR by receiving a response from the app itself when the student/employee has reviewed all the signs.

I was the lead coordinator and programmer for this project. My role consisted in distributing responsibilities amongst my team, ensuring targets were met on time, as well as coding the app to detect each sign, display the correct animations and translations, and to build the app ready for use on Android devices.

As part of Fujitsu Operation Innovation 2018, my team and I identified a problem found in a number of sectors: integration. The solution? Augmented Reality, BYOD and Fujitsu Technology.

PointAR

I’ve was offered an internship opportunity at 

, a leading AR and VR company in London. Throughout my stay, I had the opportunity to work on a personal project aimed to improve my 3D modelling skills with the guidance of the lead 3D artist.

The project consisted in creating an AR app for mobile devices, inspired by an exhibition of 

, where people could use an app on their smartphones to see the animals in augmented reality.

During the development of the game level, I decided to use 

 as the AR platform. This plugin enabled me to quickly prototype AR apps by just importing two Prefabs (an AR camera and an imageTarget for the AR marker), and set a custom marker. Also, I used the CrossPlatformInput package to enable the player to control the animals’ movement.

Overall, I had to code two C# scripts: one is responsible for moving the animal in the joystick’s direction while playing the walk cycle animation (otherwise play the idle animation); the second script spawns an animal when its button is pressed on the UI.

Finally, I packaged the Unity scene for Android devices, and run the app on my device to check for correct operation and any unexpected behaviour. I then published the app on the Google Play Store.

An augmented reality Unity project I developed during my internship at Inition to improve my skills in 3DS Max and Unity

Projects