Skip to main content

STALLYONS TECHNOLOGIES

Innovating the future of digital with AI, design, and technology. From AI to Web — Stallyons transforms your ideas into digital reality. Building smarter digital experiences through AI, innovation, and technology. Innovating the future of digital with AI, design, and technology. From AI to Web — Stallyons transforms your ideas into digital reality. Building smarter digital experiences through AI, innovation, and technology.
EN
background

Blog

URQR: React Native
QR Social App

URQR: React Native QR Social App

Meeting someone new is easy. Staying connected afterwards is the hard part. You swap names, hunt for each other on a social app, scroll past strangers with the same name, or type in a phone number and hope it is right. URQR already fixed this on the web, but a browser cannot scan well, cannot send a notification, and cannot open the right screen from a shared link. This project brought URQR to the phone properly.

URQR is a social app where people connect by scanning each other’s QR code. Every user gets a unique code, and scanning it opens that person’s profile, ready to connect. It works like a digital business card with a social feed, messages and posts built in. The mobile app was built in React Native as a true native app, not a website squeezed into a shell, and it reuses the same Supabase backend that already powers the URQR website at urqr.fun, so the web and the app always show the same data.

Put simply, URQR makes connecting as fast as pointing your camera. You scan a code, the phone buzzes, a profile opens, and one tap sends a connection request, all on top of the backend the website already uses, with push notifications and deep links the web never could offer.

The Starting Point: A Native App on an Existing Backend

The web product worked, so the job was not to rebuild it. It was to add what only a phone does well while matching urqr.fun exactly and never changing the live database. That set a precise list of requirements.

  • Make scanning feel native. A QR code belongs to a phone camera, so the scanner had to be fast and reliable even in poor light, not a clunky browser prompt that asks for permission every time.
  • Bring people back. A website cannot send push notifications, so the app had to alert users to new requests, accepted connections, replies and pings.
  • Open links in the app. A shared urqr.fun/username link had to open the right screen inside the app instead of bouncing to a browser.
  • Reuse one backend. The app had to read and write the same Supabase data as the website, with nothing to migrate and no second backend to host.
  • Protect every connection. Requests had to be accepted or silently rejected, and users had to be able to block anyone, so people felt safe sharing their code.
  • Ship both platforms from one codebase. A small team needed iOS and Android to match, without a separate build per platform.

The Build: From a Scan to a Connection

The core action is a single scan and a single tap. Building a genuinely native client on top of an existing web backend, with a real camera scanner, deep links and native animations, is the kind of React Native app development services this project called for. A new connection runs in order:

  1. The user signs up or logs in with email, then opens the native scanner and points it at a code.
  2. The phone gives a small haptic buzz and the matching profile opens instantly with photo, name and bio.
  3. One tap sends a connection request, and the other person receives a push notification.
  4. They accept, or reject silently, with no one told, so there is no awkward moment.
  5. Once connected, both see each other’s posts on the Wall Feed.
  6. They stay in touch through replies, pings, bubbles and the Inbox, all synced with the website.

The signature post type is the Sonic Polaroid, a photo paired with a short audio clip and a caption, captured with the phone’s native camera and microphone. It matches the website feature exactly, so a post looks the same whether someone sees it on urqr.fun or in the app, and tapping any URQR link opens the exact screen it points to.

Technical Architecture

URQR Mobile is a native client for a backend that already exists, so the architecture adds native features without disturbing the live database. Each layer has one job.

  • Mobile app. React Native in the Expo bare workflow runs on iOS and Android from one codebase, with full native access and no WebView.
  • Shared backend. The existing Supabase project powers both the website and the app, with the same auth, database and storage, and Row Level Security enforcing the same rules in both places.
  • QR scanning. react-native-vision-camera reads codes natively, validates them on the device, and fires a haptic buzz on a valid URQR code before loading the profile.
  • Animations and gestures. Reanimated and Moti drive smooth 60fps motion, and Gesture Handler powers native swipes. Rebuilding the website’s motion and feel as native UI/UX design is what makes the app feel faster than the site.
  • Push and deep links. Expo Notifications works across APNs and FCM, and Universal Links on iOS with App Links on Android send urqr.fun/username straight into the app.
  • Media and feed. Photos and audio for Sonic Polaroids and avatars upload to Supabase Storage, and the Wall Feed loads newest-first in pages so it stays smooth.

The part worth engineering carefully was sharing a live backend safely. The app reads and writes the same data in the same way the website does, with every Supabase key kept in environment variables, so a user can move between the website and the app with no difference in their data and no risk to the existing structure.

Challenges Solved

The harder problems came from matching an existing product rather than inventing one. The brand was matched without a WebView by rebuilding every screen natively in the same colours, fonts and dark, neon-accented style. The live backend was shared safely by reusing the Supabase project untouched and keeping keys in environment variables. Deep links were made to work on both platforms with Universal Links and App Links verified against the urqr.fun domain, tested on real devices. And the launch covered icons, splash screens, store listings and review feedback until both apps were live, after which the client received the signing keys and a handover document.

The through-line was turning a working website into a true app at low cost, with one backend and one codebase serving both stores. That lean, network-driven approach is exactly what consumer-app startups look for when they grow a product mostly through sharing and word of mouth.

The Result

The outcome is a genuinely native social app that feels faster than the website and shares its data exactly. Scanning is quick, connections are private, posts match everywhere, shared links open the app, and push notifications bring people back, something the web alone could never do. URQR is live on both the Apple App Store and Google Play.

The build works because it added native power on top of an existing backend instead of rebuilding anything. If you are planning something similar, you can hire front-end developers who have shipped this native-on-Supabase pattern, or tell us about your product and we will plan the build. As an offshore React Native app development company, we bring a web product to both app stores from one codebase.

Frequently Asked Questions

What is URQR?

URQR is a social app where people connect by scanning each other’s QR code. Each user has a unique code, and scanning it opens that person’s profile to connect. It works like a digital business card with a social feed, messages and posts, and it runs on iOS and Android alongside the existing website at urqr.fun.

Is the URQR app a wrapper around the website?

No. It is a true native app built in React Native with no WebView and no managed shortcut. Every screen was rebuilt natively, the QR scanner uses the phone’s real camera, and animations run on the native thread, so it feels like a real app because it is one.

How does the app stay in sync with the website?

The app reuses the same Supabase backend that powers urqr.fun, including the same auth, database and storage. A user can sign up on the website and log in on their phone with nothing to migrate, and the two always show the same profiles, connections and posts.

Is connecting on URQR private?

Yes. Nobody can connect with you without your approval. Every request can be accepted or rejected, a rejection is completely silent so the sender is never told, and users can block anyone, which stops a blocked user from seeing their profile or sending requests.

What technology is URQR built with?

The app is built in React Native using the Expo bare workflow, on top of a shared Supabase backend. It uses react-native-vision-camera for scanning, Reanimated, Moti and Gesture Handler for motion, Expo Notifications for push across APNs and FCM, and Universal Links and App Links for deep linking.

Leave a Reply