88.5FM Super App

Complete Operations & Administration Handbook
Table of Contents

1. Introduction & Operations Overview

The 88.5FM Super App is a custom-designed progressive web application (PWA) built to coordinate station administration, broadcast training, presenter scheduling, listener outreach, and community sponsor engagement. By hosting these services under a single web framework, the station can manage volunteer shifts, studio occupancy registers, and member loyalty details in real time.

Administrators use this handbook to understand onboarding checkpoints, role-based screen filtering, geofencing limits for local sponsors, automated presenter birthday alerts, and storage optimization routines for listener voice submissions. The application integrates client-side React routes with a backend cloud Firestore database and Firebase Storage bucket, and leverages security rule controls to safeguard private station data.

2. Getting the App & Device Installation

The Super App is built as a **Progressive Web App (PWA)**. This means it runs directly in your web browser but can be installed onto any mobile device or computer to behave exactly like a native app (with a desktop icon, fullscreen layout, and offline storage).

2.1 Apple iOS Devices (iPhone & iPad)

PWAs on iOS must be installed through the default **Safari** browser:

  1. Open **Safari** on your iOS device.
  2. Navigate to the app URL: https://eight8-5fm-super-app.onrender.com
  3. Tap the **Share** button in the Safari browser controls (the icon looks like a square with an arrow pointing upwards).
  4. Scroll down the share sheet menu options and tap **"Add to Home Screen"**.
  5. Confirm the name (type "88.5FM Super App") and tap **Add** in the top right corner.
  6. The app icon will now appear on your iPhone/iPad Home Screen. Tap it to launch the app fullscreen.

2.2 Google Android Devices

Android devices use the **Google Chrome** browser for installation:

  1. Open **Google Chrome** on your Android device.
  2. Navigate to the app URL: https://eight8-5fm-super-app.onrender.com
  3. A pop-up banner saying **"Add 88.5FM to Home Screen"** will automatically appear at the bottom. Tap it.
  4. If the banner does not appear: tap the **three dots menu** in the top right corner of Chrome and select **"Install app"** or **"Add to Home screen"**.
  5. Confirm the install action. The app will be compiled and placed into your Android app drawer and home screen.

2.3 Computers & Desktops (Windows & macOS)

Desktop installations are supported through **Google Chrome** or **Microsoft Edge**:

  1. Open Chrome or Edge on your computer.
  2. Go to the app URL: https://eight8-5fm-super-app.onrender.com
  3. In the browser address bar (where the URL is written), look to the far right. You will see an **"Install"** icon (an icon that looks like a monitor with an arrow, or overlapping window boxes).
  4. Click the **Install** icon. A dialog box will ask if you want to install the app. Click **Install**.
  5. The app will launch in a clean, windowed layout, and a shortcut icon will be saved to your Desktop/Launchpad.

3. Refreshing & Updating the App

To ensure offline access and instant loading, the app stores its pages, icons, and scripts locally using a browser tool called a **Service Worker**.

3.1 Automatic Updates

Every time you launch the app while connected to the internet, it checks for updates in the background. If a new version of the app has been pushed by developers, the app will automatically download it. The next time you close and re-open the app, the new version will load.

3.2 Manual Force Refresh

If you notice the app has outdated details, or if you want to force it to download the latest files immediately:

4. Sign-up, Onboarding & Approvals

All users accessing private or gated areas of the application must register an account and undergo administrative approval. The onboarding process varies by applicant type:

4.1 Volunteer & Presenter Onboarding Flow

  1. Account Registration: The applicant opens the application and clicks **Register**. They provide their Full Name, Phone Number, Email, Password, Date of Birth (Day, Month, Year), list their reasons for joining, and specify their skills or interest areas.
  2. State Assignment: Upon submitting, a Firebase Auth account is created. In the Firestore users collection, a user document is written with the role 'user' (representing a Volunteer) and the status set to 'pending'.
  3. Lockout State: When a pending member logs in, the app blocks navigation and renders a static Pending Approval screen. No dashboard or menu items are accessible.
  4. Manager Notification: An automated notification is sent to the station managers notifying them of the new registration request.
  5. Review & Approval: A Manager logs in, navigates to the **Station Directory**, switches the tab to **Pending Applications**, reviews details, and clicks **Approve**. This sets the user's status to 'active', unlocking dashboard access.

