myclub app | the next generation

myclub App is the way for floorball, handball & volleyball clubs in switzerland to manage their club. Based on real data from swissunihockey, swiss volley and swiss handball association, we generate real value for the users, so they can focus an what matters most, their success!

Principles

myclub App's architecture follows these principles:

• mobile first
• always bet on the web the latest version of the app is always available as PWA. In a second stage we also support iOS and Android Apps.

Backend Data

We use a GraphQL API for Sports Data. Check this repository.

Developers (You?)

use conventionalcommits

Prettier Setup

use how to guide Install husky & Prettier npm install — save-dev husky prettier pretty-quick npx husky init

modify file: .husky/pre_commit and set pre-commit hook in husky npx pretty-quick --staged

Create App Icon & Splash Screen

• Generate your app icon and splash screens using cordova-res --skip-config --copy
• Icon generator for manifest Link
• Favicon generator Link
• Install Asset generator: npm install --global pwa-asset-generator and run commands: Light Mode: pwa-asset-generator ./resources/icon.png -i ./src/index.html -m ./src/manifest.webmanifest --splash-only --dark-mode -p 0%
• Dark Mode: pwa-asset-generator ./resources/icon_dark.png -i ./src/index.html -m ./src/manifest.webmanifest --splash-only -p 0%

Native

• Run ionic capacitor add to add a native iOS or Android project using Capacitor

Web

• Run ionic serve within the app dpy

Installed packages

• Ionicframework (v7)
• Capacitor JS (v5)
• Trapeze for native configuration
• Angular v 17.2 & Angular PWA (ng add @angular/pwa --project _project-name_)
• Angular Fire v 7.5 ng add @angular/fire
• Angular Localize -- de-CH German (Switzerland) -- fr-CH French (Switzerland) -- it-CH Italian (Switzerland) -- en-US English
• Tailwind CSS (npm install -D tailwindcss@latest postcss autoprefixer)
• Fontawesome Icons
• Ionicons v 5
• Lottie Files

MY-CLUB-PREMIUM

Run my-club within your own domain and use your own design(css)

Website

• my-club Link Link

Custom Apps:

• General Link
• Unihockey Link

Unihockey

• Kadetten Unihockey Schaffhausen Link
• UHC Winterthur United Link
• STV Spreitenbach Link

Volleyball

• VBC Schaffhausen Link

Associations

• swissunihockey Link Link Link
• swissvolley Link Link
• swisshandball Link

General new custom app

Go to CUSTOM_THEMES and copy default folder. Then create icons and the following files change:

• index.html
• tailwind.config.js [This is still an issue]
• webmanifest.manifest

adjust theme color, names and path accordingly app-FIREBASE_SITE_MYAP

Add Default Sites

firebase target:apply hosting app-unihockey unihockey

Add Custom Sites

firebase target:apply hosting app-FIREBASE_SITE_MYAPP FIREBASE_SITE_MYAPP

• go to firebase.json and copy hosting config.
• go to angular.json and copy angular build config
• create styles in custom theme
• create manifest file etc.
• create icons (See below)
• add build scripts in package.json
• add build steps in yaml

Remove

firebase target:remove hosting FIREBASE_SITE_MYAPP

Icon

Run commands to generate custom icons:

pwa-asset-generator ./resources/app-CUSTOM_icon.png --splash-only --dark-mode -p 0% pwa-asset-generator ./resources/app-CUSTOM_icon.png --splash-only -p 0% pwa-asset-generator ./resources/app-CUSTOM_icon.png --icon-only --dark-mode -p 0% pwa-asset-generator ./resources/app-CUSTOM_icon.png --icon-only -p 0%

then, have a look in the directory or copy icons to src/custom_themes/app-CUSTOM/assets

• /icons
• /splash

Also upload login.jpg to /bg and create favicon.

https://favicon.io/favicon-converter/

Licenses used

run: license-report --only=prod --output=json