firstName

lastName

email

message

Let’s talk... 💬

Abdulrhman Al-Qassas

Arabic real-estate platform built with Next.js, React, TypeScript, NextAuth, React Query, Tailwind, and multilingual RTL routing.

# Rakan Real Estate

Rakan Real Estate is a modern Arabic real-estate platform focused on property discovery, listing requests, authenticated user flows, and admin-only management routes. I worked on it as a production-style Next.js application with a strong focus on RTL user experience, reusable UI sections, validated forms, and scalable frontend architecture.

The app is built around real estate workflows: users can browse properties, search by filters, view property details, submit property requests, add listings, manage their profile, and access protected dashboard/admin screens based on their role.

## Core Features

1. **Arabic RTL Experience**: Built for Arabic users with localized routes and layout behavior using `next-intl`.
2. **Property Discovery**: Property listing pages for buy, rent, offers, and full property search.
3. **Advanced Search Filters**: Search by type, property type, condition, region, city, district, rooms, bathrooms, price, area, and features.
4. **Property Details**: Dynamic detail pages with metadata for each property.
5. **Property Requests**: Validated request form for users looking for a specific property.
6. **Add Listing Flow**: Structured route for submitting a new real-estate listing.
7. **Authentication**: NextAuth-based login, registration, password reset, OTP verification, and session handling.
8. **Role-Based Routing**: Protected dashboard and admin routes with middleware access checks.
9. **Profile Area**: User profile page with personal data and listing/favorite-style UI.
10. **API Routes**: App Router API endpoints for auth, contact, profile, property search, property request, and listing submission.

## Technologies Used

### Frontend

1. **Next.js 15**
2. **React 19**
3. **TypeScript**
4. **Tailwind CSS**
5. **Radix UI / shadcn-style components**
6. **Lucide React**

### State and Data

1. **TanStack React Query**
2. **Zustand**
3. **React Hook Form**
4. **Zod validation**

### Auth and Routing

1. **NextAuth v5**
2. **JWT sessions**
3. **Role-based middleware**
4. **next-intl localization**

## Technical Work

The project uses the Next.js App Router with route groups under a locale segment. Public pages include the homepage, buy, rent, offers, contact, and property listings. Authenticated routes include request and profile flows. Admin-only routes include dashboard/admin screens.

The property search flow is schema-driven. Filters are validated with Zod, converted into query parameters, fetched through API routes, and cached through React Query. This keeps the UI responsive while keeping request logic isolated from presentation components.

Forms were structured with React Hook Form and shared validation schemas. This made property requests, profile updates, and auth flows easier to maintain and safer to extend.

## UI and UX Focus

The interface was designed around a real-estate browsing journey:

- A full-screen hero with property search tabs.
- Property cards with location, area, plot ID, price, and type data.
- Sections for platform value, property management, electronic services, neighborhoods, and reviews.
- RTL spacing and typography suitable for Arabic content.
- Mobile-friendly layouts for repeated property cards and profile listings.

## Challenges and Solutions

### RTL Layout Consistency

Arabic real-estate interfaces need strong RTL handling across headers, cards, filters, forms, and dashboards. The solution was to make direction and spacing part of the component structure instead of applying one-off fixes.

### Search State

Search filters can become difficult to manage when many fields are involved. I used schema-based defaults, typed filter inputs, and a query builder so the search page stays predictable.

### Protected Routes

The project needed public, authenticated, and admin-only pages. Middleware checks session state and user role before routing, which keeps protected screens from leaking to the wrong users.

### Reusable Sections

The homepage has multiple content sections, so I kept them componentized: hero, about, property cards, why-us, property management, services, neighborhoods, and reviews. This makes the landing page easier to rearrange and maintain.

## Conclusion

Rakan Real Estate shows my ability to build a full frontend product, not only isolated UI components. It combines Next.js, authentication, localization, form validation, data fetching, protected routes, responsive RTL design, and real-estate-specific workflows into one coherent application.


Rakan Real Estate

Bilingual construction portfolio built with React, Vite, TanStack Router, i18next, Three.js, PDF viewing, and project galleries.

AlMimar AlAraby construction portfolio preview

# AlMimar AlAraby

