https://github.com/simandrew/world-wise
World Wise Travel Track SPA App
https://github.com/simandrew/world-wise
Last synced: 3 months ago
JSON representation
World Wise Travel Track SPA App
- Host: GitHub
- URL: https://github.com/simandrew/world-wise
- Owner: SimAndrew
- Created: 2024-02-07T18:46:16.000Z (over 1 year ago)
- Default Branch: master
- Last Pushed: 2024-03-02T20:23:44.000Z (about 1 year ago)
- Last Synced: 2025-01-12T11:32:12.485Z (4 months ago)
- Language: JavaScript
- Homepage: https://world-wise-reactjs.netlify.app/
- Size: 916 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## World Wise App
### About:
WorldWise is a travel tracking tool that helps you create a visual record of your adventures. You can add cities to your list and view them on a world map, as well as access information about each city.
To use the application, you need to give permission to the device location. The app uses the Leaflet open-source library to display the map.
The application fetches cities from `data/cities.json`.
---
### Sample task, photo:
- Overview
- Add new visited location and impressions
- data/cities.json contain list of visited countries
```
{
"cities": [
{
"cityName": "Lisbon",
"country": "Portugal",
"emoji": "🇵🇹",
"date": "2027-10-31T15:59:59.138Z",
"notes": "My favorite city so far!",
"position": {
"lat": 38.727881642324164,
"lng": -9.140900099907554
},
"id": 73930385
},
]
}
```
---
### Technologies, Libraries:
- [React JS](https://react.dev/)
- [Vite JS](https://vitejs.dev/), [ESLint](https://eslint.org/), [Prettier](https://prettier.io/)
- CSS Modules - Automatically creating a unique class name
- [reactrouter.com](https://reactrouter.com/) Single-Page App
- React Context API - Allow to share state across the entire app
- [leafletjs.com](https://leafletjs.com/) Leaflet is open-source JavaScript library for mobile-friendly interactive maps.
- [react-leaflet.js.org](https://react-leaflet.js.org/) React components for Leaflet maps
- [react-datepicker](https://github.com/Hacker0x01/react-datepicker)
---
### Run the app:
- Clone a project: `git clone`
```
https://github.com/SimAndrew/world-wise.git
```
- Open project code in your editor.
- Install the dependencies, enter into the terminal:
```
npm install
```
- Run the project, enter into the terminal:
```
npm run dev
```
- To run server `data/cities.json` on `localhost:8000/cities` enter into the terminal:
```
npm run server
```
or
```
npx json-server --watch data/cities.json --port 8000
```