Overview

NNU Campus Compass is a smart campus navigation application developed with Flutter to support indoor and outdoor navigation at An-Najah National University. The project combines mobile development, GIS concepts, positioning, offline navigation, map technologies, and basic AR guidance to solve a real navigation problem inside the university environment.

Key Features

• Indoor positioning and navigation.
• Outdoor positioning and navigation.
• AI-based smart navigation logic.
• Offline navigation without external hardware.
• Basic AR guidance for indoor and outdoor navigation.
• Arabic and English language support.
• OpenStreetMap and MapTiler map integration.

Real-World Test Videos

Testing demonstrations captured at An-Najah National University campus using standard smartphone sensors, without external hardware, beacons, or additional infrastructure.

Outdoor AR

Outdoor Positioning with AR

GPS-based outdoor positioning with augmented reality overlay for navigation guidance.

Indoor PDR

Indoor Room-to-Room Positioning

PDR-based indoor navigation tracking movement between rooms without GPS.

Indoor AR

Indoor Room-to-Room with AR

Indoor navigation enhanced with AR directional guidance and visual overlays.

Handoff GPS/PDR

Outdoor-to-Indoor Handoff

Seamless transition from GPS positioning to PDR when entering buildings.

Technologies

Overview

NNU Smart Path is a real-time outdoor congestion analytics system developed for the Big Data course. The project simulates campus pathway movement, streams mobility events through Kafka, processes congestion data with Spark Streaming, stores aggregated results in MongoDB, exposes analytics through FastAPI, and visualizes congestion on a web dashboard with live map overlays.

Architecture Diagram

End-to-end pipeline showing simulated outdoor mobility data ingestion, Kafka streaming, Spark processing, MongoDB storage, and FastAPI dashboard visualization.

Demo Video

Demonstration of the real-time congestion pipeline, dashboard behavior, and map overlay updates using simulated outdoor campus mobility data.

Big Data Real-Time Dashboard

NNU Smart Path Demo

Shows the simulator, streaming pipeline, dashboard, and real-time outdoor congestion map overlays.

Key Features

• Outdoor congestion simulation for university campus pathways.
• Kafka-based streaming pipeline for mobility events.
• Spark Streaming processing and aggregation.
• MongoDB storage for processed congestion data.
• FastAPI backend for dashboard data access.
• Web dashboard for monitoring congestion status.
• Map overlays with different colors to represent congestion levels.
• Real-time updates based on simulated movement data.

Impact

The project demonstrates how big data streaming architecture can support campus mobility analysis by transforming simulated movement events into real-time congestion insights displayed through an interactive dashboard and map visualization.

Technologies

Overview

Zajel, But As We Like is a UI/UX redesign case study for An-Najah National University's student portal. The project focused on improving the student-side experience by studying real usability problems, collecting feedback through questionnaires, mapping user flows, creating wireframes, and redesigning important screens with a clearer, more comfortable, and mobile-friendly experience.

Before / After UI Comparison

A side-by-side comparison showing how the redesign improved visual hierarchy, navigation clarity, spacing, readability, and the overall student experience.

Before

After

Trailer Video

A short visual walkthrough presenting the redesigned student portal experience, prototype direction, and main interface improvements.

UI/UX Prototype Redesign

Zajel Redesign Trailer

Highlights the redesigned interface, improved navigation, and student-centered portal experience.

Design Process

• Studied the current Zajel student experience and identified usability pain points.
• Collected student feedback through a questionnaire.
• Mapped user flows and organized the core student journeys.
• Created wireframes to test layout and information structure.
• Designed important student screens with improved hierarchy, spacing, colors, buttons, and typography.
• Built an interactive Figma prototype and published the case study on Behance.

Impact

The redesign demonstrates how UI/UX can improve more than the appearance of a system. It improves the way students understand information, complete tasks, navigate services, and interact with the university portal across desktop and mobile experiences.

Tools & Methods

Overview

Together We Rise Game is a 2D local multiplayer platformer built in Godot 4.4.1. The game is inspired by cooperative puzzle-platformer games, but uses its own seasonal concept with Spring and Winter levels, single-player and local co-op modes, coins, hazards, timer-based challenges, finish-line logic, HUD feedback, audio, and saved high scores.

Gameplay Video

A gameplay demonstration showing movement, level interaction, collectibles, hazards, finish-line logic, and the overall player experience.

Gameplay Godot Co-op

Gameplay Demo

Shows the core platforming loop, seasonal environment, movement, collectibles, hazards, and win/lose interactions.

Gameplay Screenshots

Selected screens from the game showing the environment style, level design, and gameplay interface.

Gameplay Features

• Single-player mode.
• Local two-player co-op mode on a shared screen.
• Spring and Winter levels with different seasonal visuals and mechanics.
• Spikes, pits, kill zones, coins, timer, hearts, and finish-line system.
• In co-op mode, both players must reach the finish line.
• Winter level includes slippery ice behavior for different movement physics.
• Downloadable builds available through the project website.

Technical Features

