WorldWise - Travel Application

A comprehensive React-based travel application that allows users to track visited cities, manage travel itineraries, and explore world destinations with interactive maps and detailed location information.

Overview

WorldWise is a feature-rich travel platform that provides:

• Interactive world map for city exploration
• Travel history and visited cities tracking
• City and country information management
• User authentication and profile management
• Responsive design with lazy loading
• Context-based state management

Features

• Interactive Map: Explore cities using React Leaflet integration
• City Management: Add, view, and manage visited cities
• Country Information: Browse countries and their cities
• User Authentication: Secure login and registration system
• Travel History: Track and manage your travel experiences
• Responsive Design: Optimized for desktop, tablet, and mobile
• Lazy Loading: Efficient code splitting for better performance

Technical Stack

• Frontend: React 19.0.0
• Routing: React Router DOM 7.6.0
• Maps: React Leaflet & Leaflet
• State Management: React Context API
• Build Tool: Vite 6.1.0
• Data: JSON Server for city data
• Styling: CSS modules for component styling
• Development: ESLint for code quality

Getting Started

Prerequisites

• Node.js (version 18 or higher)
• npm or yarn

Installation

1. Clone the repository
2. Navigate to the project directory:

   cd Websites/WorldWise/main

3. Install dependencies:

   npm install

4. Start the development server:

   npm run dev

5. (Optional) Start the JSON server for city data:

   npm run server

6. Open your browser and visit http://localhost:5173

Available Scripts

• npm run dev - Start development server
• npm run build - Build for production
• npm run lint - Run ESLint
• npm run preview - Preview production build
• npm run server - Start JSON server for city data

Project Structure

src/
├── components/                 # React components
│   ├── AppNav.jsx            # Application navigation
│   ├── BackButton.jsx        # Navigation back button
│   ├── Button.jsx            # Reusable button component
│   ├── City.jsx              # City details component
│   ├── CityItem.jsx          # Individual city item
│   ├── CityList.jsx          # List of cities
│   ├── CountryItem.jsx       # Individual country item
│   ├── CountryList.jsx       # List of countries
│   ├── Form.jsx              # City addition form
│   ├── Logo.jsx              # Application logo
│   ├── Map.jsx               # Interactive map component
│   ├── Message.jsx           # Message display component
│   ├── PageNav.jsx           # Page navigation
│   ├── Sidebar.jsx           # Sidebar component
│   ├── Spinner.jsx           # Loading spinner
│   ├── SpinnerFullPage.jsx   # Full-page loading
│   └── User.jsx              # User profile component
├── contexts/                  # React Context
│   ├── CitiesContext.jsx     # Cities state management
│   └── FakeAuthContext.jsx   # Authentication context
├── hooks/                     # Custom hooks
│   ├── useGeolocation.js     # Geolocation hook
│   └── useUrlPosition.js     # URL position hook
├── pages/                     # Page components
│   ├── AppLayout.jsx         # Main application layout
│   ├── Homepage.jsx          # Homepage
│   ├── Login.jsx             # Login page
│   ├── PageNotFound.jsx      # 404 page
│   ├── Pricing.jsx           # Pricing page
│   ├── Product.jsx           # Product page
│   └── ProtectedRoute.jsx    # Route protection
├── index.css                  # Global styles
└── main.jsx                   # Application entry point

Key Features

Interactive Map

• World map with city markers
• Click to add new cities
• Geolocation support
• Custom map controls

City Management

• Add new cities with details
• View city information
• Track visited cities
• City search and filtering

Country Information

• Browse countries
• View country details
• City listings by country
• Country statistics

User System

• User registration and login
• Profile management
• Travel history tracking
• Protected routes

Context API Implementation

CitiesContext

• Manages city data and state
• Handles city operations (add, delete, update)
• Provides city-related functions
• Manages loading and error states

FakeAuthContext

• Handles user authentication
• Manages user session
• Provides login/logout functionality
• Protects routes and components

Custom Hooks

useGeolocation

• Handles browser geolocation
• Provides current position
• Manages geolocation errors
• Position tracking functionality

useUrlPosition

• Extracts position from URL parameters
• Handles URL-based navigation
• Position validation
• URL state management

Routing Structure

• / - Homepage
• /login - User authentication
• /pricing - Pricing information
• /product - Product details
• /app - Main application (protected)
  • /app/cities - City list
  • /app/cities/:id - City details
  • /app/countries - Country list
  • /app/form - Add city form

Data Management

The application uses JSON Server for:

• City data storage
• Country information
• User data management
• API endpoints

Styling

The application uses CSS Modules for:

• Component-specific styling
• Responsive design
• Interactive elements
• Loading states
• Map styling

Performance Features

• Lazy Loading: Code splitting for better performance
• Suspense: Loading states for async components
• Context Optimization: Efficient state management
• Image Optimization: Optimized map tiles and images

Contributing

This is a comprehensive travel application demonstrating:

• React Context for state management
• React Router for navigation
• Interactive maps integration
• Custom hooks development
• Component composition
• Responsive design principles
• Authentication and authorization

License

This project is for educational purposes.