View Figma UI/UX Design

Brokr is a comprehensive web application for searching and booking hotels, cars, flights, and attractions—drawing inspiration from leading travel platforms. The project features a modern, responsive UI, real-time search, advanced filtering, and interactive maps, providing a seamless travel booking experience.

• Unified search and booking for hotels, cars, flights, and attractions
• Real-time search with elastic search and debounce
• Advanced filtering and sorting options
• Interactive maps (TomTom integration)
• User reviews and ratings
• Responsive, modern UI (Angular, NgPrime, Tailwind CSS)
• CI/CD with GitHub Actions
• Deployed on Vercel

• Figma Design: Brokr Traveling UI/UX

• Angular – Frontend framework
• RxJS – Reactive programming for async operations
• NgRx – State management
• NgPrime – UI component library
• Tailwind CSS – Utility-first CSS framework
• TomTom Maps – Map integration
• Booking.com API – Real-world data for hotels, cars, flights, and attractions
• ESLint, Prettier, Husky – Code quality and formatting

• src/app/components/ – Reusable UI components (cars, stays, flights, attractions, etc.)
• src/app/pages/ – Main application pages
• src/app/core/ – Core modules, services, interceptors
• src/app/shared/ – Shared utilities, models, interfaces
• src/app/store/ – State management (NgRx)
• src/assets/ – Static assets (images, icons, fonts)

• Landing: Introduction to the application and its capabilities.
• Cars: Search and book rental cars by city, date, and time. View results with pagination and map integration. Navigate to detailed car information.
• Car Details: Detailed information about a selected car and dealer, including photos and user reviews.
• Stays: Search and book hotels and homes by city and date. Filter by guests, rooms, price, and sort by popularity, distance, rating, or price. Pagination and map integration included.
• Stay Details: Detailed information about a selected hotel or home, with room photos and paginated user reviews.
• Attractions: Search and book tickets for attractions and activities by city. Sort by trend, rating, or price. Pagination and detailed attraction information.
• Attraction Details: Detailed information about a selected attraction, with photos and user reviews.
• Flights: Search and book flights by departure/arrival city and date. Filter by seat count and class. Sort by duration or price. Pagination and detailed flight information.
• Flight Details: Detailed information about a selected flight and carrier.
• Not Found: Custom 404 page for undefined routes.

• Node.js (v14 or higher recommended)
• npm

npm install

npm start

npm run lint
npm run format

npm run build

This project is for educational and demonstration purposes only. Not for commercial use.