WorldWise

WorldWise is an interactive web application that allows users to register and keep track of all the cities they have visited. The application provides a map interface where users can mark cities they've been to, add notes about their trips, and view detailed information about each city. WorldWise is built with modern web technologies, ensuring a smooth and responsive user experience.

Table of Contents

• Project Overview
• Features
• Pages
• Screenshots
• Technologies Used
• Setup Instructions
• Contact Information

Project Overview

WorldWise offers a seamless way for users to document their travels. With a simple login system, users can start adding cities to their visited list. The application leverages a map interface, allowing users to click on a city to record their visit, including the date and personal notes. The side navigation provides quick access to both cities and countries, enhancing the user experience by categorizing visits geographically.

Features

• City Registration: Users can add cities they've visited by clicking on the map. The city name is fetched from an external API, and users can add the date of visit and notes about their trip.
• Interactive Map: The map interface allows users to view their current location using the geoLocationAPI. The map updates dynamically as users interact with it.
• City and Country Lists: A side navigation bar lists all registered cities and countries, with URL routing between /app/cities and /app/countries.
• City Details: Clicking on a city marker or a city from the list brings up detailed information, including a link to the city's Wikipedia page.
• Delete City: Users can delete a city from their list, with a loading spinner indicating the process, as the city data is fetched from a fake API.

Pages

1. /product: This page provides an overview of the WorldWise app, explaining its purpose and features.
2. /pricing: Displays fictional pricing information for the WorldWise app.
3. /login: The login page where users authenticate by entering their email and password.
4. /app/cities: The main page of the application, listing all cities the user has registered.
5. /app/countries: Lists all countries, automatically populated based on the registered cities.
6. /app/form?lat=123&lng=123: A form page that appears when a user clicks on the map to add a new city.
7. /app/cities/123?lat=123&lng=123: Displays detailed information about a specific city, including visit date, notes, and a Wikipedia link.

Screenshots

1. Home Page (/):
2. Product Page (/product):
3. Pricing Page (/pricing):
4. Login Page (/login):
5. Main Application Page (/app/cities):
6. Cities List (/app/cities):
7. Countries List (/app/countries):
8. Add City Form (/app/form?lat=123&lng=123):
9. City Details (/app/cities/123?lat=123&lng=123):

Technologies Used

• React 18: For building the user interface.
• Vite: For fast and efficient development setup.
• React Router: For managing application routing.
• CSS Modules: For scoped and maintainable styling.
• json-server: For simulating a REST API.
• Leaflet + React-Leaflet: For interactive maps and geolocation functionality.

Setup Instructions

To set up the WorldWise project locally, follow these steps:

1. Clone the repository:

   git clone https://github.com/yourusername/worldwise.git
   cd worldwise

2. Install dependencies:

   npm install

3. Start the development server:

   npm run dev

4. Access the application: Open your browser and navigate to http://localhost:5173.

Contact Information

For any inquiries or further information, feel free to reach out:

• 📧 Email: [email protected]
• 🌐 Portfolio: paulanik.com
• 💼 LinkedIn: LinkedIn Profile
• 📝 Dev.to: Dev.to Profile