craigm26 / bike-bus Goto Github PK

View Code? Open in Web Editor NEW

7.0 2.0 1.0 44.15 MB

An App to help organize and plan BikeBus routes

Home Page: https://bikebus.app

License: GNU General Public License v3.0

HTML 0.36% TypeScript 82.66% CSS 3.06% JavaScript 13.20% Java 0.16% Ruby 0.18% Swift 0.37% Shell 0.01%

open-source-project

bike-bus's Introduction

BikeBus

The BikeBus app is software meant to be an one-stop shop for all things related to bicycling in a group. This app should be able to create BikeBus routes, events, and groups. It should also be able to send push notifications to users and allow users to send messages to each other. The app should also be able to show a map of the route and allow users to see the route and the BikeBus group in real time.

BikeBus

What

BikeBus is a term to describe a group of cyclists that is usually guided by a leader. In the US, this has become a growing activity to help children get to school. This app will help BikeBus leaders create a route, invite new members and allow parents to monitor the BikeBus as it makes it way to school.

This project has always and will be without ads or selling of user data with PII. Anonymous users and anonymized data wherever possible. BikeBus data might be made available to future API to help build safer streets.

The BikeBus User Interface is being developed in the open and we welcome contributions. We are using the GPL-3.0 License. Please see the LICENSE file for more details.

The BikeBus Database (Firebase) is closed and we are not accepting contributions to it at this time. The plan is to safely build a public and private API to access anonymized data in the future.

Other project documentation that is not in this ReadMe are:

How

We are using the Ionic Framework to build the app. We are using Firebase for the backend. We are using Google Maps for the mapping and directions. We are using Firebase Hosting for the web app and Firebase Cloud Messaging for the push notifications.

Who

We are a group of volunteers who are passionate about cycling and safe streets.

Please see the Contributors file for more details.

Why

We think technology could help make this a smoother, more fun experience while promoting cycling and safer streets with data for policy makers on street design.

Features

Create a route, make it a scheduled route and call that a BikeBus group. Invite other or new users to join.
Map search then allow options to get directions, look for routes or BikeBus groups
"Bulletin Boards" allow users in a BikeBus or Organization to send messages
Account page allows users to see their details and change them

Contributing

How you can help:

Test the Production app and report bugs
Suggestions for new features should be added to the Discussions Page page
Feedback on the UI/UX is always welcome

We are looking for help with the following:

UI/UX Design
Ironing out bugs
Adding new features
Testing
Documentation
Translations
Accessibility
Security
Performance

Pre-requisites

npm 18.20.0

Getting Started

We're using Ionic Framework with React to build the app so be sure to check out their documentation.

To get started, open a terminal and navigate to the directory where you want to store the project and run the following commands:

git clone [email protected]:craigm26/bike-bus.git
cd bike-bus
npm install

This will clone the project, navigate to its directory and install all dependencies.

Next, you will need to create a Firebase project + register an app and add the configuration to an env file. This is just to satisfy the Firebase SDK requirements; feel free to decline analytics, A/B testing, etc.

For your convenience, a .env.example file has been provided with the necessary keys and empty values. The following command will create a .env file for you:

cp .env.example .env

From there, use the values from your Firebase project to populate the .env file as they belong in the firebaseConfig object in src/firebaseConfig.js.

Then, open the .env file and add your Firebase configuration. You can find this in the Firebase Console under Project Settings > General > Your apps > SDK setup and configuration > Config.

With your environment configured, you should be able to run the following commands:

npx ionic serve

npx is not necessary if you have Ionic installed globally but generally that is not recommended. This will start a local development server and open the app in your default web browser. You should now be able to see the app running locally! A Google Maps key will be required to see the map. You can get one from the Google Cloud Console but this is probably out of scope for "Getting Started".

Development Builds

Once you have the app running locally, pick an issue from the Issues list or create a new one. Then create a branch and start working on the issue. Once you are done, create a pull request and assign a reviewer.

The reviewer will check the code and merge it into the main branch then deploy the app to Firebase Hosting for testing.

Once the app is tested, the reviewer will deploy the app to Firebase Hosting for production.

To deploy to iOS TestFlight

ionic build
npx cap sync
npx sync ios
manually add the GoogleService-Info.plist file to the ios/App folder
manually modify the config.xml file to add the following lines:

<?xml version='1.0' encoding='utf-8'?>
<widget version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
  <access origin="*" />
  <platform name="ios">
      <resource-file src="GoogleService-Info.plist" />
  </platform>
</widget>

Open Xcode and select the project
Select the target
Select the "Signing & Capabilities" tab
Select the "All" tab
Select the "Signing" section
Select the "Team" dropdown and select the team
Select the "Signing Certificate" dropdown and select the certificate
Select the "Provisioning Profile" dropdown and select the profile
Select the "Product" menu
Select the "Archive" option
Select the "Distribute App" option
Select the "App Store Connect" option
Select the "Next" button
Select the "Upload" button
Select the "Next" button
Select the "Done" button
Go to App Store Connect
Select the "TestFlight" tab
Select the "Builds" tab
Select the build
Select the group for testing the build

To deploy development builds and distribute to Google Play Store

Open Android Studio
Select the project
Select the "Build" menu
Select the "Build Bundle(s) / APK(s)" option
Select the "Build APK(s)" option
Select the "Locate" button
Drag the .apk file to the Google Play Console
Select the "Create Release" button
Select the "Review" button
Select the "Start Rollout" button
Select the "Confirm" button

To deploy to Firebase preview channel

ionic build
npx cap sync
npx sync ios
npx sync android
firebase hosting:channel:deploy preview

Production Builds

Production builds will be compiled by Craig Merry and pushed out when tested.

To deploy to Web (Firebase production channel)

