https://github.com/shayisso/travel-tip
TravelTip is an app that keeps a list of favorite locations
https://github.com/shayisso/travel-tip
crud-application css html-css-javascript js map map-api travel
Last synced: 3 months ago
JSON representation
TravelTip is an app that keeps a list of favorite locations
- Host: GitHub
- URL: https://github.com/shayisso/travel-tip
- Owner: ShayIsso
- Created: 2025-01-21T17:44:58.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-01-24T16:43:29.000Z (over 1 year ago)
- Last Synced: 2025-10-26T00:23:22.244Z (9 months ago)
- Topics: crud-application, css, html-css-javascript, js, map, map-api, travel
- Language: JavaScript
- Homepage: https://shayisso.github.io/travel-tip/
- Size: 31.3 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# TravelTip
#### The app that gets you somewhere
## Description
TravelTip is an app that keeps a list of favorite locations
## Main Features
- The app allows the user to keep and manage locations
- The user can also search for an address and pan the map to that point
- The User can pan the map to his own geo-location
- Shows distance to locations when user position is known
- Modern dialog modal for adding and updating locations
- Advanced grouping by last update time (today, past, never)
- Text filtering that includes location address
- Enhanced sorting capabilities including creation time
## Locations CRUDL
- Create – Use a modern dialog modal to add new locations with name and rate
- Read – Selected location details including distance from user (when available)
- Update – Update location details using a dialog modal
- Delete – Remove locations with confirmation prompt
- List - Including filtering, sorting (by creation time/rate) and grouping (by last update)
## Selected Location
- Displayed in the header
- Location is active in the list (gold color)
- Marker on the map
- Shows distance from user's position when available
- Reflected in query params
- Copy url to clipboard
- Share via Web-Share API
## Location
Here is the format of the location object:
```js
{
id: 'GEouN',
name: 'Dahab, Egypt',
rate: 5,
geo: {
address: 'Dahab, South Sinai, Egypt',
lat: 28.5096676,
lng: 34.5165187,
zoom: 11
},
createdAt: 1706562160181,
updatedAt: 1706562160181
}
```
## Services
```js
export const locService = {
query,
getById,
remove,
save,
setFilterBy,
setSortBy,
getLocCountByRateMap,
getLocCountByLastUpdateMap
}
export const mapService = {
initMap,
getPosition,
setMarker,
panTo,
lookupAddressGeo,
addClickListener
}
```
## Controller
```js
// To make things easier in this project structure
// functions that are called from DOM are defined on a global app object
window.app = {
onRemoveLoc,
onUpdateLoc,
onSelectLoc,
onPanToUserPos,
onSearchAddress,
onCopyLoc,
onShareLoc,
onSetSortBy,
onSetFilterBy,
onSaveLoc
}
```
Here is a sample usage:
```html
Copy location
Share location
```