Welcome to Sub Spark, a dynamic mobile app designed to connect users with local business listings, special offers, and interactive maps. Built from the ground up with React Native and Expo, this app delivers a seamless cross-platform experience for iOS and Android users. Whether you're a shopper hunting for deals, a business owner promoting listings, or an admin managing the platform, the app makes discovering and engaging with local ventures effortless and fun. This project showcases my expertise in full-stack mobile development, where I took high-level business requirements and translated them into a robust, user-friendly app. I handled everything from architecture design to edge-case implementation (like offline support, secure payments, and role-based permissions), ensuring reliability even in real-world scenarios like network failures or invalid inputs. It's a testament to building scalable software that feels intuitive while tackling complex features under the hood.
Sub Spark packs powerful functionality into an easy-to-navigate interface. Here's a breakdown of the core features, explained simply with their real-world benefits:
- What it does: Secure login/logout for different user types—regular users (shoppers), listers (business owners), and admins. Each role sees tailored screens and actions (e.g., shoppers view deals, listers create listings, admins moderate content).
- How it works: Uses token-based sessions for secure access. On login, the app checks credentials via API and loads role-specific dashboards.
- Edge cases handled: Forgot password flows, session timeouts, and multi-device logins to prevent unauthorized access.
- Value added: Ensures a personalized and secure experience, similar to role-based access in enterprise tools, making the app adaptable for diverse users without complexity.
- What it does: A live map showing nearby listings with custom pins, filters (e.g., by category or distance), and real-time location tracking.
- How it works: Integrates mapping libraries to display markers for businesses. Tap a pin to see details like hours, reviews, or deals. Buttons for "Current Location" and "User Pins" let you zoom to your spot or saved favorites.
- Edge cases handled: Handles GPS inaccuracies, offline map caching, and privacy prompts for location sharing.
- Value added: Provides practical navigation and discovery, akin to integrated mapping in ride-sharing apps, enabling users to find and explore local options efficiently.
- What it does: Listers can add or edit business listings with details like descriptions, images, and locations. Users browse and view them in cards or full detail screens.
- How it works: Forms guide listing creation, with image uploads straight from your camera or gallery. Listings appear on the map and in searchable lists.
- Edge cases handled: Validation for incomplete forms, duplicate listings, and image compression for fast uploads on slow networks.
- Value added: Streamlines content management for businesses, comparable to user-generated platforms, fostering a vibrant ecosystem of local listings.
- What it does: Businesses attach coupons to listings (e.g., "10% off coffee"). Users collect, view, and redeem them via QR codes.
- How it works: Scan a QR at the business to redeem; the app verifies and updates your coupon wallet. Admins track usage for analytics.
- Edge cases handled: Expired coupons, duplicate redemptions, and offline scanning with later sync.
- Value added: Enhances user engagement through tangible incentives, like digital rewards systems, driving traffic to businesses while offering savings to consumers.
- What it does: Handles subscriptions for premium features (e.g., boosted listings) or one-time fees.
- How it works: Secure checkout screens connect to payment gateways like Stripe, processing cards or digital wallets.
- Edge cases handled: Failed transactions, refunds, and compliance with PCI standards for data security.
- Value added: Enables sustainable monetization, similar to freemium models in SaaS, supporting platform growth without disrupting core functionality.
- What it does: Personalized dashboards for managing info, saved coupons, pinned locations, and settings.
- How it works: Edit your profile, view collected deals, or bookmark favorites—all synced across devices.
- Edge cases handled: Data privacy controls, account deletion, and conflict resolution for synced changes.
- Value added: Delivers a tailored user journey, like customized feeds in social apps, improving retention through relevant, user-centric features.
- What it does: A clean, responsive design with animations, custom buttons, cards, and headers for a premium feel.
- How it works: Reusable components ensure consistency across screens, with smooth transitions (e.g., animated listing cards).
- Edge cases handled: Accessibility features like screen reader support and dark mode toggles.
- Value added: Elevates the overall experience, comparable to high-end consumer apps, making interactions intuitive and visually appealing.
- What it does: Comprehensive end-to-end tests cover all features and roles.
- How it works: Using Detox, tests simulate real user interactions to catch bugs early.
- Edge cases handled: Tests for rare scenarios like low battery or interrupted sessions.
- Value added: Guarantees reliability and stability, akin to rigorous QA in professional software, minimizing issues in production.
- Frontend: React Native with Expo for fast cross-platform builds.
- Language: TypeScript for type-safe, maintainable code.
- State Management: Recoil for efficient global state handling.
- Navigation: Custom bottom navigation for intuitive flow.
- API: Structured RESTful communication with backend services.
- Testing: Detox for E2E tests, ensuring reliability.
- Other: Geolocation APIs, QR code scanning, and payment SDKs. This stack was chosen for its balance of performance, scalability, and developer productivity—ideal for a production-ready app.
As the sole developer, I owned the entire lifecycle—from ideation to deployment—implementing not just core features but also nuanced details like secure data handling and user-friendly error messages. This app demonstrates my ability to break down complex systems (e.g., geospatial queries or role-based logic) into simple, scalable code. It's production-grade software that could power a real startup, highlighting skills in mobile dev, full-stack integration, and product thinking—perfect for staff-level roles at companies like Uber, Airbnb, or local tech firms.
- Install Expo Go (if not already installed): Open the App Store on your iOS device, search for "Expo Go," and download the official app from Expo.
- Scan the QR Code: Use your iPhone's camera app to scan the provided QR code. It will detect the code and prompt you to open it in Expo Go. Alternatively, open Expo Go and use its built-in scanner.
- Allow Permissions (if prompted): Expo Go may request camera or notification permissions—grant them to proceed.
- Download and Launch: The app demo will automatically download the necessary bundle over-the-air. Once complete, it will launch within Expo Go. If updates are available later, they'll sync automatically on reopen.
