Official Cycle Planet repo, an open source and non-profit network of long distance cyclers and those who want to host them.

Overview

Cycle Planet App License: MIT

This is the repo for the official Cycle Planet platform. The platform is (soon) open source and free to use, which can be used to:

  • Host bicycle tourers, or get hosted during your trip
  • Find relevant information for on the road, such as visas and border crossings
  • Plan your trip
  • Find WhatsApp groups for the continent your going to cycle at
  • Share your trips and stories

The platform is written in Vue.js, and makes use of the Quasar framwork. By making use of Cordova, an Android app and iOS app built. For persistent storage and user account management, it uses Google's Firebase backend-as-a-service.

Problems, feedback or questions are welcome in issues or on our Slack

Prerequisites

  • Node version >=10 installed
  • This project uses the Npm package manager
  • A Google account to set up your Firebase project under

Get started developing

Download or clone this repo, and then run the following command to install all dependencies:

npm install

Copy src/boot/config.example.js to src/boot/config.js.

Go to the Firebase console to set up a Firebase project.

Once you have completed the wizard to set up the Firebase wizard, click the button to add a web app. Copy the var firebaseConfig = ... definition in the code snippet it gives you into src/boot/config.js from this repo, replacing the placeholder in there.

Start the app in development mode:

quasar d

or

quasar dev -m pwa

To be able to register and log in to your own development instance of CyclePlanet, enable the "Auth", "Database" and "Firestore" functionalities under "Build" in the menu on the left in the Firebase console.

Run on Android (cordova) - debug mode:

cd src-cordova
quasar dev -m cordova -T android

Run on iOS (cordova) - debug mode:

cd src-cordova
quasar build -m cordova -T ios

Run on Android (cordova) - build mode:

cd src-cordova
quasar build -m cordova -T android

License

License: MIT