AlMimar AlAraby is a bilingual company portfolio for a general contracting business. The app presents the company, project portfolio, partners, certificates, and contact flow in a polished web experience for Arabic and English users.

The project uses React with Vite and TanStack Router, with internationalization through i18next. It also includes interactive 3D/visual elements using Three.js and React Three Fiber, project galleries, PDF certificate viewing, and parallax-style sections.

## Core Features

1. **Bilingual Experience**: English and Arabic translations with direction-aware styling.
2. **Company Homepage**: Hero sections, brand messaging, featured projects, partners, and contact content.
3. **Project Portfolio**: Large construction project database with categories, locations, metadata, galleries, and project detail routes.
4. **Dynamic Project Routing**: Category and project detail routing through TanStack Router.
5. **Certificate Viewer**: PDF viewing for company certificates and official documents.
6. **3D Brand Elements**: Three.js scenes for logo and visual presentation.
7. **Contact Integration**: EmailJS-powered contact form.
8. **Responsive UI**: Tailwind CSS layouts with RTL support.

## Technologies Used

1. **React**
2. **Vite**
3. **TanStack Router**
4. **i18next / react-i18next**
5. **Tailwind CSS**
6. **Three.js**
7. **React Three Fiber**
8. **React PDF / PDF.js**
9. **EmailJS**
10. **Sass**

## Technical Work

The project data is structured around categories, locations, and metadata such as area, units, stage, cost, scope, owner, developer, designer, consultant, timeline, and start/end dates. This made it possible to render a large project archive without hardcoding every screen.

Routing is handled with TanStack Router. The app includes routes for home, projects, about, certificates, and dynamic category/project detail pages.

The certificate section uses PDF viewer tooling so users can inspect official documents directly inside the site instead of downloading separate files.

## UI and UX Focus

The site needed to feel appropriate for a contracting company: visual, credible, and easy to browse. I focused on:

- Clear project cards and detail pages.
- Strong bilingual support.
- Visual galleries for construction work.
- Certificate access for trust and compliance.
- Partner and company sections that support business credibility.

## Challenges and Solutions

### Large Project Dataset

The portfolio includes many projects across residential, commercial, infrastructure, roads, and healthcare categories. I kept the project data structured and reusable so filtering and detail pages could share one source of truth.

### Arabic and English Support

Arabic content requires RTL layout behavior. The project combines translation keys with direction-aware styling utilities so the same interface can serve both languages cleanly.

### Rich Media

The app includes images, PDFs, parallax sections, and 3D scenes. I kept these responsibilities separated into components so the landing pages stay maintainable.

## Conclusion

AlMimar AlAraby shows my ability to build a content-rich company website with bilingual UX, structured project data, interactive visuals, and document viewing. It combines frontend engineering with business presentation needs for a real contracting company.


AlMimar AlAraby construction project image

AlMimar AlAraby

Reservation management platform for travel services with admin/user routes, bookings, agencies, finance, visa flows, reports, QR codes, and i18n.

TravelSync reservation management platform preview

# TravelSync

TravelSync is a reservation management web app for travel services. It supports admin and user workflows for agencies, services, reservations, finance, visa applications, packages, and reporting.

The project is built with React, Vite, React Router, Tailwind, NextUI, i18next, Axios, Formik, Yup, ApexCharts, jsPDF, QR code generation, and role-based route structure.

## Core Features

1. **Admin Dashboard**: Charts, cards, tables, and operational views for monitoring travel activity.
2. **Agency Management**: Add, edit, and list travel agencies.
3. **User Management**: Admin screens for creating and editing users.
4. **Service Management**: CRUD-style flows for hotels, rooms, flights, safari, cruises, transportation, and packages.
5. **Reservation Flow**: User reservation pages and admin reservation review pages.
6. **Visa Management**: Visa application, required visa, ready visa, and reservation flows.
7. **Finance Module**: Admin finance views, accounts, user balances, transactions, and user account details.
8. **Reports**: Reservation report generation with jsPDF and auto-table.
9. **QR Codes**: QR code generation and download for shareable service or reservation links.
10. **Internationalization**: Arabic/English language support with automatic document direction changes.

## Technologies Used

### Frontend

