Abdulrhman Al-Qassas

I build scalable React and TypeScript interfaces for GIS products, dashboards, mobile-backed services, and data-heavy applications. My work spans Penta-b, Lucidea, and EngTechno, with a focus on performance, maintainable components, and practical user experience.

Abdulrhman Al-Qassas - Frontend Developer

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

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

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

TravelSync

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

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

Blockchain Vaccine Verification System

React, GIS, blockchain, and product interfaces

Selected work

## Introduction

Front-end development is not only about making a page look good. A good interface should be clear, responsive, fast, accessible, and simple enough for another developer to understand later.

In my work with React, Vite, Tailwind CSS, React Query, Redux, and OpenLayers, I have learned that best practices are not abstract rules. They are small habits that prevent real problems: slow pages, duplicated logic, confusing state, broken mobile layouts, and code that becomes hard to change.

## Start with the User Flow

Before building components, I like to understand what the user is trying to do.

For a book review project, the important flow might be searching, browsing, and reading book details. For a geospatial project, the important flow might be finding a location, understanding map data, and taking an action. For a verification system, the important flow might be trust, clarity, and safe handling of information.

When the user flow is clear, the interface becomes easier to design and the code becomes easier to organize.

## Keep Components Focused

A component should have one clear responsibility. If one component handles layout, data fetching, form state, map setup, filtering, and styling, it becomes difficult to reuse or debug.

I prefer this structure:

```txt
components/
  ProjectCard.tsx
  SearchInput.tsx
  EmptyState.tsx
  map/
    OpenLayersMap.tsx
    markerLayer.ts
    mapStyles.ts
```

Small components make the project easier to scan. They also make it easier to improve the UI without touching business logic.

## Use the Right State Tool

Not every piece of data belongs in Redux. Not every API response belongs in local state.

My general rule is:

- Use local state for UI details like opened menus, form inputs, and active tabs.
- Use React Query for server data, loading states, caching, and refetching.
- Use Redux only for state that many parts of the app truly need to share.
- Use refs for non-React objects like an OpenLayers map instance.

This keeps state predictable. It also avoids unnecessary re-renders and duplicated API logic.

## Build Responsive Layouts from the Beginning

Responsive design should not be a final step. It should be part of the first implementation.

With Tailwind CSS, I usually start with the mobile layout, then add larger breakpoints only when the design needs them.

```tsx
<section className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
  {projects.map((project) => (
    <ProjectCard key={project.title} project={project} />
  ))}
</section>
```

A simple grid like this is easier to maintain than many custom media queries.

## Make Loading and Empty States Real

A polished project handles more than the happy path. Users should know what is happening when data is loading, when a search returns nothing, or when an API request fails.

For example, a book library should show:

- A loading state while books are being fetched.
- An empty state when no books match the search.
- A clear error state if the request fails.

These details make the application feel reliable.

## Write Clear Data Boundaries

Frontend code becomes cleaner when data is transformed before it reaches the UI.

Instead of formatting dates, fixing missing fields, and building labels inside every component, I prefer small helper functions:

```ts
export function formatProjectDate(date: string) {
  return new Intl.DateTimeFormat('en', {
    month: 'short',
    year: 'numeric'
  }).format(new Date(date));
}
```

This keeps components focused on rendering.

## Treat Accessibility as Part of Quality

Good UI should work with a keyboard, readable contrast, clear labels, and semantic HTML.

Some simple checks I use:

- Buttons are buttons, not clickable divs.
- Form inputs have labels, even when the visual label is hidden.
- Images have meaningful alt text when they communicate content.
- Focus states are visible.
- Text remains readable on mobile screens.

Accessibility is not separate from design. It is part of building a professional interface.

## Keep Map Interfaces Organized

Geospatial interfaces can become complex quickly. A map may include tile layers, markers, popups, search, filters, selected features, and drawing tools.

The best practice is to separate map concerns:

- Base layer setup.
- Marker or vector layer setup.
- Map interactions.
- UI controls outside the map.
- Data fetching outside the map rendering code.

This makes OpenLayers easier to use inside React and prevents the map component from becoming too large.

## Test the Build, Not Only the Browser

A page can look fine during development and still fail during production build. Static generation, TypeScript checks, imports, path handling, and content parsing can expose issues late.

That is why I like to run:

```bash
pnpm run build
```

before considering a change complete. A successful build gives confidence that the project can be deployed.

## Conclusion

Best practices are not about making code look complicated. They are about making the next change easier.

For me, good front-end work means building interfaces that feel smooth to users and stay understandable for developers. Whether the project is a React portfolio, a book review app, a blockchain verification system, or an OpenLayers map, the same principles apply: clear structure, focused components, thoughtful state, responsive design, and careful attention to real user workflows.


Front-End Best Practices I Use in Real Projects

## Introduction

Maps are one of the most useful interfaces in modern web applications. They turn location data into something people can explore, compare, and understand quickly. For a React developer working with geospatial products, OpenLayers is a strong choice because it gives you control over layers, projections, vector data, markers, interactions, and external map services.

This post walks through a clean way to build an interactive map with React and OpenLayers. The goal is not only to show a map, but to structure it so it can grow into a real application.

