AmirrMahmoudi / world-wise

World Wise is a web application that enables users to document their travels on a map and share them with others. Designed to provide a practical platform for logging travel memories and exchanging experiences among travelers.

🌍 WorldWise

📝 Overview

WorldWise is a modern web application designed to showcase interactive maps and city data using React and Leaflet. The project leverages Vite for a fast development experience and json-server for simulating a backend.

🚀 Features

• ⚡ Vite for blazing fast development and build process.
• 🌍 Leaflet and react-leaflet for interactive map functionality.
• 🗂️ React Router for client-side routing.
• 📅 React Datepicker for date selection.

🛠️ Getting Started

📋 Prerequisites

Make sure you have the following installed:

• Node.js (>= 14.x)
• npm or yarn

📦 Installation

1. Clone the repository:

   git clone https://github.com/AmirrMahmoudi/world-wise.git
   cd world-wise

2. Install the dependencies:

   npm install
   # or
   yarn install

Running the Application

• To start the development server:

  npm run dev
  # or
  yarn dev

• To build the application for production:

  npm run build
  # or
  yarn build

• To preview the production build:

  npm run preview
  # or
  yarn preview

• To start the JSON server:

  npm run server
  # or
  yarn server

📚 Dependencies

The following packages and dependencies are used in this project:

Main Dependencies

• json-server: ^0.17.3
• leaflet: ^1.9.4
• react: ^18.2.0
• react-datepicker: ^4.25.0
• react-dom: ^18.2.0
• react-leaflet: ^4.2.1
• react-router-dom: ^6.21.1

Development Dependencies

• @types/react: ^18.2.15
• @types/react-dom: ^18.2.7
• @vitejs/plugin-react: ^4.0.3
• eslint: ^8.56.0
• eslint-config-react-app: ^7.0.1
• eslint-plugin-react: ^7.32.2
• eslint-plugin-react-hooks: ^4.6.0
• eslint-plugin-react-refresh: ^0.4.3
• vite: ^4.4.5
• vite-plugin-eslint: ^1.8.1

🗂️ Project Structure

The project structure follows a typical Vite application layout:

world-wise/
├── public/          # Public assets (images, icons, etc.)
├── src/
│   ├── components/  # Reusable UI components
│   ├── data/        # JSON data files
│   ├── pages/       # React components for different pages
│   ├── styles/      # CSS and SCSS files
│   ├── App.jsx      # Main App component
│   └── main.jsx     # Entry point for the React application
├── .eslintrc.json   # ESLint configuration
├── .gitignore       # Git ignore file
├── package.json     # Project dependencies and scripts
├── README.md        # Project README file

🤝 Contributing

Contributions are welcome! Please open an issue or submit a pull request for any bugs, features, or documentation improvements.

📬 Contact

✍️ Amirhossein Mahmoudi [e-mail]