Comments
  • Unable to upload new Android apk

    Unable to upload new Android apk

    Does anyone have experience with signing app for android, using cordova? I used to be able to generate an apk file which could be uploaded to Google Play, but the signing method has changed recently and now I'm unable to sign. Google Play throws an error You uploaded an APK with an invalid signature (learn more about signing). Error from apksigner: ERROR: MIN_SIG_SCHEME_FOR_TARGET_SDK_NOT_MET: Target SDK version 30 requires a minimum of signature scheme v2; the APK is not signed with this or a later signature scheme . I used to use jarsigner, but now have to use apksigner, which I'm trying to use in the developing terminal, but also throws an error saying apksigner : The term 'apksigner' is not recognized as the name of a cmdlet, function, script file, or operable program. Check the spelling of the name, or if a path was included, verify that the path is correct and try again.

    help wanted average priority 
    opened by bidsinga 4
  • query POI markers from Firebase by geohash as needed

    query POI markers from Firebase by geohash as needed

    Should speed up retrieval of markers in multiple pages because we'll only request them for the part of the map we're actually looking at. POI data can now be requested from the marker store for a country using loadPoiWithinCountry or a bounding box using loadPoiWithinBounds.

    Just as I review the pull request I'm noticing getting the POI markers for a user might be broken - it seems we don't query those from Firestore but from state.landMarkers in the markers store. That object is no longer guaranteed to include all POI markers by the current user with these changes. We'll have to add a method on the markers store that queries POI markers for a user from Firebase, won't we @bidsinga ?

    Also this pull request does not yet optimize anything about the way host information is queried for display on a map.

    opened by reinierl 4
  • Add AppCheck

    Add AppCheck

    Following Firebase's App Check for web app doc.

    Not tested, someone with an access to the CP account needs to:

    1. Register site for reCAPTCHA v3 and get reCAPTCHA v3 site key and secret key.
    2. Register app to use App Check with the reCAPTCHA provider in the Project Settings > App Check section of the Firebase console. You will need to provide the secret key you got in the previous step.
    opened by Beetix 4
  • Allow people to add marker location from the main map view

    Allow people to add marker location from the main map view

    As a CyclePlanet community member I want to add markers without navigating to the location a second time in a separate map so that I won't be pissed off and close the app in frustration.

    In other words, currently "Add Marker" pops up a new map in a popover window where you have to navigate anew to the location of your marker. That's frustrating.

    Options that come to my mind to improve this:

    • Capture right clicks on the map and show a menu from there to add a marker at the location of the click
    • Do a mode switch when a user clicks "Add marker", where you show a popover banner that says "Click anywhere to place the marker", and clicking on the maps after that pops up the screen to select the marker type and add the other details
    enhancement usability 
    opened by reinierl 2
  • Map zoom and center

    Map zoom and center

    As part of #10, we're manually adding the marker count of each country. A logical thing to do is to add the functionality to click on the marker count button, and then zoom in and make the map center to those coordinates. This has to be done manually, and I've been able to make it work partially, but not completely yet, as I ran into the following problems.

    Attempt 1 When clicked on a button that holds the total amount of markers of a certain country, a function clickmarkercounter() is actived. The zoom is increased with zoom++. The coordinates of the selected country are also passed to the coordinates that are used by the map. All seems to work fine, except for when you drag the map to another section (thus different center coordinates) and then zoom in. In the zoom, the map seems to look for the latest saved coordinates, which are still the ones assigned to after the function clickmarkercounter() was triggered. The map relocates to those coordinates which is not what we want.

    Attempt 2 In order to save the live coordinates each time the map has moved, I added @move="movemapfunction()" to v-map. This function is triggered each time the map moves. It updates the used coordinates with the last coordinates of the mapObject. But when the button is called, function clickmarkercounter() is triggered again, zooms in and changes the coordinates, but the map doesn't move as the movemapfunction() seems to overrule changing the coordinates.

    It feels like I'm close to the solution, but missing out on something. I placed the code in src/components/Map/MapNew.vue

    See also this commit.

    opened by bidsinga 2
  • Security rules for /Users

    Security rules for /Users

    Extends the security rules from pull request #4 to also provide write protection to user data. So only the users themselves can edit their data, except host requests, which can also be created and updated by the one who is requesting the hosting.

    Read protection to user data is going to be more complicated as we'd have to pick apart the user data which should be readable to other users from the user data that should not be. That's a bit more involved and I'm going to have a look what my next step is going to be.

    These rules, like the previous version, have been deployed already (by accident this time, hitting the wrong key combo in the Security Rules Playground).

    opened by reinierl 2
  • Give MapMarker and MapMarker2 descriptive names

    Give MapMarker and MapMarker2 descriptive names

    At the moment wetwo Vue components named "MapMarker":

    MapMarker MapMarker2

    These have to be given better names that describe the differences between them. Also we should check if in fact they can be combined into one component that can be parameterised for the desired behaviour or looks.

    help wanted good first issue average priority code-quality 
    opened by reinierl 1
  • Give NiceDate and NiceDate2 descriptive names

    Give NiceDate and NiceDate2 descriptive names

    At the moment we have two Vue components named "NiceDate":

    NiceDate NiceDate2

    These have to be given better names that describe the differences between them. Also we should check if in fact they can be combined into one component that can be parameterised for the desired behaviour or looks.

    help wanted good first issue average priority code-quality 
    opened by reinierl 1
  • Give ModalCountryChip, ModalCountryChip2 etc descriptive names

    Give ModalCountryChip, ModalCountryChip2 etc descriptive names

    At the moment we have no less than four Vue components named "ModalCountryChip":

    ModalCountryChip ModalCountryChip2 ModalCountryChip3 ModalCountryChip4

    These have to be given better names that describe the differences between them. Also we should check if in fact some of them can be combined into one component that can be parameterised for the desired behaviour or looks.

    help wanted good first issue average priority code-quality 
    opened by reinierl 1
  • Give ModalUsername, ModalUsername2 etc descriptive names

    Give ModalUsername, ModalUsername2 etc descriptive names

    At the moment we have no less than four Vue components named "ModalUsername":

    ModalUsername ModalUsername2 ModalUsername3 ModalUsername4

    These have to be given better names that describe the differences between them. Also we should check if in fact some of them can be combined into one component that can be parameterised for the desired behaviour or looks.

    help wanted good first issue average priority code-quality 
    opened by reinierl 1
  • Unable to add border marker

    Unable to add border marker

    Adding a border marker is not possible. You can fill in all details, but pressing "save" doesn't do anything. The console returns Uncaught (in promise) ReferenceError: Notify is not defined, which basically means we didn't import the quasar plugin Notify, more info on https://quasar.dev/quasar-plugins/notify. I could solve the problem myself, if I wasn't having the #93 issue.

    bug 
    opened by bidsinga 1
  • Non logged in users should be able to see POI markers and wiki pages

    Non logged in users should be able to see POI markers and wiki pages

    User story

    As a user just looking at CyclePlanet for the first time I want to see the POI markers and wiki pages so I can plan my trip without signing up with this app I don't really trust or care much about yet.

    Background

    Since #30 we've removed navigation to the map for non-registered users because the current Map code refers to user profiles in a lot of places. That would lead to errors and missing data for non-registered users who are prevented by the Firebase Security Rules from reading user profiles.

    So in order to give these people access to POI markers and wiki pages again, we have to check all the code behind finding and reading those and make sure they work for people who can't read user profiles.

    enhancement usability high priority 
    opened by reinierl 0
  • Don't use HTML as a storage format for user-generated content

    Don't use HTML as a storage format for user-generated content

    As a CyclePlanet member, I want CyclePlanet to use cybersecurity best practices so that CyclePlanet does its best to protect me against cyberattacks.

    As a CyclePlanet board member, I want to use a secure design so I don't end up in a situation where I'm held legally responsible for data theft or other cybersecurity incidents.

    So let's use a less powerful format than arbitary HTML for marker descriptions, country wiki pages and other places where we allow users to enter text with markup. While we fixed the urgent XSS hole with #90, using HTML for this functionality at all is a very dangerous way of working. How do we really know this "v-html-safe" library really covers all possible ways to exploit HTML? How do we know W3C isn't adding new capabilities to HTML that v-html-safe doesn't cover? It's better to use Markdown or some other user-friendly microformat. I suspect that there are plenty of Javascript libraries for showing editors for Markdown and for rendering it into the DOM of a page.

    security average priority 
    opened by reinierl 0
  • Process marker creation and updates in the back-end

    Process marker creation and updates in the back-end

    As a CyclePlanet admin, I want to be able to restore a marker page after it's been vandalised.

    As a CyclePlanet admin, I want to be able to trace down the author of seriously objectionable content.

    As a CyclePlanet member, I want to be able to find the author of information in order to critically review it in order to improve it.

    To get there, we have to:

    • Make marker data not writable in Firebase except by cloud functions
    • All updates must go through a cloud function that writes the new content to Firebase
    • The cloud function also makes sure we store the old version, or a diff between the old and the new
    • The cloud function writes the author and timestamp of the new version
    • Add a UI to view history and revert edits (by creating a new version with the old content, not throwing away the newer bit of history!)
    • Add a UI to undo marker additions, and also bulk-undo marker additions by a certain user within a certain time window
    security usability average priority 
    opened by reinierl 0
  • Process wiki page updates in the back-end

    Process wiki page updates in the back-end

    As a CyclePlanet admin, I want to be able to restore a wiki page after it's been vandalised.

    As a CyclePlanet admin, I want to be able to trace down the author of seriously objectionable content.

    As a CyclePlanet member, I want to be able to find the author of information in order to critically review it in order to improve it.

    To get there, we have to:

    • Make wiki pages not writable in Firebase except by cloud functions
    • All updates must go through a cloud function that writes the new content to Firebase
    • The cloud function makes sure we store the author and timestamp of the new version
    • The cloud function also makes sure we store the old version, or a diff between the old and the new
    • Add a UI to view history and revert edits (by creating a new version with the old content, not throwing away the newer bit of history!)
    security usability average priority 
    opened by reinierl 0
  • POI markers slow to render after clicking a country

    POI markers slow to render after clicking a country

    When: I click the POI marker for The Netherlands on cycleplanet.org on my rather beefy development laptop

    Then I expect: to see a map with markers rapidly

    Instead: It takes about 7 seconds to load

    It must be much worse on phones.

    This turns out to be due to the client-side clustering. I have disabled that now and that speeds things up, although there is still a noticable delay when switching from marker counts to separate markers.

    bug high priority 
    opened by reinierl 0
