Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/sajaltimilsina/worldwise
WorldWise: A React-based travel tracking app leveraging Leaflet maps, user authentication, and city visualization. Manage your global adventures with ease, visualizing visited locations and exploring new destinations on an interactive map.
https://github.com/sajaltimilsina/worldwise
content-api custom-hooks openstreetmap reactjs state-management
Last synced: about 4 hours ago
JSON representation
WorldWise: A React-based travel tracking app leveraging Leaflet maps, user authentication, and city visualization. Manage your global adventures with ease, visualizing visited locations and exploring new destinations on an interactive map.
- Host: GitHub
- URL: https://github.com/sajaltimilsina/worldwise
- Owner: SajalTimilsina
- Created: 2023-10-25T13:56:54.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-11-25T17:24:20.000Z (2 months ago)
- Last Synced: 2024-11-25T17:43:22.713Z (2 months ago)
- Topics: content-api, custom-hooks, openstreetmap, reactjs, state-management
- Language: JavaScript
- Homepage: https://worldwise1.netlify.app/
- Size: 949 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# WorldWise
This repository contains a React application called WorldWise that enables users to track their travels across the globe. It employs various components and functionalities to manage user data and provide an interactive experience.
## Installation
To run this application locally, follow these steps:
1. Clone the repository to your local machine.
2. Install dependencies using `npm install`.
3. Run the development server using `npm run dev`.
## Scripts
- `npm run dev`: Starts the Vite development server.
- `npm run build`: Builds the application using Vite.
- `npm run lint`: Lints the code using ESLint.
- `npm run preview`: Opens a Vite preview server.
- `npm run server`: Initiates a JSON server to watch city data from `data/cities.json`.
## Dependencies
The application relies on several key dependencies:
- `json-server`: Simulates a REST API server to handle city data.
- `leaflet`: Utilized for interactive maps and markers.
- `react` and `react-dom`: Core libraries for building the UI.
- `react-datepicker`: Provides a date picker functionality.
- `react-leaflet`: Integrates React with Leaflet for map rendering.
- `react-router-dom`: Manages routing within the application.
## Components and Pages
### `AppLayout`
- Combines `Sidebar`, `Map`, and `User` components to form the main application layout.
### `Homepage`
- Landing page displaying an overview of the application's purpose and encouraging users to start tracking their travels.
### `Login`
- Allows users to log in to the application with predefined credentials or customize their login details.
### `Product`
- Displays details about the application's pricing or additional information about WorldWise.
### `Map`
- Uses Leaflet to render an interactive map where users can view cities and add new locations by clicking on the map.
## Contexts and Hooks
### `CitiesContext` and `AuthContext`
- Provide context for city data and user authentication, respectively.
- Includes hooks like `useCities` and `useAuth` to access context values and functionalities.
### `useGeolocation` and `useUrlPosition`
- Custom hooks to manage geolocation and URL-based position tracking.
## Contributing
Contributions to enhance WorldWise are welcome! Please feel free to submit pull requests or raise issues in the GitHub repository.