A modern and responsive travel discovery web application that helps users explore destinations worldwide using live weather data, interactive maps, destination information, travel tips, and global search.
Excursion Explorer is a modern front-end travel application designed to help users discover destinations around the world through real-time information and interactive exploration.
The application combines multiple third-party APIs to provide live weather, local time, country information, nearby attractions, destination summaries, interactive maps, and personalized travel recommendations through a modern, responsive interface.
The project evolved from a simple featured-destinations page into a modular travel explorer supporting worldwide destination search, dynamic content updates, favorites management, responsive layouts, and reusable JavaScript modules.
Excursion Explorer was built to strengthen my front-end development skills by creating a real-world application that integrates multiple APIs, asynchronous JavaScript, interactive maps, and responsive UI design. The project demonstrates how modular architecture and reusable components can be combined to deliver a polished user experience.
- Built a fully responsive travel discovery web application
- Implemented global destination search using OpenStreetMap geocoding
- Integrated multiple external APIs to display live travel information
- Added interactive destination maps using Leaflet and OpenStreetMap
- Secured third-party API keys using domain-restricted access
- Developed modular JavaScript architecture using ES6 modules
- Implemented destination favorites with Local Storage
- Created reusable travel recommendation components
- Added responsive dark and light themes
- Improved accessibility using semantic HTML and ARIA attributes
- Managed development using Git branching and feature-based workflows
- Deployed using GitHub Pages
Explore the live website here:
👉 https://amirabenameur3.github.io/Excursion-explorer/
Deployed with GitHub Pages
- Featured destinations
- Global destination search
- Destination summaries
- Interactive destination cards
- Destination modal
- Recently viewed destinations
- Favorite destinations
- Real-time weather
- Local time
- Country information
- Interactive maps
- Nearby attractions
- Dynamic travel tips
- Best time to visit
- Seasonal recommendations
- Top activities
- Packing reminders
- Nearby attractions
- Global destination search
- Live weather updates
- Dynamic destination details
- Interactive Leaflet maps
- Responsive navigation
- Dark / Light mode
- Destination filtering
- Favorite destinations
- Recently viewed history
- Modal windows
- Smooth scrolling
- Semantic HTML
- ARIA labels
- Keyboard navigation
- Accessible modal dialogs
- Focus management
- Responsive controls
- Screen-reader friendly icons
The application is fully responsive across:
- Desktop
- Tablet
- Mobile devices
Built using:
- CSS Grid
- Flexbox
- Media Queries
- Responsive typography
- Adaptive layouts
- OpenWeather API
- Geoapify Places API
- REST Countries API v5
- OpenStreetMap Nominatim API
- Wikipedia REST API
- Pexels API
- Leaflet.js
- HTML5
- CSS3
- JavaScript (ES6 Modules)
- Leaflet.js
- OpenStreetMap
- RESTful APIs
- Local Storage
- CSS Grid
- Flexbox
- CSS Variables
- Lucide Icons
- Git & GitHub
- GitHub Pages
Excursion-explorer
│
├── docs/
│
├── resources/
│ ├── css/
│ │ └── styles.css
│ │
│ ├── images/
│ │
│ └── js/
│ ├── data/
│ ├── services/
│ │ ├── api.js
│ │ ├── config.js
│ │ ├── geoapify.js
│ │ ├── photos.js
│ │ └── ...
│ │
│ ├── main.js
│ ├── modal.js
│ ├── search.js
│ └── ui.js
│
├── contact.html
├── favicon-excursion-explorer.ico
├── index.html
├── privacy.html
├── README.md
└── terms.html
This project uses multiple third-party APIs.
Create a config.js file inside:
resources/js/services/
and add your API keys:
export const OPENWEATHER_API_KEY = "YOUR_KEY";
export const PEXELS_API_KEY = "YOUR_KEY";
export const GEOAPIFY_API_KEY = "YOUR_KEY";
export const REST_COUNTRIES_API_KEY = "YOUR_KEY";
⚠️ Security Note: As this is a client-side portfolio project, API keys are required by the browser and are therefore publicly accessible. To reduce the risk of misuse, all keys are secured using provider-specific restrictions (such as allowed origins).
For security, restrict your API keys using the security mechanisms recommended by each API provider (such as allowed origins) and never expose production keys unnecessarily.
Throughout this project I strengthened my skills in:
- Working with multiple REST APIs
- Asynchronous JavaScript (async/await)
- ES6 module architecture
- State management
- Responsive web design
- Accessibility best practices
- Local Storage
- Interactive maps with Leaflet
- API error handling
- Front-end performance optimization
- Git branching workflows
- Refactoring and modular code organization
- Securing API keys with origin restrictions
- AI-powered destination recommendations
- Trip itinerary planner
- User accounts
- Progressive Web App (PWA)
- Offline support
- Recently searched destinations sync
- Smarter nearby attraction recommendations using multiple travel data sources
Managing multiple APIs while keeping the interface responsive and maintaining consistent destination data.
Implemented modular service layers, reusable helper functions, fallback strategies, and asynchronous data handling to keep the application reliable.
Creating a scalable architecture as the project expanded.
Refactored the application into reusable ES6 modules separating UI, services, utilities, and data management.
Providing a consistent experience across desktop and mobile devices.
Designed adaptive layouts using CSS Grid, Flexbox, responsive typography, and mobile-first refinements.
Amira Ben Ameur
PhD Researcher in Transportation Engineering | Front-End Developer
GitHub: https://github.com/amirabenameur3
If you enjoyed this project, consider giving it a ⭐ Star on GitHub!