Releases(2.0.00)
🌍 A non intrusive open source app to discover and enjoy the world

?? A non intrusive open source app to discover and enjoy the world

Pukara 4 Aug 9, 2022
Solution of challenge to build Planet fact site

planet-fact-site Hello! This is my solution to Planets fact site - Frontend Mentor. This is my first project build with Vue JS. This is not the full s

null 5 Nov 7, 2022
A free open source photo sharing social network.

Gram Meow there! This is Gram. Gram is a free open source photo sharing social media platform build with modern technologies. A live demo can be found

@stux 8 Sep 13, 2022
Send your loved ones a vibe with a lovely sound, so they know you miss them. Anytime you want to, anywhere they are.

An app to send your loved one a vibration with a lovely sound, so they know you miss them. Anytime you want to, anywhere they are.

fotiecodes 32 Aug 6, 2022
Vue.js Forge Official Project Repo

Vue.js Forge Official Project Repo We're super excited to be teaming up with the community to build a SaaS Project Management App together! Use this r

VueSchool.io 69 Nov 16, 2022
A quick template for those who wants to use Vue2 in a Laravel project along with the benefits coming from Inertia and Jetstream.

About the Template This template is an easy-to-use blank template for those who wants to develop in Laravel with InertiaJs, Vue2 and the massive capab

