/Barva Skin Therapie
E-commerce / ARiOS · AndroidLiverole: React Native Developer

Barva Skin Therapie

Ayurveda E-commerce & AR Beauty App

5K+
Users
4.6
Rating
40+
Screens
React NativeTypeScriptRedux ToolkitShopify APIFirebaseVisionCameraReact Native VideoNotifee

App Screenshots

Product Listing
Product Listing
AR Try-On
AR Try-On
Cart
Cart
Order Detail
Order Detail

Full Shopify Storefront integration (products, variants, cart, checkout, orders, customer auth) plus VisionCamera-powered AR lipstick try-on — shipped to App Store + Play Store with offline-tolerant network resilience and FCM deep-linked notifications.

About the Project

Barva Skin Therapie is an Ayurveda-based beauty brand app built over April–November 2025 using React Native 0.81.1 + TypeScript. The app combines a complete Shopify-powered storefront with rich brand content — blog articles, video tutorials, and a social feed — creating an immersive brand experience.

The e-commerce layer covers full Shopify API integration: paginated product & collection fetching, variant selection with image filtering, inventory/sold-out tracking, cart (create/add/update/remove/checkout), order history, and customer auth. Product descriptions and blog articles render custom HTML with iframe video support.

The AR Try-On feature uses VisionCamera for real-time lipstick trials. FCM handles push notifications with deep linking, badge tracking via Redux, swipe-to-delete, and foreground handling via Notifee. Network resilience is managed with @react-native-community/netinfo providing offline fallback UI and retry logic.

Performance: react-native-fast-image caching, FlatList optimisation, React.memo/useMemo/useCallback memoisation, debounced search, native-driver animations, and skeleton loaders throughout.

Key Highlights

▸Full Shopify storefront — products, variants, collections, cart & order management
▸AR lipstick try-on with VisionCamera — real-time virtual makeup
▸Blog & video content with custom HTML renderers for iframes, images & links
▸FCM push notifications with deep linking, badge system & Notifee foreground handling
▸Offline resilience via netinfo — fallback UI & automatic retry on reconnect
▸Sold-out detection, variant image filtering & YouTube video on product detail
▸Firebase Crashlytics, UTM tracking & multi-environment API switching
▸Responsive UI — phones & tablets with light/dark/colorful theme variants

Technical Breakdown

Feature areas & implementation details

Shopify E-commerce
▸Paginated product & collection fetching with inventory/sold-out tracking
▸Variant selection with image filtering — price & image update on variant change
▸Cart: create, add, update quantity, remove items & generate checkout URL
▸Customer auth: signup, login, profile fetch/update & order history
▸Custom HTML renderers for product descriptions and blog articles with iframe support
AR & Media
▸VisionCamera-powered AR lipstick try-on with real-time camera feed
▸Custom video player (react-native-video-controls) with Buy Now integration
▸Image carousel with zoom on product detail, variant-specific image groups
▸YouTube video integration within product detail screen
▸react-native-fast-image for efficient caching across all image surfaces
Notifications
▸Firebase Cloud Messaging for both iOS & Android with token management
▸Deep linking: navigate to specific content from background/quit state taps
▸Notification screen: filter by type, mark read/unread, swipe-to-delete, pagination
▸Notifee for foreground notification presentation with custom UI
▸Redux badge tracking with real-time header badge updates
Architecture & State
▸Redux store: auth, posts, cart, profile, misc & notification slices
▸Multi-stack navigation: Auth Stack, Main Tab Navigator, feature stacks & modals
▸Centralized theme system with light/dark/colorful variants, responsive scaling
▸Multi-environment API host switching (dev/production)
▸TypeScript throughout with strict type definitions across all modules
Performance & Resilience
▸React.memo, useMemo & useCallback to eliminate unnecessary re-renders
▸FlatList with window sizing, key extraction & infinite scroll pagination
▸Debounced product search with real-time filtering & loading indicators
▸netinfo connectivity monitoring — offline fallback UI & retry mechanisms
▸Native-driver animations, skeleton loaders & optimistic UI updates for likes

Related Writeups

Technical posts drawn from this project's real challenges

10 min read

AR Try-On: Three.js + MediaPipe in React Native

How I shipped a real-time AR lipstick try-on for Barva Skin Therapie using Three.js and MediaPipe Face Landmarker inside a React Native WebView — no native AR SDK needed.

9 min read

Deploying a React Native App to the App Store — Full Xcode Walkthrough

A step-by-step production deployment guide for iOS — covering Apple Developer account setup, certificates, provisioning profiles, Xcode archive, TestFlight distribution, App Store Connect metadata, and the review gotchas that cause most first-time rejections.

9 min read

Deploying a React Native App to Google Play — Android Studio & Play Console Guide

The complete production deployment guide for Android — covering keystore generation, Gradle signing config, AAB builds in Android Studio, Play Console setup, internal/closed/open tracks, Play App Signing, and avoiding the policy violations that get new apps suspended.

Other Projects

View All →
Arkmantra
Ayurvedic Cosmetics E-Commerce Storefront & Admin

A highly hardened, full-featured D2C storefront and admin control panel designed...

Soul33 – The Beacon
Spirituality, Meditation & Mindfulness Platform

A cross-platform spiritual wellness app live on iOS & Android with Free, Seeker ...

Yoke Yoga
Social Wellness, Live Yoga & Learning Platform

Production yoga social platform — TikTok-style Reels, ZEGOCLOUD live streaming +...