ionic build --prod
npx cap sync
npx sync ios
npx sync android
firebase deploy --only hosting:production

To deploy for Android

ionic build
npx cap sync
npx sync Android
manually add the google-services.json file to the android/app folder
clean build in Android Studio
perform a build in Android Studio - .aab file
upload to Google Play Store as a new release (production for now)

To deploy for iOS

ionic build
npx cap sync
npx sync ios
manually add the GoogleService-Info.plist file to the ios/App folder
manually modify the config.xml file to add the following lines:

<?xml version='1.0' encoding='utf-8'?>
<widget version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
  <access origin="*" />
  <platform name="ios">
      <resource-file src="GoogleService-Info.plist" />
  </platform>
</widget>

commit to github

Authors

Craig Merry - Initial work - craigm26
Contributors

Acknowledgments

bike-bus's People

Contributors

Stargazers

Watchers

Forkers

iatenine

bike-bus's Issues

Allow leader to edit schedules

When a user doesn't fill in the initial destination value the map centers on 0, 0. Make it center on start

Fix profile "shadow"/click area

Fix the profile popover

Make a common url link show a preview or auto-submit as message

Also ensure the link displays as a link in the submitted message

When user is anonymous, the map marker doesn't show

Make iOS authentication work

update BikeBusGroupPage to point to BikeBusName for routing url's

A BikeBus Group currently lands an user at https://bikebus.app/bikebusgrouppage/8oib6lCVV3HEWprypflK

where the 8... is the firestore document id in the document collection "bikebusgroups". We need a way to make the url re-direct to the BikeBusName and also create a QR Code to point that way.

Auto generating route path fails

Edit the ViewOrganization Page

Populate the flyer with a styled flyer and a QR code for scanning

Make font "More Sugar"

Add a way for people to add images in bulletin boards. Check url links to see if they're valid

Obtain new SendGrid api key and set up git ignore to include the function key(s)

Describe the bug
A clear and concise description of what the bug is.

To Reproduce
Steps to reproduce the behavior:

Go to '...'
Click on '....'
Scroll down to '....'
See error

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

OS: [e.g. iOS]
Browser [e.g. chrome, safari]
Version [e.g. 22]

Smartphone (please complete the following information):

Device: [e.g. iPhone6]
OS: [e.g. iOS8.1]
Browser [e.g. stock browser, safari]
Version [e.g. 22]

Additional context
Add any other context about the problem here.

Fix the routing on the account page to include any pages that should be there

Fixes

fix the edit organization page- add bikebus group, users and roles. Add timesheets and reports
Clicking "Cancel" on the geolocation request should load the map coordinates to chicago's bean

Getting Started section needs improvement

Describe the bug
Getting Started makes some assumptions about new developer's environments, skips steps and fails to mention anything about environment variables

To Reproduce
Steps to reproduce the behavior:

From a new dev environment, follow the getting started guide
ionic serve won't run unless it happened to already be installed globally (guide should recommend running it with npx though
After installing ionic or running with npx ionic serve page doesn't load. Console clarifies projectId is undefined due to lack of env variables

Expected behavior
Following guide should include enough information for less advanced developers to get up to speed quickly

Desktop (please complete the following information):

OS: Ubuntu 22.04
Browser Firefox
Version 123

Additional Context
I've been putting together a revision to the section in question and a .env.example to distribute but consider seeing if there's a way to operate without the Firebase dependency when running locally. I'm not familiar with it or Ionic and was just trying to get some font colors acting right

Monetizing strategies

iven the provided information about the BikeBus app, a tiered subscription model could be best suited to offset the Google Maps API costs and help monetize the app. Here's a suggested model:

Free Tier: As you mentioned, this tier would include the basic functionalities like creating a route, scheduling it, inviting users, searching for a scheduled route, and getting alerts when a BikeBus is near for car drivers. This will encourage initial user adoption and help establish a user base.
Premium Tier: This tier could cost around $5-$10 per month (or whatever price point makes sense for your market) and would include the premium features you mentioned, such as advanced route planning and customization, real-time ETA predictions and notifications, enhanced safety features and alerts, in-app messaging, and deeper integration with Google Maps. This tier would generate revenue to offset the Google Maps API costs and support the development and maintenance of the app.
Premium Plus Tier: This tier could cost around $15-$20 per month and would offer all the benefits of the Premium tier plus additional features such as offline maps, extended historical ride data, personalized insights and recommendations, priority customer support, and potential future features. This tier would provide an additional revenue stream, helping to further offset costs and support the growth of the app.
Enterprise Tier: If there are organizations or businesses that are interested in using the app for larger groups or for commercial purposes, you could offer an enterprise plan. This could be priced on a case-by-case basis depending on the needs of the organization.
Regarding the monetization of the app, you should also consider in-app purchases, partnerships and sponsorships, and accepting donations as additional revenue streams.

Finally, it's important to note that pricing should be determined based on a variety of factors, including your specific costs, your target audience's willingness and ability to pay, and the pricing strategies of any competing apps. Regularly reviewing and adjusting your pricing strategy as necessary will be key to maximizing your revenue and ensuring the sustainability of your app.

Re-do Route creation and editing

Add BikeBusStops effectively. Users should be able to add stops and show them on the flyer and map views

Make BikeBusgroups page show all known routes to creator and be able to delete routes

Set a primary route to show to all users

When editing the route, clickin on the automated "generate new route" doesn't work if there are no bikebusstops

Editing route name on edit route page doesn't work

Revise account page

Add sections for account types (breakdown) and then one for notifications

Add section for favorite destinations (add handler while searching for directions

Add section for parents to add a kid and phone number for sending route start/stop link

Font awesome

cd .. # Go back from server to the main directory with React project
npm install @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons @fortawesome/free-regular-svg-icons @fortawesome/react-fontawesome@latest