Travel Guide

A modern, responsive, and dynamic Travel Guide application built with React, vite and Tailwind CSS. Explore countries, cities, and attractions with interactive maps and curated collections.

Features

• Dynamic Routing: Seamless navigation between countries, cities, and attractions.
• Interactive Maps: Integrated Leaflet maps with clustering for exploring destinations.
• Search & Discovery: Powerful search functionality and curated "Explore by Interest" collections.
• Wishlist: Save your favorite destinations for later.
• Responsive Design: Fully optimized for mobile, tablet, and desktop devices.
• Modern UI: Premium aesthetic with smooth animations, glassmorphism, and dark mode support.
• Data Driven: Centralized data management for countries, cities, and attractions.

APIs Used

This project relies on several external APIs to provide dynamic content:

• REST Countries API: Fetches comprehensive data for countries (population, capital, region, flags, etc.).
• Unsplash API: distinct, high-quality images for countries, cities, and attractions dynamically.
• OpenStreetMap (Nominatim): Provides geocoding services and location coordinates to place cities and landmarks on the map.
• GeoDB Cities API (via RapidAPI): Powers the global city search functionality with population data and reliable filtering.

Tech Stack

• Framework: React 19
• Build Tool: Vite
• Styling: Tailwind CSS 4
• Routing: React Router 7
• Maps: Leaflet & React Leaflet
• Icons: Remix Icon
• Carousel: Swiper
• Fonts: DM Sans & Playfair Display

Getting Started

Prerequisites

• Node.js (Latest LTS recommended)
• npm or yarn

Installation

1. Clone the repository:

   git clone https://github.com/yourusername/travel-guide.git
   cd travel-guide

2. Install dependencies:

   npm install

Running Locally

Start the development server:

npm run dev

Open http://localhost:5173 in your browser.

Scripts

• npm run dev: Starts the development server.
• npm run build: Builds the app for production.
• npm run preview: Previews the production build locally.
• npm run lint: Runs ESLint to check for code quality issues.

Project Structure

src/
├── api/            # API simulation and data fetching
├── assets/         # Static assets (images, icons)
├── components/     # Reusable UI components
├── context/        # React Context (e.g., Global State)
├── data/           # Static data files
├── pages/          # Application pages (Home, Country, City, etc.)
└── main.jsx        # Entry point

License

This project is licensed under the MIT License.