README.md

Travel App - React + TypeScript

Grit-academy Javascript-3 React Travel-app with React, TypeScript, and Tailwind CSS that displays country data with search, filtering, and detailed views.

🚀 Running the Project Locally

1. Install dependencies:

   npm install

2. Start development server:

   npm run dev

3. Open in browser:

   http://localhost:5173
   

🌐 Deployment

Live Site: https://travel-app-leon.netlify.app/

📡 Data Sources

Countries

• REST Countries API: https://restcountries.com/v3.1
  • Fetches country data including name, region, capital, flags, population, languages, and currencies

Weather

• Open-Meteo API: https://api.open-meteo.com/v1
  • Fetches current weather data based on country coordinates

Images

• Unsplash API: https://api.unsplash.com
  • Fetches country destination images (requires API key)

Information

• Wikipedia API: https://en.wikipedia.org/api/rest_v1
  • Fetches country summaries and descriptions

✅ Form Validation

Search field validates input on submit:

• Only letters, spaces, hyphens, and apostrophes allowed
• Maximum 100 characters
• Invalid characters show error message on Enter/Search click

🏗️ Technical Implementation

Stack

• React 19 + TypeScript
• Vite (build tool)
• React Router DOM (navigation)
• Tailwind CSS (styling)
• shadcn/ui (accessible components)

Features

• Paginated country list (20 per page)
• Search by country name
• Filter by region (Africa, Americas, Asia, Europe, Oceania, Antarctic)
• Country detail pages with weather, images, and Wikipedia summaries
• URL parameter management (shareable URLs)
• Responsive design (mobile-first)
• Accessibility (ARIA labels, keyboard navigation, semantic HTML)
• Loading states and error handling

📁 Project Structure

src/
├── components/      # Reusable UI components
├── pages/          # Page components (Home, CountryDetail, About)
├── hooks/          # Custom hooks (useCountries, useCountry)
├── services/       # API service functions
├── interfaces/     # TypeScript type definitions
└── styles/         # Global CSS

---

Built by Leon Denengelsen | Live Demo