4.2 Supporter Signup Flow

  1. Registration: Supporters submit their details on the **Supporter Signup** form (name, contact, address, DOB, and supporter tier). This creates a document in the supporterApplications collection with status: 'pending'.
  2. Checkout: The user is redirected to a Square payment portal to complete their annual subscription fee.
  3. Activation: Once payment is received, an admin opens the **Supporters Registry** tab in the Loyalty Console and toggles the application's status to active.
    • If the supporter already has an active user account under that email, the system automatically writes isSupporter: true and sets their role to 'supporter' on their user profile.
    • If they do not yet have an account, the admin can manually toggle their supporter status in the **Station Directory** user list at any time.

5. Dashboard Layouts & Gating

To keep station operations secure and present supporters with a clean experience, the main dashboard features dynamic role-based gating.

Access privileges are determined by the role property in the user's profile document:

  • owner / admin: Station managers. Full dashboard access + Admin Settings panel.
  • presenter / trainee / user (Volunteer): Station members. Full presenter dashboard layout with scheduling, studio check-in, and modules links.
  • supporter: Public sponsors. Gated supporter dashboard layout showing only the Audio Hub, Merch, Website, and Social media buttons.
🟢 Online

Welcome back, Peter!

PRESENTER DASHBOARD
🗓️ Events Volunteering
📻 VoxR Studio Bookings
📖 Studiio Guides
💪 TrainR Modules
📍 Check-In Presence
🎧 Audio Hub Listen Live

6. Supporter Loyalty Card & Geofencing

The Digital Loyalty Card program encourages station supporters to visit community sponsors. Supporters earn points and level up by scanning QR codes at sponsor checkout counters.

6.1 Supporter Levels & Dynamic Card Gradients

A supporter's level is calculated dynamically from their total check-in count. The face of the digital card shifts gradients to match their tier:

  • Level 1 (Bronze Supporter) (0–4 scans): A metallic copper gradient card.
  • Level 2 (Silver Supporter) (5–9 scans): A brushed silver gradient card.
  • Level 3 (Gold Supporter) (10–19 scans): A bright gold glitter gradient card.
  • Level 4 (Platinum Supporter) (20–34 scans): A deep platinum blue gradient card.
  • Level 5 (Diamond Supporter) (35+ scans): A starry cosmic diamond gradient card.

6.2 Geofence Checks & Verification Procedures

To prevent remote check-ins, the scanner enforces a strict 1,000-meter (1km) radius geofence. When a user scans the QR code, the app compares their current device coordinates against the business's stored coordinates using the **Haversine Formula**. If they are further than 1km, the scan is blocked.

Level 3
USER-9834-8850
Jimmy Antartis
14 Scans
Almost at Level 4! Just 6 more scans!

7. Attendance Check-Ins & Studio Range

Active presenters and volunteers must log their attendance when arriving at the station to compile volunteering records and verify on-air presence.

8. Administrative Registry & Console

Managing partners, check-in registries, birthdays, and security rules is limited to the Admin console.

8.1 Supporters Registry Table

Lists all supporters and aggregates scan statistics. Admins use these controls to manage accounts:

  • Record Manual Visit (➕ Icon): Bypasses GPS geofence checks. Admins select an active partner and manually log a check-in visit for the supporter.
  • Reset scans (↺ Icon): Clears all check-ins for the user in the database, resetting their scan count to 0 and returning them to Level 1.

8.2 Birthday Register

Lists supporter birthdays sorted by date. Features dynamic presenter alerts, governed by user privacy choices:

  • Consent Status Badge (🔊 Broadcast OK): Displays a green badge next to the user's name if they have consented to on-air shoutouts.
  • Consent Status Badge (🔇 DO NOT BROADCAST): Displays a red warning badge if they have not consented.
  • Flashing Alerts (Today): If a supporter's birthday is today and they have consented, a flashing pink alert is shown to on-air presenters.
  • Private Status Badge (Today): If a supporter's birthday is today but they have not consented, a static gray lock icon is shown (with no flashing alert). Presenters must not announce these birthdays on-air.
  • This Week Alerts: Highlights upcoming birthdays occurring within the next 7 days.

