Build Your library looking for the best book in BooK Review

Abdulrhman Al-Qassas

# 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.”


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

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