## Why OpenLayers?

OpenLayers is an open-source JavaScript library for rendering maps in the browser. It can display tile layers, vector layers, markers, GeoJSON, WMS, WMTS, and custom sources.

I like OpenLayers when the project needs more than a simple embedded map. It gives you enough control to build dashboards, location search, drawing tools, custom markers, route previews, and GIS-style interfaces.

## Core Concepts

Before writing React code, it helps to understand the three main pieces.

### Map

The map is the main OpenLayers object. It connects the HTML element, layers, view, and interactions together.

### View

The view controls the center, zoom level, and projection. Most web maps use `EPSG:3857`, so coordinates usually need to be converted with `fromLonLat`.

### Layers

Layers define what the user sees. A map can have a base tile layer, vector layers for features, marker layers, and image layers. Keeping layers separate makes the map easier to maintain.

## Install OpenLayers

```bash
npm install ol
```

If your project uses pnpm:

```bash
pnpm add ol
```

## Create a Reusable Map Component

The most important React rule is simple: create the OpenLayers map once, then update it intentionally. Do not recreate the map on every render.

```tsx
import { useEffect, useRef } from 'react';
import Map from 'ol/Map';
import View from 'ol/View';
import TileLayer from 'ol/layer/Tile';
import OSM from 'ol/source/OSM';
import { fromLonLat } from 'ol/proj';
import 'ol/ol.css';

export function OpenLayersMap() {
  const mapElementRef = useRef<HTMLDivElement | null>(null);
  const mapRef = useRef<Map | null>(null);

  useEffect(() => {
    if (!mapElementRef.current || mapRef.current) return;

    mapRef.current = new Map({
      target: mapElementRef.current,
      layers: [
        new TileLayer({
          source: new OSM()
        })
      ],
      view: new View({
        center: fromLonLat([31.2357, 30.0444]),
        zoom: 10
      })
    });

    return () => {
      mapRef.current?.setTarget(undefined);
      mapRef.current = null;
    };
  }, []);

  return <div ref={mapElementRef} style={{ width: '100%', height: 480 }} />;
}
```

This component is small, but it already has the right foundation: the DOM target is stored in a ref, the map instance is stored in a ref, and cleanup happens when the component unmounts.

## Add Markers with a Vector Layer

Markers should usually live in a vector layer. That keeps marker data separate from the base map and makes it easier to add selection, hover states, clustering, and styling later.

```tsx
import Feature from 'ol/Feature';
import Point from 'ol/geom/Point';
import VectorLayer from 'ol/layer/Vector';
import VectorSource from 'ol/source/Vector';
import { Circle, Fill, Stroke, Style } from 'ol/style';
import { fromLonLat } from 'ol/proj';

const marker = new Feature({
  geometry: new Point(fromLonLat([31.2357, 30.0444])),
  name: 'Cairo'
});

marker.setStyle(
  new Style({
    image: new Circle({
      radius: 7,
      fill: new Fill({ color: '#2563eb' }),
      stroke: new Stroke({ color: '#ffffff', width: 2 })
    })
  })
);

const markerLayer = new VectorLayer({
  source: new VectorSource({
    features: [marker]
  })
});
```

You can add this `markerLayer` to the `layers` array when creating the map, or add it later with `map.addLayer(markerLayer)`.

## Keep React State and Map State Separate

OpenLayers has its own state system. React also has state. Problems start when both try to control the same thing too often.

A good pattern is:

- Store the map object in a ref.
- Store UI state in React.
- Use effects to sync deliberate changes from React into OpenLayers.
- Listen to OpenLayers events only when you need user-driven updates.

For example, if you want React buttons to change zoom:

```tsx
function zoomIn() {
  const view = mapRef.current?.getView();
  const zoom = view?.getZoom() ?? 0;
  view?.animate({ zoom: zoom + 1, duration: 200 });
}
```

This keeps the map responsive without forcing React to re-render the whole map.

## Suggested File Structure

For a real project, I prefer separating map setup from data and UI.

```txt
src/
  components/
    map/
      OpenLayersMap.tsx
      mapStyles.ts
      markerLayer.ts
      useMapInteractions.ts
  data/
    locations.ts
```

This makes the map easier to test and easier to extend when the project grows.

## Best Practices

Use `useRef` for the map instance. The map is not normal React state and should not trigger re-renders.

Clean up with `setTarget(undefined)`. This prevents memory leaks when moving between pages.

Normalize coordinates early. Keep longitude and latitude clear in your data, then convert them at the map boundary with `fromLonLat`.

Separate layers by responsibility. Base map, markers, drawings, selected features, and overlays should not all live in one layer.

Avoid putting too much logic in one component. A map can become complex quickly, so split styling, layers, interactions, and data loading into small modules.

## Conclusion

React and OpenLayers work very well together when each tool has a clear job. React should manage the page, controls, and data flow. OpenLayers should manage the map rendering, layers, and geospatial interactions.

That structure gives you a map that is smooth for users and maintainable for developers. It is the same mindset I use when building front-end experiences: start with a simple working foundation, then keep every new feature organized enough to grow.