1. **React**
2. **Vite**
3. **React Router**
4. **Tailwind CSS**
5. **NextUI**
6. **Framer Motion**
7. **React Icons**

### Forms, Data, and Reports

1. **Axios**
2. **Formik**
3. **Yup**
4. **ApexCharts**
5. **jsPDF**
6. **jspdf-autotable**
7. **html2canvas**
8. **html-to-image**
9. **react-qr-code**

### Internationalization and Auth

1. **i18next**
2. **react-i18next**
3. **js-cookie**
4. **Token-based auth helpers**
5. **Role-based route organization**

## Technical Work

The app is organized into feature modules: auth, dashboard, agencies, users, services, reservation, visa, finance, package, and core layout. This structure keeps large workflows separate and makes it easier to reason about admin and user functionality.

Routing is split into admin routes, user routes, and shared routes. Admin screens include dashboard, agencies, users, services, reservations, finance, and accounts. User screens include service browsing, reservation flows, finance, visa reservations, package requests, and reservation details.

The reporting flow fetches reservation data and generates a PDF table using jsPDF and `jspdf-autotable`. The QR code component creates downloadable QR images using `react-qr-code` and `html-to-image`.

## UI and UX Focus

TravelSync is an operational dashboard, so the interface needs to support repeated daily work. I focused on:

- Clear navigation through a sidebar/layout shell.
- Tables with action controls for admin workflows.
- Forms for adding and editing services, users, agencies, rooms, flights, and packages.
- Status badges and action components for reservation decisions.
- Arabic/English direction switching.
- Fast feedback through toast notifications and loading states.

## Challenges and Solutions

### Large Feature Surface

The app includes many domains: agencies, users, services, reservations, finance, visa, and packages. I kept the source organized by feature module so each workflow owns its pages, handlers, and components.

### Admin and User Workflows

The same system serves admins and customers. Splitting route arrays into admin, user, and shared groups made access patterns clear and easier to maintain.

### Reporting and Shareable Output

Travel operations often need exported confirmations and reports. PDF generation and QR code download support made the app more useful beyond simple screen-based CRUD.

## Conclusion

TravelSync demonstrates my experience building a broad business dashboard with complex routing, forms, role-based workflows, data tables, finance views, reservation flows, reports, QR tooling, and multilingual support.


TravelSync reservation management platform image

TravelSync

Build Your library looking for the best book in BooK Review

# Book Review Website

## Project Overview

- **Project Name**: Book Review Website
- **Technologies Used**: React, Tailwind CSS, React Query, Redux

## Features

1. **Responsive Design**: The website is fully responsive, ensuring a seamless experience across all devices.
2. **Search Functionality**: Users can search for books by author or title using the search bar.
3. **Featured Books**: Highlight popular books like "Romeo," "Moby Dick," and "Pride" on the homepage.
4. **Promotional Banner**: An eye-catching banner that promotes special offers, such as "Buy two selected books and get one for free!"
5. **Navigation**: Easy-to-use navigation links for Home, Bestseller, New York Review, and Blog sections.

## Technical Details

- **React**: Utilized for building the user interface.
- **Tailwind CSS**: Used for styling, ensuring a modern and clean design.
- **React Query**: For efficient data fetching and state management.
- **Redux**: To manage the overall state of the application.

## Challenges and Solutions

- **State Management**: Implemented Redux to handle complex state management efficiently.
- **Responsive Design**: Used Tailwind CSS to ensure the website looks great on all devices.
- **Data Fetching**: Leveraged React Query for smooth and efficient data fetching.

## Conclusion

This project showcases the ability to build a modern, responsive web application using popular frontend technologies. It demonstrates my skills in UI/UX design, state management, and efficient data handling

> “Everybody should learn to program a computer, because it teaches you how to think.”


BooK Review and library

Senior project that used blockchain validation to secure vaccine records, track 15M+ vaccines, and improve data access time by 60%.

Blockchain Vaccine Verification System thumbnail

# Blockchain Vaccine Verification System

This software system is a web app built on blockchain technology to help users and governments check vaccine status with stronger data authenticity. It was my senior project and won 1st place. The system was designed to support secure validation for vaccine records, track 15M+ vaccines, and improve data access time by 60%.

