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.