Projects — Zubair Idris Aweda

IslamicHub is a comprehensive, open-source Islamic education and utility platform designed to help users learn and live the Five Pillars of Islam. It combines in-depth scholarly guides grounded in the Qur'an and Hadith with high-utility modern tools like a Zakat calculator, prayer time engine, and inheritance (Fara'id) calculator.

IslamicHub is a free Islamic education and tools platform built for Muslims seeking accurate, well-sourced religious guidance online. The problem: most Islamic sites are either overly simplified, source-poor, or built without real attention to the differences between schools of thought. IslamicHub treats religious accuracy as a hard requirement, not an afterthought.

Every feature — from the prayer times calculation to the inheritance calculator — is grounded in Qur'an, Hadith, and cross-referenced with all four major schools of Islamic jurisprudence (Hanafi, Maliki, Shafi'i, Hanbali). The platform is co-founded with Yusuf Saif and is actively used and maintained.

Role

Co-founder & Lead Engineer

Timeline

2026 – Present

Stack

Vue 3 · Vite · Pinia

Core Features

Accurate prayer times with Qibla direction finder
Zakat calculator with live gold & silver prices
Islamic inheritance calculator
Live API-driven Hijri calendar
Five Pillars guides grounded in primary sources
Cross-school jurisprudence references throughout
Extensive Hadith library

Engineering Decisions

Migrated from the original design in HTML, CSS, and JavaScript to Vue 3 Composition API
Pinia for predictable, modular state management
Live external API integration for financial data (Zakat)
Structured content architecture for multi-madhab content

Technologies

Vue 3 JavaScript Pinia Vite Vue Router REST APIs Responsive HTML & CSS

"TablePlus meets Cursor — an AI-native desktop database client for developers."

Kueri

Desktop · AI · In Development

Most database clients are UI wrappers around SQL. Kueri is an IDE-style tool — you can write queries the traditional way, or describe what you want in plain English and let the AI generate and explain the SQL. It's positioned at the intersection of developer tooling and AI assistance, for teams that already know SQL but want to move faster.

Built during a focused 10-day pivot from concept to MVP. Currently in active development, with a pre-seed pitch deck, AI cost-reduction roadmap, and launch strategy in progress. Supports PostgreSQL, MySQL, MongoDB, and SQLite.

Role

Solo founder & Engineer

Timeline

2025 – Present

Stack

Electron · Vue 3 · Tailwind · Gemini

Core Features (MVP)

Natural language → SQL query generation
AI query explanation for onboarding & learning
Multi-database support (PG, MySQL, MongoDB, SQLite)
IDE-style interface with schema explorer
Connection management with encrypted credentials
Query history and saved snippets

Key Engineering Challenges

AI token cost optimisation across query volumes
Cross-database query normalisation layer
Electron IPC architecture for secure DB connections
Context-aware prompt engineering for schema-aware AI

Technologies

Electron Vue 3 Google Gemini Tailwind CSS PostgreSQL MySQL MongoDB SQLite Node.js

Why this matters to a recruiter

Building a startup solo demonstrates product thinking, architecture ownership, AI integration experience, and the ability to ship — not just code. Kueri is a live proof of all four.

"A zero-dependency library for Roman numeral operations — shipped with a full interactive docs playground."

toRoman is a lightweight TypeScript library for converting between Arabic integers and Roman numerals, validating Roman numeral strings, and performing arithmetic entirely in Roman notation. What started as a focused utility grew into a full-featured package with a rich API and a custom-built interactive documentation site.

The library handles edge cases the obvious implementation misses — invalid character sequences, repetition limits per Roman character, subtractive notation rules — all enforced with clear, typed error messages. The accompanying docs playground lets users try every API method in the browser without setup.

Role

Author & Maintainer

Distribution

npm · CDN (unpkg)

Stack

TypeScript · Zero deps

API Surface

toRoman(n) — integer → Roman
fromRoman(s) — Roman → integer
isRoman(s) — full validation
addRoman / subtractRoman
multiplyRoman / divideRoman
rangeRoman / tableRoman

Technologies

TypeScript npm Vanilla JS Zero dependencies Custom Docs Site

"A BSc dissertation research artefact — two parallel banking apps, one deliberately broken, one hardened, built to empirically compare OWASP vulnerability behaviour and mitigation effectiveness."

SecBank A/B

Dissertation · Vue.js · Express · PostgreSQL

OWASP SecBank is a full-stack banking application built as a research artefact for a BSc Computer Science dissertation. The project addresses a real gap in security research: most discussions of OWASP vulnerabilities are theoretical. This closes that gap with a live, working system.

