From 520f0ed53b8c0e733131fbf522decfe1c091e6ef Mon Sep 17 00:00:00 2001 From: "rluo.dev" <34289582+rluodev@users.noreply.github.com> Date: Tue, 2 Dec 2025 17:54:12 -0800 Subject: [PATCH] [HCB] Get ready for mobile app launch! (#1720) Co-authored-by: Luke Oldenburg <87272260+Luke-Oldenburg@users.noreply.github.com> Co-authored-by: Mohamad Mortada Co-authored-by: Gary Tou Co-authored-by: polypixeldev --- components/announcements/hcb-mobile.mdx | 40 +++++ components/announcements/hcb_cta.js | 44 +++++ components/announcements/holder.js | 5 + components/fiscal-sponsorship/features.js | 2 +- components/fiscal-sponsorship/open-source.js | 52 ++++++ pages/fiscal-sponsorship/index.js | 152 ++++++++++++++---- pages/fiscal-sponsorship/mobile/index.js | 102 ++++++++++++ public/fiscal-sponsorship/apple-web-badge.svg | 46 ++++++ .../google-play-web-badge.png | Bin 0 -> 10454 bytes public/fiscal-sponsorship/hcb-gource.gif | Bin 0 -> 13681079 bytes public/fiscal-sponsorship/mobile-mockup.png | Bin 0 -> 3593536 bytes 11 files changed, 411 insertions(+), 32 deletions(-) create mode 100644 components/announcements/hcb-mobile.mdx create mode 100644 components/announcements/hcb_cta.js create mode 100644 components/fiscal-sponsorship/open-source.js create mode 100644 pages/fiscal-sponsorship/mobile/index.js create mode 100755 public/fiscal-sponsorship/apple-web-badge.svg create mode 100644 public/fiscal-sponsorship/google-play-web-badge.png create mode 100644 public/fiscal-sponsorship/hcb-gource.gif create mode 100644 public/fiscal-sponsorship/mobile-mockup.png diff --git a/components/announcements/hcb-mobile.mdx b/components/announcements/hcb-mobile.mdx new file mode 100644 index 00000000..5fadf70a --- /dev/null +++ b/components/announcements/hcb-mobile.mdx @@ -0,0 +1,40 @@ +I’m Mohamad, a 17-year-old from the SF Bay Area, and I just shipped the official mobile app for HCB. + +If you haven't heard of it, HCB is the financial backbone for over **6,500 teenager-led nonprofits**, clubs, and hackathons. We provide **501(c)(3) nonprofit** status, access to a bank account, a donation collection platform, and debit cards for thousands of young people trying to do good in their communities. + +HCB is currently processing an average of **$6 million per month** (over $80M in its lifetime).[^1] For the last year, I’ve led the project to build the first-ever mobile app for this entire community. + +*The entire project is open source on [GitHub](https://github.com/hackclub/hcb-mobile) (we'd love a ⭐️!).* + +## Why build this? + +These teenagers are running run robotics teams, hackathons, and nonprofit projects that improve their community. They need a way to manage their organization's finances from their pocket. +With HCB Mobile, they'll be able to: + +- Track their **organization's balance** and transactions on the go. +- Accept in-person **tap-to-pay donations**, perfect for an in-person fundraiser or event! No extra hardware required. Just tap any credit/debit card against your phone. +- **Issue new debit cards**, add them to **Apple / Google Wallet**, and freeze or cancel them directly from their phone. +- **Upload receipts** directly from their device or match existing receipts in Receipt Bin to transactions with a tap. + +## The Technical Stuff + +When I started working on this app, I wanted to build in native code like **SwiftUI** for iOS and **Kotlin/Jetpack Compose** for Android. However, I realized that it would be a pain for me, a **full-time student** with classes, to handle two codebases. I'd have to duplicate every feature I created for one OS to the other and deal with all the integration issues along the way. Then, I discovered **Expo** (a React Native framework) which allowed me to write one app that worked on multiple devices. Working with Expo, I learned about creating my own Expo Modules (to bridge native code features to Typescript) and optimization methods like memoization and component recycling. + +The non-code side of this app was *no joke*, either. I had to work with the Apple and Google app review teams to obtain **restricted entitlements** for features like mobile **tap-to-pay terminal provisioning** (made possible by Stripe) and **push provisioning** (which allows users to add cards to their payment wallet directly from HCB Mobile). It took several months and many back-and-forth email chains to finally get the entitlements we needed. + +After over 250 hours of development work, I can say that I'm incredibly proud of HCB Mobile because it's **built by teenagers** to make it easier for teenagers like me to run nonprofit organizations and projects with HCB. Beyond teenagers, HCB also supports hundreds of adult-ran organizations such as mutual aid groups, open source projects, and community spaces. + +
+ +## Download the app! + +
+ + Download on the App Store + +    + + Get it on Google Play + + +[^1] *This amount is excluding HQ (our own) [finances](https://hcb.hackclub.com/hq).* diff --git a/components/announcements/hcb_cta.js b/components/announcements/hcb_cta.js new file mode 100644 index 00000000..7ba450a3 --- /dev/null +++ b/components/announcements/hcb_cta.js @@ -0,0 +1,44 @@ +import { Box, Button, Grid, Heading, Text } from 'theme-ui' +import Icon from '@hackclub/icons' +import NextLink from 'next/link' + +export default function HCBCTA() { + return ( + t.util.gx('yellow', 'orange'), + color: 'white', + py: [4, 5] + }} + > + + + + + Looking to start a nonprofit? + + + We're accepting applications! No startup fees, no minimum balance, and no long wait time. + +
+
+ + + + +     + + + + + + + + ) +} diff --git a/components/announcements/holder.js b/components/announcements/holder.js index 07463675..21de6868 100644 --- a/components/announcements/holder.js +++ b/components/announcements/holder.js @@ -13,6 +13,11 @@ export default function AnnouncementHolder({ children }) { color: 'cyan', my: 4, a: { color: 'inherit' } + }, + 'a[href^="#fn-"], a[href^="#fnref-"]': { + textDecoration: 'none', + color: 'inherit', + pointerEvents: 'none', } }} > diff --git a/components/fiscal-sponsorship/features.js b/components/fiscal-sponsorship/features.js index 0feb0174..6b6716bb 100644 --- a/components/fiscal-sponsorship/features.js +++ b/components/fiscal-sponsorship/features.js @@ -6,7 +6,7 @@ import imgLaptop from '../../public/fiscal-sponsorship/laptop.png' export default function Features() { return ( - + diff --git a/components/fiscal-sponsorship/open-source.js b/components/fiscal-sponsorship/open-source.js new file mode 100644 index 00000000..6269e7fd --- /dev/null +++ b/components/fiscal-sponsorship/open-source.js @@ -0,0 +1,52 @@ +import { Box, Heading, Button, Text, Container, Grid, Flex } from 'theme-ui' +import Icon from '../icon' +import Photo from '../photo' +import HCBGource from '../../public/fiscal-sponsorship/hcb-gource.gif' + +export default function OpenSource() { + return ( + + + +
+ + Open source infrastructure for fiscally sponsored organizations. + + + HCB is open source and built in public, like many other Hack + Club projects. Join us in building the infrastructure powering + fiscally sponsored organizations around the world. + + + + + +
+ + + + + ) +} \ No newline at end of file diff --git a/pages/fiscal-sponsorship/index.js b/pages/fiscal-sponsorship/index.js index f968159b..27ea8912 100644 --- a/pages/fiscal-sponsorship/index.js +++ b/pages/fiscal-sponsorship/index.js @@ -26,8 +26,11 @@ import OrganizationSpotlight from '../../components/fiscal-sponsorship/organizat import { setCookie, getCookie } from 'cookies-next' import { useEffect, useState } from 'react' import { unfold } from '../../components/announcement' -import Icon from '@hackclub/icons' import Announcement from '../../components/announcement' +import OpenSource from '../../components/fiscal-sponsorship/open-source' +import 'react-responsive-carousel/lib/styles/carousel.min.css' +import Sparkles from '../../components/sparkles' +import Icon from '../../components/icon' const organizations = [ { @@ -69,11 +72,13 @@ const organizations = [ } ] -function OpenSourceAlert() { +function MobileAppAlert() { return ( + + New! + - HCB is open source! + HCB Mobile is here!
- Join us in building the infrastructure powering student-led - organizations + Manage your HCB organizations on the go. Issue cards, view transactions, and more! - - + Get it on Google Play + @@ -331,14 +361,75 @@ export default function Page() { - - + + + + + + + HCB in your pocket + + + The official mobile app lets you manage your + organization's finances, issue cards, and more! + + + + + See your organization's spending + + + Stay up to date on your organization's balance and transactions. + + + + + Accept Tap to Pay donations + + + No extra hardware required! Tap any card against your phone. Great for in-person fundraisers. + + + + + Issue, manage, and
add cards + + + You can directly add cards to Apple Wallet and Google Wallet. No more forgetting your card! + + + + + Upload receipts the easy way + + Quickly snap a photo or upload a file! + + + + + + + + + + + - {/* - Powering nonprofits at every scale - */} + + + Powering nonprofits at every scale + + - + @@ -377,8 +468,7 @@ export default function Page() { - - +
@@ -565,7 +655,7 @@ export default function Page() { - As part of our commitment to the environment, funding for HCB’s + As part of our commitment to the environment, funding for HCB's operations and staff will never come from the{' '} - + { + const { href } = props + return ( + + {props.children} + + ) +} + +const MobilePage = () => ( + <> + + +