Furkan Meraloğlu 5 May 14, 2022
✨ A Chrome extension for tidying up those tabs.

TidyTab Tired of keeping your browser open just to keep your tabs open and not lose them? Well, tidy them up using TidyTab and free up your computer's

null 66 Jun 9, 2022
A lightweight personal markdown document host with vue.js

为什么要用英文写 readme 和 commit 信息?——为了顺手提升我的英语水平 light-doc Super lightweight personal

marsCat 1 Jul 27, 2022
A stupidly simple to use temporary mail host with an easy to use JSON/WS API

A stupidly simple to use temporary mail host with an easy to use JSON/WS API Yes, there are hundreds of these. It's just fun to learn new things

Daniël 12 Nov 18, 2022
An open social network where anyone can share their ideas and opinions.

Supagram An open social network where anyone can share their ideas and opinions. Demo Supagram Supabase Hackathon This project was started to particip

Lautaro Pereyra 9 Dec 9, 2022
This is a source code for the Laravel Poland Meetup official website.

laravel-poland-meetup (work in progress) This is a source code for the Laravel Poland Meetup official website. Development Static database is built fr

Blumilk 2 Nov 4, 2022
Non-commercial use is for personal research use only

PortableArc This template should help get you started developing with Vue 3 in Vite. Recommended IDE Setup VSCode + Volar (and disable Vetur). Type Su

SngBlog 1 Jun 4, 2022
Cross-platform mobile App developed with Ionic, Capacitor and Vue3 to manage and share vegetarian meals, recipes and products, using device's internal storage, camera, geolocation, share and network functionalities.

Cross-platform mobile App developed with Ionic, Capacitor and Vue3 to manage and share vegetarian meals, recipes and products, using device's internal storage, camera, geolocation, share and network functionalities.

null 7 Dec 8, 2022
Desktop app for miners on the Helium network. Small taskbar tool to follow status, activity and earnings for the chosen devices.

Helium-Flick is a desktop application for Helium hotspot owners, in the shape of a small taskbar tool, which allows you to follow the status, activity and earnings for the devices of your list. The purpose of this application is to keep track of all your hotspots, directly at the corner of your screen.

Justine Vedovato 23 Jun 16, 2022
Chatty social network from Codecourse tutorial rebuilt from scratch as a single-page app.

Chattier Social Network Chatty social network from Codecourse tutorial rebuilt from scratch as a single-page app. Laravel 5.6 JWT-based authentication

Ranie Santos 37 Jan 27, 2021
Rarity scores for each Anons NFTs from anons on the Secret Network 💸

Anons NFT Rarity Scores This repository will list every rarity score for each Anons NFTs from https://www.anons.army/ on the Secret Network. The rarit

null 8 Jul 31, 2022
All your medical records in one place using the DeSo network. PHS Hacks 2022

Immunize All your medical records in one place using the DeSo network. How To Run Locally Install dependencies (run yarn in the frontend and backend f

Sreyas Voruganti 2 Nov 7, 2022
A line-network geolocation tool created for Bellingcat's September 2022 Hackathon

osm-finder The UI is now accessible from anywhere on Netlify: https://osm-finder.netlify.app/ Description One of the most prominent tools that assists

Grant Grubbs 90 Dec 18, 2022