The methodology is A/B: two fully functional parallel builds of the same banking platform. Version A (Insecure) deliberately incorporates weak authentication, inline SQL queries, insecure design patterns, and missing access controls. Version B (Secure) implements RBAC, parameterised queries, secure session management, and industry best practices throughout. Running them side-by-side enables direct empirical comparison of vulnerability behaviour and the measurable impact of each mitigation. The secure version also served as the basis of a security talk at DevFest London 2023.

Role

Author, Researcher & Speaker

Context

BSc Dissertation + DevFest London 2023

Stack

Vue.js · Express.js · PostgreSQL

A/B Methodology — What's Compared

Insecure: Inline SQL → SQL Injection risk
Secure: Parameterised queries → injection prevented
Insecure: Weak auth, no RBAC → broken access control
Secure: RBAC + secure session management
Insecure: No input validation → XSS & injection vectors
Secure: Server-side validation & output encoding
Insecure: Plaintext credentials, insecure storage
Secure: Hashed passwords, secure token handling

Full Feature Set (Both Versions)

User registration, login, logout with token auth
Money transfer with recipient account lookup
Transaction history with full audit trail
Profile management including avatar upload/view
Admin dashboard: all users, transactions, system logs
DB schemas: Users, Accounts, Transactions, Logs, Tokens

Engineering & Research Notes

SonarQube integrated for static code quality analysis
GitHub Actions CI/CD pipeline via .github/workflows
Postman collection published for full API documentation
Swagger UI served at /api-docs for interactive exploration
Deployed to both Netlify (frontend) and Render (backend)

Technologies

Vue.js Express.js PostgreSQL JavaScript SonarQube GitHub Actions Swagger / OpenAPI Postman Netlify Render OWASP Top 10

Why this matters to a recruiter

This isn't just "I built a vulnerable app for a talk." It's a dissertation-grade research artefact with a rigorous A/B methodology, CI/CD, static analysis, published API docs, and two live deployments. It demonstrates security knowledge at the implementation level — not just awareness — and the ability to conduct and communicate original research.

"A full-stack academic search engine over an arXiv dataset — built for a Big Data module."

ScholarSearch is a research paper discovery tool built as a university project for a Big Data module (6CS030). The system ingests a large arXiv dataset into Elasticsearch, exposing a fast full-text search API via FastAPI, consumed by a Vue 3 frontend.

The project required not just engineering but academic rigour — including a Literature Review covering information retrieval systems, an IEEE-formatted report, and multiple audit passes to catch bugs including XSS via v-html, pagination edge cases, sort value mismatches, and null pointer crashes.

Role

Lead Engineer & Author

Module

6CS030 — Big Data

Dataset

arXiv research papers

Technical Highlights

Elasticsearch for full-text search at scale
FastAPI backend with pagination & filtering
Vue 3 Composition API frontend
XSS remediation (v-html audit)
arXiv dataset ingestion pipeline
IEEE-formatted academic report

Technologies

Vue 3 FastAPI Elasticsearch Python arXiv Dataset Docker

"An experiment in human-AI co-authorship — building a game with an AI pair programmer."

A fully playable Brick Breaker game built in collaboration with an AI pair-programmer. The project was an intentional exploration of human-AI co-authorship in game development: where does the human add value, where does the AI excel, and what does the handoff look like?

Beyond the game itself, this is a study in prompt engineering, AI output review, and the pragmatics of building software with generative tools — a skill set increasingly relevant across the industry.

Role

Lead + AI co-author

Type

Browser game

Stack

Vanilla JavaScript · Canvas API

Technologies

JavaScript HTML5 Canvas AI-assisted dev

"A GPA/CGPA calculator that supports multiple grading scales — built because the existing ones were terrible."

GPCalc is a GPA and CGPA calculator utility built for students who need to quickly compute grade point averages without wrestling with inflexible tools. It supports different grading scales across institutions and handles the running CGPA calculation across multiple semesters.

Role

Author

Type

Student utility

Users

Students

Technologies

JavaScript HTML/CSS

"A clean, distraction-free todo app — built to explore Vue 2, Vuetify, and the full Vue CLI ecosystem."

ZTodo

Vue 2 · PWA · Live

ZTodo is a todo application built with Vue 2 and Vuetify, deployed as a Progressive Web App. The project was a deliberate exercise in learning the Vue CLI ecosystem end-to-end — from component architecture and Vuex state management, to routing, service workers, and PWA configuration for offline support.