Vaccine verification is critical to any country’s ability to control the course of the pandemic. A reliable, secure, and accurate verification system gives governments, businesses, schools, and other institutions the ability to assess the safety of indoor and outdoor gatherings and provides real-time statistics on vaccinated populations. Although many countries have developed their own vaccine verification systems, often evolving from previous contact tracing apps, creating a reliable, secure, and accurate system remains a challenge. This is partly due to data storage and retrieval protocols. Another major obstacle is information sharing, especially when considering the importance of vaccine verification systems being accepted across domestic and international borders.

Dr. Tom Frieden, the director of the Centers for Disease Control and Prevention from 2009 to 2017, voiced concerns about the long-term difficulties of having multiple Covid-19 vaccination verification systems. He highlighted issues with user interfaces, validation, data storage, retrieval processes, and security protocols, which make it difficult to quickly and securely verify vaccination status. To address these challenges, he advocates for five essential requirements:

1. **Accuracy**: Utilize a computerized immunization information system, an online record of vaccinations received by people.
2. **Security and Privacy**: Implement proper assurances and safeguards to ensure the security and privacy of everyone’s personal data.
3. **Alternative Forms of Identity**: Allow options to use other forms of identity for unforeseen circumstances, such as paper vaccination records with additional personal verification, like a photo ID.
4. **Focused Use**: The system must only verify vaccination records and avoid adding information about previous tests and results to prevent data clustering.
5. **Real-Time Accessibility**: Ensure the system is accessible in real-time, such as when people are going through airport security.

Blockchain technology provides a practical solution to the challenges of vaccine verification and helps meet the requirements Frieden describes. Due to the decentralized and encrypted nature of blockchain technology, information stored on the blockchain ledger is extremely tough to tamper with, addressing the crucial requirement of ensuring the security and privacy of personal data.

## Technologies Used

### Frontend

1. **React**
2. **Axios**
3. **REST APIs**

### Backend

1. **Node.js**
2. **Python**
3. **Django**
4. **SQLite**

### Blockchain

1. **Blockchain validation**
2. **Ethereum**
3. **Ganache**
4. **Metamask**

## Challenges and Solutions

### Challenges

1. **Data Security and Privacy**: Ensuring the security and privacy of personal health data is paramount. The challenge lies in protecting sensitive information from unauthorized access and breaches.
2. **Interoperability**: Integrating the system with various existing healthcare databases and ensuring compatibility across different platforms and jurisdictions.
3. **User Adoption**: Encouraging users to trust and adopt the new system, especially when dealing with sensitive health information.
4. **Real-Time Data Access**: Providing real-time access to vaccination data while maintaining system performance and reliability.
5. **Scalability**: Ensuring the system can handle a large number of users and transactions, especially during peak times like travel seasons or public health emergencies.

### Solutions

1. **Data Security and Privacy**: Implemented blockchain technology to ensure data is encrypted and decentralized, making it extremely difficult to tamper with. Additionally, used secure authentication methods and regular security audits.
2. **Interoperability**: Developed APIs and used standardized data formats to facilitate seamless integration with existing healthcare systems and databases.
3. **User Adoption**: Focused on creating a user-friendly interface and provided clear instructions and support to help users understand and trust the system. Conducted awareness campaigns to highlight the benefits of the system.
4. **Real-Time Data Access**: Utilized efficient data retrieval algorithms and optimized the backend infrastructure to ensure quick and reliable access to data.
5. **Scalability**: Designed the system architecture to be scalable, using cloud services and load balancing techniques to handle increased traffic and ensure consistent performance.

## Conclusion

The Blockchain Vaccine Verification System demonstrates how secure validation, thoughtful user experience, and reliable data access can solve a real public-sector problem. It also represents my early focus on building practical applications that combine frontend engineering with secure backend and data workflows.

## Collaboration

This project was developed in collaboration with backend developer [Mohamed Reda](https://www.linkedin.com/in/muhammad-reda264/).


Blockchain Vaccine Verification System project image

Projects

Rakan Real Estate

AlMimar AlAraby

TravelSync

BooK Review and library

Blockchain Vaccine Verification System

Let’s talk... 💬