BloodLink Mobile: NSS Blood Donation App

A robust, cross-platform mobile application built with React Native and Expo to facilitate the seamless management of blood donation camps. This application served as the primary interface for the NSS Blood Donation event at Vishwakarma Institute of Information Technology (VIIT), handling registrations and donor verification for over 600+ participants.

🏗 Architecture

The mobile app serves as the client-side interface, interacting directly with the backend infrastructure for registrations and the Supabase database for real-time validation. Background jobs and event-driven workflows (like automated emails) are handled via Inngest.

graph TD
    User[Donor/Admin] -->|UI Interaction| MobileApp[React Native App]

    subgraph "Frontend Layer"
        MobileApp -->|Scan QR| Camera[Expo Camera]
        MobileApp -->|Validation| Val[Form Logic]
    end

    subgraph "Data & Logic Layer"
        MobileApp -->|REST / API Calls| Backend[FastAPI Backend]
        MobileApp -->|Real-time Data| DB[(Supabase DB)]
    end

    subgraph "Workflow Engine"
        Backend -->|Send Event| Inngest[Inngest Cloud/CLI]
        Inngest -->|Delayed/Background Job| Email[Email/SMTP Service]
    end

Loading

📱 Features

• Donor Registration: Streamlined forms for Student and Faculty registration with real-time validation.
• QR Verification: Integrated Expo Camera scanner to verify donor identity and process donations instantly on-site.
• Real-time Status: Live updates on donation status using Supabase.
• Background Workflows: Reliable event-driven processes using Inngest for handling post-registration tasks.
• Optimized UX: Built with NativeWind (Tailwind CSS) for a responsive, modern, and accessible interface.

🛠 Tech Stack

Component	Technology	Purpose
Framework	React Native (Expo)	Cross-platform mobile development (iOS/Android).
Styling	NativeWind	Utility-first styling using Tailwind CSS.
Database Client	Supabase JS	Direct database interaction and authentication.
Workflow Engine	Inngest CLI	Managing event-driven background tasks and queues.
Navigation	React Navigation	Stack and Tab-based routing.
Hardware	Expo Camera	QR code scanning for donor verification.

🔗 Related Repositories

• Backend Repository: BloodLink Backend (FastAPI + Inngest + Supabase)

🌍 Real-World Impact

This application was successfully deployed and used in a live high-pressure environment during the NSS Blood Donation Camp at VIIT.

• Scale: Successfully processed 600+ registrations in a single day.
• Efficiency: Reduced donor check-in time significantly using QR code scanning.
• Reliability: Operated with zero downtime during peak event hours.

💡 Skills Gained

• Mobile Systems Design: Architecting a scalable mobile app for a real-world event.
• Event-Driven Architecture: Utilizing Inngest to manage asynchronous tasks and reliable background workflows.
• Hardware Integration: Implementing camera and scanner features for practical utility.
• Full-Stack Integration: Connecting a React Native frontend with a Python (FastAPI) backend and PostgreSQL database.
• User Experience (UX): Designing intuitive flows for rapid data entry and verification under time constraints.

🚀 Getting Started

Prerequisites

• Node.js (LTS)
• Expo Go app on your mobile device (or Android/iOS Simulator)
• Inngest CLI (for local background task testing)

Installation

1. Clone the repository

git clone https://github.com/SamarthGhante/nss-app-rn.git
cd nss-app-rn

2. Install dependencies

npm install

3. Run the App

npx expo start

• Scan the QR code with Expo Go (Android) or use the Camera app (iOS).
• Press a for Android Emulator or i for iOS Simulator.

📄 License

Distributed under the MIT License. See LICENSE for more information.