Each todo supports a title and an optional body for additional context, and the interface handles inline editing by clicking an existing item — a small UX detail that keeps the workflow keyboard-friendly and fast. Clean, focused, and ships with zero build warnings.

Role

Author

Deployment

Netlify · PWA

Stack

Vue 2 · Vuetify · Vuex · Vue Router

Features

Create todos with optional detail body
Inline edit by clicking any existing item
Delete individual todos
Completion checkbox state per item
Offline support via service worker (PWA)
Enter key submission for keyboard-first flow

Engineering Notes

Vuex store wired for global state management
Vue Router with history mode and 404 fallback
Service worker registered via register-service-worker
Full PWA manifest with multi-size icon set
Vuetify Material Design component library
ESLint configured with Vue essential rules

Technologies

Vue 2 Vuetify Vuex Vue Router PWA Service Workers Netlify JavaScript Babel

"A full-stack web presence for a Lagos-based charity — with a contact form that saves to MongoDB and sends email notifications in real time."

Be Kind Initiative

Node.js · EJS · MongoDB · Live

Be Kind Initiative is a Lagos-based NGO working to reduce poverty, train youth in leadership and volunteering, and support under-resourced communities across Nigeria. The project needed a public-facing website to expand reach and support grant applications.

Built with Node.js, Express, and EJS templating, the site includes a multi-page layout (Home, About, Contact), a Bootstrap-powered responsive carousel, and a contact form that persists submissions to MongoDB and triggers an email notification to the organisation via Nodemailer — giving the team a real-time inbox alert for every inquiry.

Role

Main Developer

Client

Be Kind Initiative, Lagos

Stack

Node.js · Express · EJS · MongoDB

Features

Multi-page site: Home, About, Contact, 404
Bootstrap 4 responsive carousel on homepage
Contact form with name, email, and message
MongoDB persistence via Mongoose for all submissions
Real-time email alerts to the org via Nodemailer
Custom 404 page with styled error handling

Engineering Notes

Express routing with separate GET/POST handlers
EJS partials (header/footer) for DRY templating
Per-page CSS loaded dynamically via EJS locals
Mongoose schema with timestamps and optional name field
Morgan HTTP request logging in development
Environment config via dotenv for DB URI and port

Technologies

Node.js Express MongoDB Mongoose EJS Nodemailer Bootstrap 4 Morgan dotenv Render

"A full-stack football match tracker with live API sync, AJAX navigation, geolocation filtering, and social comments — graded 100/100."

FootballSite ⚽

Laravel 12 · MySQL · AJAX · 100/100

Built for the 6CC001 Advanced Web Technologies module at the University of Wolverhampton, FootballSite is a dynamic football fixture and fan engagement platform. It integrates a live third-party football data API (API-Football v3), supports AJAX-driven browsing without full page reloads, and uses the browser Geolocation API to surface matches relevant to the user's location. Graded 100/100.

The architecture is deliberately lean — a custom service class centralises all outbound API calls, fixtures are cached in MySQL to avoid redundant requests, and the same controller method serves both full-page loads and AJAX partial updates by detecting $request->ajax() server-side. Lineups and match stats are fetched lazily on first visit and stored as JSON columns, keeping the database write load minimal.

Module

6CC001 Advanced Web Technologies

Grade

100 / 100

Stack

Laravel 12 · MySQL · Alpine.js · API-Football

Core Features

Daily fixture dashboard split into completed & upcoming
Live API sync — refreshes automatically for today/yesterday if stale >10 min
Match detail: starting XIs, substitutes, managers, comparative stat bars
AJAX search with 300ms debounce — no full-page reload on team name filter
AJAX date navigation — prev/next day updates match list in-place via Fetch API
Geolocation "Matches near me" using Browser Geolocation + BigDataCloud reverse geocode
Auth system — register, login, email verification, password reset, account deletion
Social comments per match — authenticated users only, displayed newest-first
Responsive design with collapsible mobile nav, fluid breakpoints
Custom 404 page with football-themed copy

Key Engineering Decisions

FootballApiService — dedicated service class for all API-Football calls; maps status codes to local ENUM
Smart sync: only re-fetches when date is today/yesterday & last sync >10 min old
Lineups & stats lazy-loaded on first match detail visit, cached as JSON columns
updateOrCreate throughout to prevent duplicate records on re-sync
Same controller action serves full-page load and AJAX partial (detects via $request->ajax())
Full PHPUnit test suite — Feature and Unit coverage across Auth, Profile, and core flows

Technologies

PHP 8.2 Laravel 12 MySQL API-Football v3 Blade Templates Alpine.js Tailwind CSS Fetch API (AJAX) Geolocation API Laravel Breeze PHPUnit Vite