• Built with Godot 4.4.1 and GDScript.
• Modular scene design using reusable player and gameplay scenes.
• Central game manager for time, score, win/loss state, and game flow.
• Finish-line detection system for single-player and co-op completion logic.
• HUD system for timer, coins, hearts/lives, and end-game feedback.
• Dynamic camera behavior to support the level view.
• High-score save system using Godot local storage.
• Seasonal music and sound effects for jumps, coins, and hazards.

Roadmap

• Versus mode for player-vs-player gameplay.
• AI opponent or bot partner.
• Additional Autumn and Summer levels.
• Enemies, boss fights, and more advanced level progression.
• Online multiplayer and story mode concepts.

What I Learned

This project helped me understand how software engineering concepts apply inside game development, including scene architecture, event-driven logic, player interaction, physics behavior, state management, UI feedback, and how game systems can be designed, tested, and packaged for users.

Technologies

Overview

Gamepad Tester Pro is a browser-based controller diagnostic and testing platform built with HTML, CSS, Vanilla JavaScript, Tailwind CSS, Lucide Icons, and the Browser Gamepad API. It helps users connect controllers and monitor inputs in real time, including buttons, joysticks, triggers, calibration, drift behavior, and vibration support where available.

Interface Screenshots

Selected interface previews showing the diagnostic dashboard and controller testing experience.

Key Features

• Real-time gamepad and controller detection.
• Multi-controller support.
• Live button press visualization.
• Joystick movement and axis tracking.
• Trigger pressure visualization.
• Deadzone and anti-deadzone adjustment.
• Drift detection and neutral calibration.
• Controller brand detection for Xbox, PlayStation, Switch Pro, and Generic HID controllers.
• Live connection status and rescan behavior.
• Extra axis diagnostics for controllers with additional inputs.

Technical Implementation

• Uses the Browser Gamepad API to read connected controller data.
• Uses requestAnimationFrame for real-time input polling and UI updates.
• Detects controller brand from the gamepad ID and maps labels for Xbox, PlayStation, Switch, and generic controllers.
• Implements joystick calibration by storing neutral axis centers.
• Applies deadzone and anti-deadzone calculations to reduce drift and tune stick response.
• Uses conditional vibration logic through vibrationActuator or hapticActuators when supported by the browser and controller.
• Displays honest capability states when gyro or haptics are unavailable instead of showing fake values.

Compatibility Notes

The app supports Xbox, PlayStation, Switch Pro, and Generic HID controllers when exposed through the browser Gamepad API. Vibration and haptic feedback are browser- and device-dependent, so the app checks support before running rumble tests.

What I Learned

This project strengthened my understanding of browser hardware APIs, real-time UI updates, controller input mapping, calibration logic, state management with Vanilla JavaScript, and building a practical diagnostic tool without relying on a frontend framework.

Technologies

Overview

Golobe is a desktop travel booking system developed for the Advanced Programming course at An-Najah National University under the supervision of Dr. Wafa Adham. The application helps travel agents manage flight and hotel bookings through a structured JavaFX interface, MySQL database, MVC architecture, and smart search/filtering workflows.

Key Features

• Flight and hotel booking management.
• Real-time filtering with multiple criteria.
• Dynamic price slider for instant results.
• Trip type selection: one way, round trip, and multi-city.
• Advanced departure time filtering.
• Passenger and guest count management.
• Location-based hotel search and room type filtering.
• Admin dashboard for managing travel booking data.

Technologies

Overview

Medical Gym Management is a React and Firebase web application built to explore how digital tools can reduce paper-based gym operations. The project was inspired by real workflow problems observed while working with Medical Gym in Tubas, where manual member registration, subscription tracking, payment follow-up, and reminders created extra work for the owner.

System Screenshots

Selected screens showing the main owner workflow: registering members, viewing member records, and managing reminder notifications.

Key Features

• Add, edit, view, and delete gym member records.
• Track subscription status and subscription expiry dates.
• Show reminder notifications for subscriptions that need follow-up.
• Track payment status and remaining payment amounts.
• Manage trainer/user-related records.
• Export member data to Excel for offline reporting or backup.
• Firestore-based data storage for member and subscription information.
• Live deployment on Netlify for testing and demonstration.

Current Limitations

The current version is an owner-facing prototype and does not include authentication yet. The next improvement would be adding admin login, protected routes, and stronger role-based access before using it in a real production environment.

Impact

The project demonstrates how a simple web system can improve daily gym operations by organizing data, reducing manual paper tracking, supporting payment follow-up, and giving the owner a clearer view of member subscription status.

What I Learned

This project helped me practice building a practical management workflow using React and Firestore, structuring data for real use cases, handling CRUD operations, designing owner-focused interfaces, exporting data to Excel, and turning an observed business problem into a working software solution.

Technologies

Overview

Together We Rise is a student collaboration platform built with React.js and Firebase. The project focuses on helping students communicate, collaborate, and organize academic interaction through a modern web interface and real-time Firebase-powered features.

Key Features

• Student collaboration spaces.
• Firebase-backed real-time interaction.
• Messaging and communication-focused features.
• Modern responsive React interface.
• Community-based academic collaboration concept.

Technologies