Varsity Vibe is a South African student discount and membership platform. Students join, verify that they really are students (or partners), browse and redeem deals, manage their membership, and get at partner-backed benefits, all from either the web app or their phone.
I was the primary frontend and mobile engineer across the web and React Native apps. I bootstrapped the clients, built most of the core experience, and then kept the thing running: partner integrations, performance work, accessibility fixes, dependency upgrades, QA, and the steady stream of support fixes that come with a live product.
What I built
- Onboarding, auth, and payments across web and mobile: sign up and sign in, password recovery, university and partner verification, profile editing and photo upload, status screens, PayFast and manual payment paths, and the membership state that ties it together.
- The deals and redemption experience: listings, detail pages, filters and search, Mapbox merchant maps, locked-deal states, voucher codes and barcodes, merchant PIN redemption, and the online and in-store flows with their success and failure states.
- The referral and ambassador flows: Refer a Friend, Recruit and Earn, earnings and banking details, and Vibe Agent activation.
- The public site and platform surfaces: landing, about, contact and partner pages, FAQs, legal, news, support, PWA support, static prerendering, Storybook, analytics, and monitoring.
- The mobile app itself: navigation, persisted session state, search and home, profile, bottom sheets, the redemption UI, permissions, Firebase analytics and messaging, Sentry, image optimisation, and the usual iOS and Android fixes.
- The integration layer underneath: shared API packages and validation schemas, payment redirects, WordPress-backed content, Mapbox, Firebase, and the partner-specific membership flows.
Hard parts
Membership products are mostly state machines in disguise. The interface had to know, and clearly say, whether a user was eligible, verified, paid, active, locked out, redirected to a partner, or finally ready to redeem, then make the next step obvious, on web and on mobile both.
A lot of the value also lived in paths you don’t see in a screenshot: partner-specific flows, payments, mobile permissions, and physical in-store redemption. Keeping those reliable mattered just as much as the screens people actually look at.
Stack
React, Vite, React Router, Redux Toolkit, styled-components and styled-system, Formik and Yup, Mapbox; React Native with React Navigation, Firebase analytics and messaging, AsyncStorage, React Native Maps, and QR/barcode tooling; WordPress for content; Sentry, Google Analytics and Hotjar; and Storybook, Cypress and Testing Library, with a Workbox PWA setup on web.