Why this matters to a recruiter

100/100 on a module that explicitly required third-party API integration, AJAX-driven RIA behaviour, browser device API usage, and server-side PHP with a database. Every requirement was met and exceeded — and the codebase is clean enough that the marker had nothing to subtract.

"A SaaS JCL validation workbench for mainframe developers — built from scratch as a custom lexer → parser → AST → rule-engine pipeline. No mainframe connection required."

JCLcheck

Node.js · Vue 3 · Lexer/Parser · Live

JCLcheck is a standalone SaaS JCL (Job Control Language) validator built to help mainframe developers learn JCL and catch errors before submitting jobs to a real system. The core insight: you shouldn't need a mainframe connection to validate JCL syntax. The entire validation pipeline — lexing, parsing, AST construction, rule evaluation — runs server-side in Node.js, with every diagnostic carrying a plain-English explanation and a suggested fix.

The workbench UI takes visual cues from classic IBM 3270 terminal aesthetics — including a PF-key action bar (F1 Help / F5 Validate / F9 Sample / F12 Clear) — so that the interface itself doubles as a learning tool for the terminal conventions new mainframe developers need to internalise.

Role

Sole Engineer/Founder

Stack

Node.js · Express · Vue 3 · Vite

Validation Pipeline — What Gets Checked

Lexer: // record format, comment/continuation lines, unterminated quotes, 80-column overflow, in-stream data delimiters
Parser/Structure: statement recognition (JOB, EXEC, DD, PROC, PEND, SET, IF/THEN/ELSE/ENDIF, INCLUDE), unmatched parentheses, IF/ENDIF & PROC/PEND balance
Ordering: JOB must come first; EXEC before its DDs; only one JOB per job stream
DD rules: duplicate ddnames within a step; exactly one data source required (DSN / DUMMY / SYSOUT / instream)
Keywords: every keyword on JOB/EXEC/DD checked against IBM JCL Reference tables — with Levenshtein-distance "did you mean…" typo suggestions
Parameter syntax: DISP dispositions, SPACE quantities, DCB sub-parameters (RECFM/DSORG/LRECL/BLKSIZE), REGION, TIME, DSN qualifier rules
Procedures: in-stream PROC/PEND bodies parsed and validated; EXEC PROC= calls resolved; symbolic &SYM parameters checked against declared defaults; DD overrides matched against procedure DDs

Diagnostic System

Every diagnostic carries { code, severity, line, column, message, suggestion }
Grouped error codes: JCLLxxx lexer · JCLPxxx parser · JCLOxxx ordering · JCLDxxx DD · JCLKxxx keyword · JCLSxxx syntax · JCLRxxx proc resolution
Line-numbered editor with diagnostic gutter markers
Errors panel with code, message, and plain-English fix for every issue
Bundled sample JCL snippets (clean / broken / proc+symbolics)

Architecture

lexer.js — physical lines to logical statements (continuations, comments)
paramTokenizer.js — operand string to positional/keyword params (paren/quote aware)
parser.js — statements to AST (Job/Step/DD/Proc/If), ordering + structural checks
rules/ — modular rule engine: ddRules, paramRules, procRules
keywords.js — keyword/value tables distilled from the IBM JCL Reference
Fixture-based smoke test suite with no external test framework dependency
Vue 3 SPA: Landing, About, and dark 3270-themed Workbench pages

Technologies

Node.js Vue 3 Express Vite Vue Router Custom Lexer AST / Parser Levenshtein Distance JavaScript IBM JCL Reference 3270 UI Design

Why this matters to a recruiter

Writing a hand-crafted lexer, parser, and AST from scratch — without ANTLR or a grammar generator — for a domain-specific language as arcane as IBM JCL is not a beginner task. It demonstrates compiler theory in practice, deep mainframe domain knowledge, a modular rule engine architecture, and the product thinking to wrap it all in a workbench UI that's genuinely useful for real training programmes.

Things I've
Built

IslamicHub

Kueri

toRoman

OWASP SecBank

ScholarSearch

BrickBreaker Challenge

GPCalc

ZTodo

Be Kind Initiative

FootballSite

JCLcheck

Want to talk about
working together?

Things I'veBuilt

IslamicHub

Kueri

toRoman

OWASP SecBank

ScholarSearch

BrickBreaker Challenge

GPCalc

ZTodo

Be Kind Initiative

FootballSite

JCLcheck

Want to talk aboutworking together?

Things I've
Built

Want to talk about
working together?