8.3 Event Gallery & Photo Moderation

Ensures user-uploaded media complies with privacy and intellectual property standards before public display:

  • Uploader Disclaimer: Users are presented with an in-app disclaimer before uploading, certifying that they own the photo and have obtained consent from all recognizable subjects.
  • Pending Queue: Uploaded photos are stored in Firebase Storage and placed in the "Needs Approval" section of the Admin Photo Moderation screen, invisible to the public.
  • Admin Controls: Admins can approve photos (moves them to the public gallery), reject them (marks them as rejected), download them, or permanently delete them.
Tabs
Partners
Registry
Birthdays

Cutting Edge Butchers

Address: 12 Ellenbrook Blvd
Latitude: -31.7779
Longitude: 115.9733

Coordinates Active ✔

9. Presenter Tools (Studiio, VoxR & TrainR)

Active volunteers, presenters, and trainees have access to specialized operational tools to manage their schedule, onboarding checkpoints, and live program checklists.

9.1 Studiio Announcer Playbook

The Studiio dashboard provides immediate access to live broadcasting guides and pre-on-air checklists. Presenters must execute these checks before going live:

  • CD & Digital Source Setup: Set up tracks and test fader channels on cue/audition mode before fading them up to program.
  • Microphone Leveling: Adjust target mic gain and monitor audio volume using the studio headphones (PGM Phones control knob).
  • Jazler Automation Transition: Shift Jazler between automatic play and manual/live assist modes during show handovers.

9.2 VoxR Studio Bookings

The studio booking calendar ensures fair allocation of live program and recording slots. Key scheduling rules include:

  • Real-time Scheduling: Bookings are entered directly in the app, preventing double-bookings.
  • Modification Window: Presenters can edit or cancel their booked slots directly through their dashboard up to 2 hours before the session.

9.3 TrainR Progression Academy

Trainee presenters use the TrainR dashboard to complete their broadcast certification steps. The academy tracks:

  • Module Checkpoints: Interactive guides on FCC/ACMA rules, audio board operations, and phone-in systems.
  • Knowledge Quizzes: Multiple-choice quizzes verifying understanding of broadcast regulations and technical setups.
  • Progress Tracking: Displays a real-time progress bar on the presenter dashboard, unlocking level-up achievements.
Level 3

Broadcasting Certification

Active Module: Studio Board Faders & Mixers

75% Completed
Resume Module 📖

10. Listener & Interactive Features (Audio Hub, Shoutouts & Competitions)

Listeners and supporters have access to interactive features designed to bridge on-air broadcasting with digital user engagement.

10.1 Live Streaming & Audio Hub

The Audio Hub integrates live terrestrial-matching audio streams and catch-up podcast episodes:

  • Listen Live: A high-fidelity, low-latency live player streaming the main broadcast signal directly to any browser.
  • On-Demand Shows (Omny Studio): Accesses catch-up shows and local podcast segments categorized by program name.

10.2 Voice Shoutouts (VoxR Submissions)

Listeners can record and submit brief messages to be played on-air by presenters:

  • In-App Recording: Captures audio clips up to 15 seconds directly using the device microphone.
  • Review & Submit: Users preview their recording before uploading it to Firebase Storage.
  • Moderation Guardrail: Shoutouts go to an administrative pending queue and must be approved by station directors before presenters can play them on-air.

10.3 Competitions & Sponsor Rewards

Local community rewards and active listener competitions are managed dynamically:

  • Active Competitions: Listeners can view active station contests and submit entry forms directly in the app.
  • Sponsorship Gating: Certain rewards require an active Supporter status, verified dynamically through the digital loyalty card.
📻 Live

Radio VCA 88.5FM

● NOW PLAYING LIVE

Morning Mix Show

with DJ Peter Gray